name: sora-design
version: alpha
description: >
  Sora is a dark, terminal-flavored portfolio dashboard for a fintech product
  designer. Near-black slate surfaces (#0F1217) carry inset-shadowed panels with
  fine 7%-white hairlines; a mint "voltage" (#19C37D) signals live/positive state
  and the primary CTA, with cobalt (#3B6BFF) as the secondary data accent. The
  type story pairs Space Grotesk display headings with an Inter body and a
  pervasive JetBrains Mono for labels, metrics, breadcrumbs and chips. Geometry is
  tight and small-radius (5-6px), the layout is a three-pane app shell, and the
  signature moves are inset/embossed surfaces, count-up KPIs, draw-in sparklines
  and skeleton-to-content reveals.
colors:
  # Brand / Voltage
  mint: '#19C37D'        # primary accent: CTA, live/positive metrics, active nav, pulse dots
  cobalt: '#3B6BFF'      # secondary accent: data sparklines, links, social labels
  amber: '#E0B341'       # tertiary status accent: BETA badge, one project dot
  # Surface
  slate: '#0F1217'       # page background (--slate)
  surface: '#1A1F27'     # panel fill (--surface)
  sidebar: '#11151B'     # left + right rail background
  inset: '#13171D'       # inset inputs, toggle group track, integration tiles
  well: '#0D1014'        # progress-bar well
  footer: '#0C0F13'      # footer bar background
  ink-on-mint: '#06140d' # text on mint CTAs / logo chip
  # Text
  t1: '#E6E9EF'          # primary text / headings (--t1)
  t2: '#9AA3B2'          # body / secondary text (--t2)
  t3: '#5C6675'          # muted: mono labels, placeholders, metadata (--t3)
  # Hairlines
  hairline: 'rgba(255,255,255,0.07)'   # standard 1px borders (.hair, panels)
  divide: 'rgba(255,255,255,0.05)'     # row dividers inside list panels
  # Tints (semantic washes)
  mint-wash: 'rgba(25,195,125,0.08)'   # active nav / available-badge bg
  mint-chip: 'rgba(25,195,125,0.12)'   # LIVE/Connected chips, +metric badges
  cobalt-chip: 'rgba(59,107,255,0.12)' # NPS/SHIPPED chips
  amber-chip: 'rgba(224,179,65,0.14)'  # BETA chip
  white-chip: 'rgba(255,255,255,0.05)' # neutral mono chips
typography:
  display:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1
    letterSpacing: -0.3px
  heading:
    fontFamily: "'Space Grotesk', sans-serif"
    fontSize: 17px
    fontWeight: 600
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 13px
    fontWeight: 400
  mono-label:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 10px
    fontWeight: 500
    letterSpacing: 1px
    textTransform: uppercase
  mono-metric:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 32px
    fontWeight: 600
rounded:                  # tight, near-square radii
  xs: 4px
  sm: 5px
  md: 6px
  full: 9999px
spacing:                  # base unit 4px (Tailwind scale)
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  '2xl': 28px
  '3xl': 36px
components:
  panel:
    backgroundColor: '{colors.surface}'
    border: '1px solid {colors.hairline}'
    boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.04), 0 1px 2px rgba(0,0,0,0.4)'
    rounded: '{rounded.md}'
  insetInput:
    backgroundColor: '{colors.inset}'
    border: '1px solid rgba(255,255,255,0.08)'
    boxShadow: 'inset 0 1px 2px rgba(0,0,0,0.5)'
    rounded: '{rounded.sm}'
    textColor: '{colors.t1}'
  primaryButton:
    backgroundColor: '{colors.mint}'
    textColor: '{colors.ink-on-mint}'
    typography: '{typography.heading}'
    rounded: '{rounded.sm}'
    boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.35), 0 2px 8px rgba(25,195,125,0.25)'
    padding: 'h-10, full-width, gap-2'
  navItemActive:
    backgroundColor: '{colors.mint-wash}'
    textColor: '{colors.t1}'
    rounded: '{rounded.sm}'
    indicator: '3px mint left bar'
  statusChip:
    backgroundColor: '{colors.mint-chip}'
    textColor: '{colors.mint}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.xs}'
    padding: 'px-1.5 py-0.5'
  toggle:
    onColor: 'rgba(25,195,125,0.85)'
    offColor: '#222831'
    knob: '{colors.t1}'
    rounded: '{rounded.full}'
    size: '38x22px, inset shadow'
motion:
  navStagger: 'opacity 0->1 + translateX -12->0, stagger 40ms, 500ms ease out(4)'
  kpiCountUp: 'count 0->target, 1400ms, delay 200ms + 120ms/index, ease out(4)'
  sparkDraw: 'stroke-dashoffset len->0, 1600ms, stagger 90ms (start 400), ease out(3)'
  areaFade: 'opacity 0->1, 1400ms, delay 900ms'
  skeletonReveal: 'skel fade out 500ms (stagger 130, +700ms) then content fade/translateY in'
  pulseDot: 'opacity/scale pulse, 1.6s ease-in-out infinite'
  shimmer: 'skeleton gradient slide, 1.3s linear infinite'
  reducedMotion: 'prefers-reduced-motion sets KPIs/areas final, hides skeletons, no animation'
icons:
  library: inline SVG (Feather/Lucide-style 24x24 paths)
  style: outline
  stroke: 2px (2.4-2.5 on small chevrons/CTA arrow)
  sizes: { xs: 9px, sm: 13px, md: 15px, lg: 24px }
  color: '{colors.t3} default, {colors.mint} on active/accent, currentColor in CTAs'

Sora Veld

sora-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Sora is a dark, IDE/terminal-flavored portfolio dashboard for a fictional fintech product designer. The page sits on a near-black slate (#0F1217), and every container is a .panel — a #1A1F27 surface ringed by a 7%-white hairline and double-shadowed (a 1px inset highlight on top, a soft drop below) so it reads as a subtly embossed plate. A single mint "voltage" (#19C37D) carries all live and positive signals: the active nav item, the "Available for work" pill, the primary "Send message" CTA, the up-trend metrics, and the pulsing status dots. Cobalt (#3B6BFF) is the secondary data accent for sparklines and links, with a small amber (#E0B341) reserved for BETA-style status. The type story is three-voice: Space Grotesk for tight display headings, Inter for body copy, and JetBrains Mono everywhere a label, breadcrumb, metric, chip or keycap appears — the mono is what gives the whole thing its console feel. Geometry is deliberately small-radius (5-6px, never round-cornered cards) and tabular numerals (tnum) keep metrics aligned. The signature moves are all entrance behaviors: KPIs count up, sparklines draw themselves in, and case-study cards reveal from shimmering skeletons.

Colors

Brand / Voltage. mint #19C37D is the one true accent — active nav fill, left-bar indicator, the "Available for work" and "Connected" pills, LIVE chips, positive metrics (+34%, −22%), the experience progress bar, and the primary CTA. cobalt #3B6BFF is the secondary data color for sparklines, "view all" / links, and social labels. amber #E0B341 is a one-off status hue (BETA chip, the Pulse Risk project dot).

Surface. slate #0F1217 is the page; surface #1A1F27 fills panels; sidebar #11151B backs both rails; inset #13171D fills inputs, the toggle group, and integration tiles; well #0D1014 is the progress-bar track; footer #0C0F13 is the bottom status bar. ink-on-mint #06140d is the dark text that sits on mint fills.

Text. t1 #E6E9EF is primary/headings; t2 #9AA3B2 is body/secondary; t3 #5C6675 is muted — mono labels, placeholders, metadata, default icon stroke.

Hairlines. hairline rgba(255,255,255,0.07) is the universal 1px border (.hair, panel edges, avatar/tile borders); divide rgba(255,255,255,0.05) separates rows inside list panels.

Tints. Translucent washes carry semantic state: mint-wash (active nav), mint-chip/cobalt-chip/amber-chip (status badges), and white-chip (rgba(255,255,255,0.05)) for neutral mono chips.

Typography

Three Google Fonts via one @import: Space Grotesk (400-700, display + headings), Inter (400-600, body), and JetBrains Mono (400-700, labels, metrics, chips, breadcrumbs). The mono carries font-variant-numeric: tabular-nums (.tnum) on metrics so digits stay aligned during count-up. All three are open-source, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	30px	700	1	tight (-)	Page H1 "Overview"
heading	17px / 15px / 18px	600	—	tight	Section + card titles (Grotesk)
body	13-13.5px	400-500	—	—	Descriptions, copy (Inter)
mono-label	9-11px	400-600	—	wide/widest	Section labels, breadcrumbs, metadata
mono-metric	32px / 15px	600	1	—	KPI values + case-study metrics (tnum)

Layout

Base unit is 4px (Tailwind scale); gaps cluster at 3.5 (14px), spacing at py-3/py-6. The page is a three-pane app shell: a sticky 56px header (logo chip + breadcrumb + search + availability pill + avatar), a fixed 240px left nav rail (#11151B), a fluid main, and a 360px right contact rail with a left-side drop shadow. The main column stacks a header row with a segmented time-range control, a 4-up KPI grid (grid-cols-2 xl:grid-cols-4), a mixed case-study grid (xl:grid-cols-3 with 2-col-span hero cards), and a 2/1 split of a Skills toggle list and an Integrations list. A 32px mono footer status bar pins the bottom. Rails collapse responsively (lg: / xl:). Whitespace is dense and businesslike — this is a working dashboard, not an airy marketing page.

Elevation & Depth

Depth is built from inset/emboss shadows plus hairlines, not big drop shadows. Panels use inset 0 1px 0 rgba(255,255,255,0.04) (top highlight) over 0 1px 2px rgba(0,0,0,0.4); inset inputs invert it with inset 0 1px 2px rgba(0,0,0,0.5) so they read as recessed wells. One KPI card adds a mint ring (0 0 0 1px rgba(25,195,125,0.18)) for emphasis. The mint CTA glows (0 2px 8px rgba(25,195,125,0.25)). The right rail floats over content with a large -12px 0 30px rgba(0,0,0,0.35) shadow. Toggles and logo chips repeat the inset-highlight motif.

Shapes

Uniformly tight. Panels are 6px (rounded-[6px]); inputs, buttons, nav rows, tiles and chips are 5px (rounded-[5px]); small chips/skeletons are 4px. The only round shapes are status dots, the toggle knob/track (rounded-full, 11px), and avatar nothing — even the avatar is a 5px square. Nothing is a soft pill except the status dots; the system reads engineered and console-like.

Components

• panel — #1A1F27 fill, 7%-white border, inset-highlight + drop shadow, 6px radius; the universal container.
• inset-input — #13171D fill, recessed inner shadow, 5px radius, mono/Inter text; search box, form fields, metric cells, segmented buttons.
• primary button — mint fill, #06140d ink, Grotesk semibold, 5px radius, inset highlight + mint glow; "Send message".
• nav row — 8-9px tall, 5px radius; active state = mint-wash fill + 3px mint left bar + mint icon; hover = rgba(255,255,255,0.035).
• status chip — tinted wash (mint/cobalt/amber/white), matching text color, mono uppercase 9.5-10px, 4px radius; "LIVE", "SHIPPED", "BETA", "Connected".
• KPI card — panel with mono label, 32px mono tnum value (count-up), inline sparkline, and a tinted footnote chip.
• case-study card — panel with title + status chip + index, a row of inset-input metric cells, and a full-width SVG sparkline/area chart; reveals from a shimmer skeleton.
• toggle — 38x22 pill, inset shadow, mint-on / #222831-off, #E6E9EF knob.
• footer status bar — 32px, #0C0F13, mono 11px, pulsing "Connected" dot.

Motion

All authored with anime.js v4 and gated behind prefers-reduced-motion. On load: nav rows stagger in (translateX + fade, 40ms stagger, ease out(4)); KPI values count up from 0 over 1400ms; sparklines draw via stroke-dashoffset over 1600ms (90ms stagger); area fills fade in at 900ms; after a 700ms beat, case-study skeletons fade out (130ms stagger) and content fades/slides up. CSS keyframes drive the infinite pulseDot (1.6s) and skeleton shimmer (1.3s). With reduced motion, KPIs and areas snap to final and skeletons are hidden — no animation runs.

Iconography

Inline SVG only, in a Feather/Lucide-style outline idiom on a 24x24 viewBox, fill="none" with 2px strokes (2.4-2.5px on small chevrons and the CTA send arrow). Sizes range 9-15px in UI (chevrons, search, nav glyphs) up to ~24px. Color follows context: t3 muted by default, mint on active/accent items, currentColor inside CTAs and inheriting chips. Icons are UI affordances, not decoration.

Do's and Don'ts

• Do keep mint as the single positive/live voltage; reach for cobalt only as a data/secondary accent and amber only for a stray status.
• Do build containers as .panel (inset highlight + hairline) and inputs as recessed .inset-input wells.
• Do set every label, metric, breadcrumb, chip and keycap in JetBrains Mono with tnum on numbers.
• Do keep radii tight (4-6px) and gate every entrance animation behind reduced-motion.
• Don't introduce large drop shadows, soft/round cards, or pill-shaped buttons — the look is engineered and square.
• Don't color body text brighter than t1/t2 or use accent colors for plain copy.
• Don't mix in a fourth font or set headings in anything but Space Grotesk.

Known Gaps

• Tailwind v4 is loaded via the browser CDN, so some utility values (exact gap/ padding pixels) are inferred from the Tailwind scale rather than authored CSS.
• The segmented time-range, KPI tints and chips use many one-off inline rgba values; the spec groups them under named tint tokens rather than listing each.
• Display letter-spacing is tracking-tight (Tailwind ~-0.3px), approximated here.
• Fonts load from Google Fonts; if offline, substitute any geometric-grotesk / grotesque-sans / monospace trio.