Skip to content

System_Design.md

Latest commit

 

History

History
108 lines (80 loc) · 4.83 KB

System_Design.md

File metadata and controls

108 lines (80 loc) · 4.83 KB

System Design

Quick reference for the design system used by reverse-api-website.

Core Colors

These are the canonical color tokens defined in website/src/app/global.css.

Token Light Dark Usage
--color-ink #1f1f1f #fff7f0 Primary text, dark surfaces, strong borders
--color-ink-soft #1f1f1fcc #fff7f0bb Secondary text
--color-cream #fff7f0 #14110e Main background
--color-cream-soft #fef8ee #1c1814 Slightly raised surfaces
--color-orange #ffe7d4 #3a1d0e Warm secondary section color
--color-sky #d6efff #0d1b2e CTA section color
--color-mint #d5f1de #0e2419 Positive accent / completed state
--color-washed #f5f2ee #1a1612 Washed neutral background

Functional Colors

Tokens used by Fumadocs and shared components.

Token Light Dark Usage
--color-fd-background #fff7f0 #14110e App background
--color-fd-foreground #1f1f1f #fff7f0 App foreground text
--color-fd-primary #e50d75 #ff3d8b Pink accent, asterisk, links, CTA shadows
--color-fd-primary-foreground #fff7f0 #14110e Text on primary accent
--color-fd-ring #e50d75 #ff3d8b Focus ring
--color-fd-accent #ffe1eb #2a1a22 Soft accent
--color-fd-accent-foreground #1f1f1f #fff7f0 Text on accent
--color-fd-card #ffffff #1c1814 Cards
--color-fd-card-foreground #1f1f1f #fff7f0 Text on cards
--color-fd-muted #f5f2ee #1a1612 Muted backgrounds
--color-fd-muted-foreground #1f1f1f99 #fff7f0aa Muted text
--color-fd-border #1f1f1f1a #fff7f014 Subtle borders

Backgrounds And Gradients

Utilities defined in global.css.

  • bg-color-mesh light: #fec5d4, #fff0e1, #ffd9c2, #fde0d3, then --color-cream.
  • bg-color-mesh dark: #3a1822, #2a1f15, #2d1810, #281410, then --color-cream.
  • bg-pastel-radial light: #c3f2d0, #b7ebff, #fee3cc.
  • bg-pastel-radial dark: #1a2a22, #0d1b2e, #2a1810.
  • bg-grid, bg-engineering, bg-dots, bg-scanlines: patterns based on color-mix(... var(--color-ink) ... transparent).

Visible Hardcoded Colors

Some components still use inline colors, mostly lab variants and a few visual blocks.

  • Home / current CTA: #0d0a07, #14110e, #1f1f1f, #e50d75, plus several rgba(255,247,240,...) and rgba(0,0,0,...) opacity values.
  • Footer: #0d0a07, rgba(229,13,117,0.28), rgba(136,93,197,0.18), rgba(255,247,240,...).
  • App icon: #e50d75.
  • Lab / non-canonical variants: #0073e6, #080808, #0e0e0e, #1a1a1a, #2a2a2a, #6030b0, #885dc5, #a00060, #c00080, #c00a74, #c20000, #f0e8d4, #f5eedc, #f7f3ee, #faf8f4, #fff, #fffef9, #060504, #0a0806, #0d0907, #0e0c0a, #10100c, #131109, #1e1409.

Fonts

Fonts are loaded in website/src/app/layout.tsx via next/font/google.

Token Font Fallback Usage
--font-sans Inter ui-sans-serif, system-ui, sans-serif Body text, layout, buttons
--font-display Fraunces ui-serif, Georgia, Times New Roman, serif rae logo, headlines, asterisk, editorial accents
--font-mono JetBrains Mono SF Mono, Menlo, Monaco, Consolas, monospace Code, labels, eyebrows, numbers

Frequently used Fraunces settings:

  • opsz: 144
  • SOFT: often 30, 40, 50, or 100
  • WONK: 0 or 1
  • Italic is used for headlines and the brand asterisk.

Icons

Brand Icon

  • Asterisk * set in italic Fraunces.
  • Used in the header logo, hero/CTA decorations, marquee, and website/src/app/icon.tsx.
  • Main color: --color-fd-primary (#e50d75 in light mode, #ff3d8b in dark mode).
  • The app icon loads only the * glyph from Fraunces.

Custom SVG Icons

  • GithubIcon: inline SVG in site-nav.tsx and page.tsx.
  • Color: currentColor, inherited from text classes such as text-ink-soft and hover:text-ink.

Lucide Icons

Library: lucide-react.

  • ArrowRightIcon: CTA buttons, “Read the docs”, “Get started”, error pages.
  • SunIcon: light theme switcher.
  • MoonIcon: dark theme switcher.
  • RotateCcwIcon: error page.
  • CopyIcon: InstallCommand component.
  • CheckIcon: InstallCommand component.
  • MenuIcon: header variants in components/lab.

Recurring Shapes And Patterns

  • Buttons: 0.5rem radius, pink offset shadow for primary buttons.
  • Hero / landing cards: 1.5rem radius, ink/10 border, soft shadow.
  • Tiles: 1.25rem radius.
  • Docs media: 0.75rem radius.
  • Header: glass background with backdrop-blur-xl, backdrop-saturate-150, and color-mix(... --color-cream ... transparent).
  • Decorations: Fraunces asterisks, scanlines, grids, dots, pastel mesh.