Skip to content

DESIGN.md

Latest commit

 

History

History
90 lines (69 loc) · 4.91 KB

DESIGN.md

File metadata and controls

90 lines (69 loc) · 4.91 KB

Design

Visual system for skillrig.dev. Brand register, committed-amber color strategy, light default with a dark toggle. Tokens are authored in OKLCH (neutrals tinted toward the amber hue); the hex values below are the canonical brand identity from the logo spec and the OKLCH is the implementation form.

Theme

  • Default: light. Scene: a platform engineer evaluating tooling on a laptop in a lit office, mid-workday. The paper/ledger lineage (a system of record) makes light the honest default.
  • Dark: available via a persisted toggle; brightened amber on near-black, both themes meet AA.
  • Strategy: Committed. Amber carries 30–60% of key surfaces (an amber hero band is the dominant move); ink + warm-tinted-paper neutrals everywhere else. Blue is a sparing accent only.
  • Never raw #000/#fff; every neutral is tinted toward the amber hue (chroma ~0.005–0.01).

Colors

Role Hex (brand) OKLCH (impl) Use
amber (primary) #D98A1F oklch(0.685 0.135 66) hero surface, key fills, .dev, CTAs
amber-bright (dark-bg) #E89A2C oklch(0.745 0.135 66) amber on dark theme
amber-deep #B5701A oklch(0.60 0.125 64) amber hover/pressed, borders on amber
ink #15161A oklch(0.205 0.006 70) body text on light, dark-theme surface
ink-soft #3a3d44 oklch(0.36 0.008 70) secondary text on light
paper #FBFAF7 oklch(0.985 0.004 85) light surface, text on dark/amber
paper-dim #f5f2ea oklch(0.965 0.008 85) subtle raised panels on light
line #e7e3da oklch(0.92 0.006 85) hairline borders, rules
dim #8a8579 oklch(0.60 0.01 80) muted/metadata text (verify AA)
blue (accent) #2D6BFF oklch(0.585 0.205 262) sparing accent only (e.g. links in code)

Contrast rules: body copy is ink-on-paper (light) / paper-on-ink (dark). Amber is for large display type, surfaces, and UI chrome, never small text on paper. On the amber hero band, text is ink (#15161A) which clears AA on #D98A1F.

Logo theme variables

The inline SVG mark recolors via CSS custom properties (one SVG, no light/dark duplicates):

Variable Light Dark
--logo-chevron ink #15161A paper #FBFAF7
--logo-diamond amber #D98A1F amber-bright #E89A2C
--logo-branch paper #FBFAF7 ink #15161A

Typography

  • Display (--font-display): Fraunces (600). Used sparingly for the big hero <h1> and a few section heads. Deliberate identity choice carried over from the logo lockup.
  • Body (--font-body): a non-reflex humanist grotesque (candidate: Hanken Grotesk / Host Grotesk; avoid Inter/DM/Jakarta/Geist). Carries paragraphs, sub-heads, UI.
  • Mono (--font-mono): JetBrains Mono. CLI commands, code, lockfile/verify output, short labels.
  • Scale: modular, fluid clamp() for headings, ≥1.25 ratio between steps. Body ≥16px, line-height 1.5; cap measure at 65–75ch. Light-on-dark gets +0.05 line-height.
  • Avoid the editorial fingerprint: no repeated tiny uppercase tracked mono labels above every section, no ruled broadsheet columns. A single strong kicker is fine, not as section grammar.

Layout

  • Asymmetric, left-aligned compositions with varied rhythm; fluid clamp() spacing that breathes on large viewports. Generous separations between sections, tight grouping within.
  • Committed amber hero band as the dominant first fold, then differentiated sections — not a repeated icon+title+text card grid. One dominant idea per fold.
  • Max content width ~1080px; mobile-first, responsive without fixed breakpoints where possible.

Components

  • CTA buttons: solid amber (ink label) primary; outline/ghost secondary. :focus-visible ring.
  • Code / CLI block: ink (or paper-dim) surface, JetBrains Mono, copyable; amber/blue only for meaningful tokens, never decorative gradient.
  • Provenance/verify visual: a crafted card showing a skillrig verify pass with commit + tree SHA + "label honest ✓" — the page's hero imagery.
  • Theme toggle: lucide Sun/Moon icon button, aria-label, visible focus, ≥24px target.

Motion

  • Restrained. Optional single orchestrated page-load with staggered reveals; tech-minimal restraint is acceptable as the voice. Ease-out exponential curves (quart/quint/expo); no bounce/elastic.
  • Never animate layout properties; transition grid-template-rows for any expand/collapse.
  • Wrap all motion in @media (prefers-reduced-motion: reduce) guards.

Iconography

lucide-react, used purposefully (1.5px stroke feel), aria-hidden when decorative beside text. No large rounded-corner icon tile above every heading (template tell).

Bans (carry from impeccable)

No em dashes in copy. No side-stripe border-left colored accents. No background-clip:text gradient text. No default glassmorphism. No identical card grids. No hero-metric template.