ToDesktop

Light-first developer-tool canvas — #ffffff primary background paired with #e5e7eb hairline border (1647 measured occurrences, the structural unit) and #000000 ink (1521 occurrences) doing the dominant work. Mid-tone descender #707070 / #999999 / #c2c2c2 handles captions, dividers, de-emphasized labels. Dual-accent palette is `#f79942` (warm orange) and `#1f6af2` (blue), each appearing only as CTA highlights and pivot signals — surface area < 2% combined. Semantic CSS variables encode the system: `--body-light-loud #141414` (primary text), `--body-light-muted #656565` (secondary), `--body-light-ghost #A4A4A4` (tertiary), `--body-stroke-lighter #1616160F` (hairline), `--body-stroke-muted #1616161F` (border). Dark mode is staged but not the primary register: `--body-dark-loud #FFFFFFCC / --body-dark-muted #FFFFFF99`.

• Hairline border #e5e7eb handling ~1647 measured occurrences — the structural unit that carries elevation and grouping
• Ink #000000 + #141414 (loud) + #707070 (muted) + #999999 (ghost) — three-tier text descender
• Background pair #ffffff (page) + atmospheric gradient panels (rgba 5,6,27 / 0.72) for hero overlays
• Orange #f79942 reserved for primary CTA + recommendation badges — never as fill background
• Blue #1f6af2 reserved for secondary action + link emphasis — never as background block

linear-gradient(rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0)) — frosted highlight
linear-gradient(0deg, rgba(5, 6, 27, 0.72), rgba(5, 6, 27, 0.72)) — deep blueish overlay (hero)
linear-gradient(rgb(255, 255, 255), rgba(255, 255, 255, 0.8)) — soft fade
linear-gradient(rgb(242, 242, 242), rgb(237, 237, 237)) — subtle off-white panel shift
linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.12)) — top edge fade

• Primary family: Inter (prose, headings, UI labels). Counterpart family: Geist Mono (numerics, inline code labels, kbd, version strings). No serif partner.
• Weight ladder: 400 (reading body + most UI) / 500 (emphasis + small labels). Do not introduce 600 — the 500 stops the ladder.
• Size scale: 11 / 12 / 14 / 16 px on body and UI. Display headings extend up the same scale; no magic numbers between steps.
• Line-height pattern: Geist Mono tight (lh 16 on 11-12 px size, lh 32 on 12 px display variant); Inter standard (lh 20 on 14 px, lh 24-26 on 16 px).
• Geist Mono signals developer affinity — use it on numerics, version pills, terminal-adjacent UI. Don't use it for prose paragraphs; that flips the register.
• Numerics in Geist Mono inherit tabular alignment automatically — no `tabular-nums` override needed.

• Mixed-base rhythm — 1px hairline (188 measured occurrences) + 4px (283) + 8px (281) + 12px (212) + 16px (190) dominate. The 1px is the structural unit, not noise.
• Standard scale beyond hairline: 4 / 6 / 8 / 10 / 12 / 14 / 16 / 18 / 20 / 22 / 24 px. Pick from scale; never invent values between steps.
• Container max-width set: 324 / 516 / 600 / 628 / 936 / 960 px — narrower than typical SaaS landings. Editorial column rhythm.
• Section vertical rhythm: pick from 16-24 px scale × multipliers, never freehand. The narrow container demands the rhythm.
• Card padding: 16-24 px on desktop, 12-16 px on mobile. Hairline border at 1px before reaching for shadow.

• Primary elevation is the 1px hairline — `border: 1px solid #e5e7eb` (or `#1616161F` via `--body-stroke-muted`) before any shadow is considered.
• When shadow is needed, use 3-4 stacked layers: white inset highlight + tinted drop + outer halo. Never a single bloom.
• Inset highlight pattern: `rgba(255,255,255,0.06) 0px 1px 3px 0px inset, rgba(255,255,255,0.06) 0px 0.5px 0.5px 0px inset` — top-edge crispness on dark surfaces.
• Drop pattern: `rgba(0,0,0,0.04) 0px 12px 12px -3px, rgba(0,0,0,0.02) 0px 6px 6px -3px, rgba(0,0,0,0.02) 0px 3px 3px -1.5px, rgba(0,0,0,0.03) 0px 1px 1px 0px` — multi-distance falloff that reads as a single soft elevation.
• Layering depth: hairline border → 1-key drop shadow → 4-key stacked shadow → atmospheric gradient overlay. Pick the lightest tool that earns the surface.

• Radius scale 4-8 px for cards, buttons, inputs. Pill radii avoided — corners stay editorial.
• Hairline borders dominate (1px); never substitute a 2px border for emphasis — change color or weight instead.
• Icons are monoline Lucide-style (Geist DS default), never filled glyphs. Stroke 1.5-2 px.
• Geist Mono numerics inherit width = 1ch; align grid columns to character grid where possible.

