Skip to content

DESIGN.md

Latest commit

 

History

History
63 lines (49 loc) · 2.46 KB

DESIGN.md

File metadata and controls

63 lines (49 loc) · 2.46 KB
Raw

Suede Creator Skills Design System

Register And Scene

Brand register. A builder is evaluating an agent toolkit on a laptop or phone, often in a dark workspace, and needs confidence before running install commands. The interface should feel like a compact release dossier: dark, precise, evidence-led, and easy to scan.

Palette

Role Value Use
Background #080808 Page canvas
Surface #111111 Panels and grouped content
Card #161616 Raised content
Border #222222 Hairlines and separation
Primary text #f0ece4 Headings and essential text
Secondary text #888880 Supporting text that must remain AA-readable
Gold #c8a96e Primary brand accent and action emphasis
Risk red #8b1a1a Failure, risk, and strict grading accents only

Typography

  • System sans stack for dependable loading and a product-native feel.
  • Display headings use heavy weight, -0.03em to -0.04em tracking, and balanced wrapping.
  • Body copy stays between 65 and 75 characters per line with 1.6-1.7 line-height.
  • Monospace is reserved for commands, code, and terminal labels.

Spacing And Shape

  • Four-point spacing foundation exposed as --space-* tokens.
  • Corners remain tight: 2-4px for controls and panels.
  • Gold is used as a decision, not spread evenly across every surface.

Motion

  • Content is visible by default. Motion may translate or soften content into place but must never gate visibility.
  • Use exponential ease-out and provide a reduced-motion path.
  • Marquee and ambient hero motion are decorative and must not carry meaning.

Interaction

  • Primary actions and mobile controls provide at least a 44px target.
  • Every link, button, and summary has a visible gold focus ring.
  • Labels describe state changes, including open/close mobile navigation.
  • Install commands remain selectable and copyable without hiding the raw text.

Components

  • Global navigation and mobile menu.
  • Proof-led hero with terminal install panel.
  • Changelog ship log: timeline ledger of real commits with type-coded spine nodes, commit-activity sparkline, last-shipped freshness pill, and type filter chips. Entries carry real dates and short hashes linking to GitHub; filters and relative time are progressive enhancement.
  • Benchmark tiles and disclosed scorecard.
  • Skill catalog lanes and rows.
  • Install terminals and alternative install paths.
  • Evidence panels, FAQ disclosures, and footer identity.