Design System

Purpose

The binding visual language for everything SellVia builds — this doc summarizes design.md; design.md itself remains the detailed source, not duplicated in full here.

Philosophy

Feel like a serious early-stage product, not a marketing campaign. Reference points: HackerRank, Paddle Docs, Linear, Vercel — confident, clear, product-first. Explicitly avoid: gradients, glassmorphism, glow effects, animated blobs, generic SaaS screenshots, buzzword sections.

Color

Background: #000000 (black) — page, hero, nav, footer
Accent: #BFFF13 (lime) — used sparingly: primary CTA, small highlights, active/focus states only. Never large color blocks or green backgrounds behind content.
Text: White (#FFFFFF) primary, Gray 01 (#A1A1AA) secondary, Gray 02 (#787882) muted
Borders: #27272A default, #3F3F46 hover

Update (2026-08-23): Gray 02 Corrected for WCAG AA — RESOLVED

Gray 02 changed from #71717A to #787882. Actual contrast verification (see UX/Accessibility) found the original value — Tailwind's zinc-500 — measured 4.35:1 against black, failing the 4.5:1 AA minimum for body text by a small margin. #787882 keeps the same hue/blue-gray tint and measures 4.82:1, comfortably compliant. Lime and Gray 01 were also verified and need no change — see Accessibility doc for full numbers.

Typography

Outfit — headlines, hero copy, nav, CTA buttons, section titles
Figtree — paragraphs, labels, form fields, cards, metadata

Layout

Max container width 1280px, content width 1200px, readable text 640–720px
Section padding: 120px top/bottom (hero: 160px top, 120px bottom)
Whitespace is a deliberate design element, not empty space to fill

Shadows & Radius

Avoid shadows almost entirely; borders instead of elevation
Small border radius: buttons 10px, cards 12px, inputs 10px, never exceeding 16px

Animation

Very restrained: fade-ins, opacity transitions, border-color transitions, 2–4px subtle movement only. No parallax, no floating effects, no infinite motion.

Full Detail

See design.md for the complete specification (hero structure, navigation, card patterns, CTA styling, grid system) — this doc is a working summary, not a replacement.