• Primary CTA button (orange)

  background

  #f79942

  text

  #ffffff

  border

  1px solid transparent

  radius

  6px

  padding

  8px 16px

  font

  Inter 500 14px / 20px

  shadow

  rgba(255,255,255,0.12) 0px 1px 3px 0px inset, rgba(255,255,255,0.12) 0px 0.5px 0.5px 0px inset, rgba(101,101,101,0.16) 0px 4px 8px 0px

  transition

  0.2s cubic-bezier(0.6, 0.6, 0, 1) on color, background-color, border-color

  Tailwind

  Copy

  inline-flex items-center justify-center rounded-md bg-[#f79942] px-4 py-2 text-sm font-medium leading-tight text-white shadow-[rgba(255,255,255,0.12)_0_1px_3px_0_inset,rgba(255,255,255,0.12)_0_0.5px_0.5px_0_inset,rgba(101,101,101,0.16)_0_4px_8px_0] transition-colors duration-200 ease-[cubic-bezier(0.6,0.6,0,1)] hover:bg-[#f79942]/90

• Secondary CTA button (blue)

  background

  #1f6af2

  text

  #ffffff

  border

  1px solid transparent

  radius

  6px

  padding

  8px 16px

  font

  Inter 500 14px / 20px

  transition

  0.2s cubic-bezier(0.6, 0.6, 0, 1) on color, background-color, border-color

  Tailwind

  Copy

  inline-flex items-center justify-center rounded-md bg-[#1f6af2] px-4 py-2 text-sm font-medium leading-tight text-white transition-colors duration-200 ease-[cubic-bezier(0.6,0.6,0,1)] hover:bg-[#1f6af2]/90

• Hairline-bordered card

  background

  #ffffff

  text

  #141414

  border

  1px solid #e5e7eb

  radius

  8px

  padding

  16px 20px

  shadow

  rgba(0,0,0,0.04) 0px 12px 12px -3px, rgba(0,0,0,0.02) 0px 6px 6px -3px, rgba(0,0,0,0.02) 0px 3px 3px -1.5px, rgba(0,0,0,0.03) 0px 1px 1px 0px

  Tailwind

  Copy

  rounded-lg border border-[#e5e7eb] bg-white p-5 text-[#141414] shadow-[rgba(0,0,0,0.04)_0_12px_12px_-3px,rgba(0,0,0,0.02)_0_6px_6px_-3px,rgba(0,0,0,0.02)_0_3px_3px_-1.5px,rgba(0,0,0,0.03)_0_1px_1px_0]

• Geist Mono version pill

  background

  transparent

  text

  #656565

  border

  1px solid #e5e7eb

  radius

  4px

  padding

  2px 8px

  font

  Geist Mono 500 11px / 16px

  Tailwind

  Copy

  inline-flex items-center rounded-sm border border-[#e5e7eb] bg-transparent px-2 py-0.5 font-mono text-[11px] font-medium leading-4 text-[#656565]

• Nav link

  text

  #656565

  font

  Inter 500 14px / 20px

  padding

  6px 10px

  radius

  4px

  hoverText

  #141414

  transition

  0.2s cubic-bezier(0.6, 0.6, 0, 1) on color, background-color, border-color

  Tailwind

  Copy

  rounded-sm px-2.5 py-1.5 text-sm font-medium leading-tight text-[#656565] transition-colors duration-200 ease-[cubic-bezier(0.6,0.6,0,1)] hover:text-[#141414]

• Atmospheric hero overlay

  background

  linear-gradient(0deg, rgba(5, 6, 27, 0.72), rgba(5, 6, 27, 0.72))

  usage

  Hero panel deep-blue tint over light-leak background image

  Tailwind

  Copy

  bg-[linear-gradient(0deg,rgba(5,6,27,0.72),rgba(5,6,27,0.72))]

• Two easing curves only: `cubic-bezier(0.6, 0.6, 0, 1)` (Geist signature, micro-interactions) + `cubic-bezier(0.76, 0, 0.24, 1)` (slow scroll reveals).
• Duration ladder is varied: 50 / 200 / 300 / 400 / 450 / 600 / 1000 ms — never freehand timings.
• Geist signature easing on hover/focus, Quart on scroll/section reveals. Don't cross-pollinate.
• All-property transitions reserved for state changes, not for individual property tweens.

• Hover states: color + background-color shift at 200ms with Geist easing — never transform on text.
• Focus rings inherit semantic tokens (--body-stroke-muted #1616161F default; can elevate to accent on form fields).
• Orange accent reserved for primary CTA + recommendation; blue for secondary action + link emphasis. Don't mix them in the same component.
• Geist Mono pills act as silent metadata — version strings, status badges, kbd shortcuts. They never receive hover treatment.

5-step Tailwind defaults: sm 400px / md 768px / lg 957px / xl 1200px / 2xl 1536px. Note the lg break at 957 (not the Tailwind default 1024) — ToDesktop's breakpoint set is custom-tuned. Narrow container set (324-960 px) keeps content rails tight even on 2xl.

• Mobile-first authoring; lg/xl introduce columned layouts but never widen the inner content rail past 960 px.
• Container max-width set: 324 / 516 / 600 / 628 / 936 / 960 px — pick the narrowest that fits the module's information density.
• Section vertical rhythm shrinks ~40% on mobile.
• Atmospheric gradients render identically across breakpoints; never gate them behind md+.

• Foreground/background contrast: #000000 on #ffffff = 21:1 (AAA Large + Normal). #141414 on #ffffff = 16.7:1 (AAA). #656565 on #ffffff = 5.7:1 (AA Normal). #999999 on #ffffff = 2.85:1 (FAILS AA — reserve for >24 px ghost labels only).
• Audit accent contrasts: #f79942 (orange) on #ffffff = 2.6:1 (FAILS AA Normal — use #ffffff text on #f79942 background = 3:1, AA Large only). #1f6af2 (blue) on #ffffff = 4.5:1 (AA Normal pass).
• Honor `prefers-reduced-motion` — collapse scroll choreography (1s opacity tweens) to static when set.
• Focus rings use semantic --body-stroke-muted at 1-2 px; visible against #ffffff without an outer glow.
• Geist Mono numerics maintain accessible contrast — never apply opacity reductions below 0.7 to monospace metadata.
• All interactive controls keyboard-reachable; Tab + Enter parity with click on every button + link.

ToDesktop builds on the Geist DS semantic token foundation and re-tailors it to a web-to-desktop platform register. Hero atmospheric background lives as a 1530×1761 PNG light leak (loading=auto). 30 captured images, 0 preloaded fonts at runtime — Inter + Geist Mono ship through next/font hashed bundles.

• CSS variables in `:root` defining `--body-light-{loud,muted,ghost}` + `--body-stroke-{lighter,muted}` + `--body-dark-{loud,muted}` for theme-ready surfaces.
• Tailwind custom breakpoint config: `screens: { sm: '400px', md: '768px', lg: '957px', xl: '1200px', '2xl': '1536px' }`.
• Geist easing as a Tailwind theme extension: `transitionTimingFunction: { geist: 'cubic-bezier(0.6, 0.6, 0, 1)', quart: 'cubic-bezier(0.76, 0, 0.24, 1)' }`.
• Atmospheric gradients live as page-level background layers; never as component-level chrome.

• Default to the light-first canvas (#ffffff + #e5e7eb hairline + #141414 ink) for every surface unless dark mode is explicitly required.
• Use Inter for prose + Geist Mono for numerics and inline code labels.
• Reserve orange (#f79942) for primary CTA + recommendation; blue (#1f6af2) for secondary action + link emphasis.
• Use semantic CSS variables (--body-light-loud / muted / ghost) instead of hardcoded hex in components.
• Anchor every transition with `cubic-bezier(0.6, 0.6, 0, 1)` (Geist) for micro-interactions, `cubic-bezier(0.76, 0, 0.24, 1)` for scroll reveals.

• Don't paint surfaces with the orange or blue accent — accents stay micro-surface (CTA + pivot).
• Don't use Geist Mono for prose — it's a developer-trust signal, not a body typeface.
• Don't substitute a 2px border for emphasis — change color/value instead, keep the 1px discipline.
• Don't introduce a third easing curve — the Geist + Quart pair is the motion fingerprint.
• Don't replace stacked 4-key shadows with a single bloom — the layered approach is the elevation language.

• Two typefaces only (Inter + Geist Mono) — no third family.
• Two-accent palette (#f79942 orange + #1f6af2 blue) — no expansion to a chromatic accent system.
• Container max-width capped at 960 px on the inner content rail.
• Motion duration ladder fixed: 50 / 200 / 300 / 400 / 450 / 600 / 1000 ms — no freehand timings.
• Semantic CSS variable foundation must remain the token source — do not bypass with hex literals in component code.

• Hex grep — #ffffff and #e5e7eb dominate; #f79942 and #1f6af2 appear only on CTA + pivot signals (< 2% surface).
• Font stack inspection — Inter for prose, Geist Mono for numerics + inline code; no third family present.
• Container max-width audit — every inner rail measures ≤ 960 px on desktop screenshots.
• Easing audit — `transition-timing-function` reads `cubic-bezier(0.6, 0.6, 0, 1)` for hover/focus and `cubic-bezier(0.76, 0, 0.24, 1)` for scroll reveals; no third curve.
• Semantic token check — `--body-light-loud`, `--body-light-muted`, `--body-light-ghost`, `--body-stroke-lighter`, `--body-stroke-muted` defined in `:root`.
• Shadow audit — primary cards carry a 4-key stacked drop shadow; accent surfaces add a 2-key inset highlight.