ssych ui

Overview

ssych ui is a dark-mode-first component registry engineered for mission-critical, data-dense interfaces where precision and reliability are non-negotiable. The brand serves high-stakes product teams building dashboards, trading floors, monitoring consoles, and analytics platforms—environments where a single misread value or delayed interaction can have material consequences. The aesthetic is 'Austere Technical Precision': a near-black canvas (#090909) paired with surgical accent colors (bright white CTAs, electric blue secondary actions at #5aaaff, and accent greens at #34c28a) that cut through the darkness with absolute clarity. The UI evokes the feeling of a professional control room—calm, focused, unadorned, and utterly trustworthy.

The brand voice is direct, confident, and unambiguous. Vocabulary favors specificity over marketing flourish: 'copy-paste React' instead of 'seamless integration', 'SVG-only charts' instead of 'lightweight visualizations', 'every file is yours after install' instead of 'full ownership'. The tone assumes the user is a senior engineer or product lead who has no patience for hype and every reason to be skeptical. Example sentence in brand voice: 'Every chart is SVG-only, every colour is a token, and every file is yours after install—no runtime bloat, no vendor lock-in.'

Colors

The color system is built on a near-black foundation (#090909 surface, #0b0b0b surface-container-lowest) that maximizes contrast and reduces eye strain during extended data-analysis sessions. This is not a neutral dark mode—it is a deliberate choice to create visual authority and reduce cognitive load in high-pressure environments.

Primary (#ffffff) is the call-to-action white used on 'Get started' buttons and critical interactive elements. Its high contrast against the dark background (21:1 WCAG AAA) ensures it commands attention without shouting. Secondary (#5aaaff, a vivid electric blue from the --color-accent-500 token) is reserved for secondary actions, links, and data highlights—it provides visual hierarchy without competing with primary. Tertiary (#34c28a, a surgical green) is used

Typography

The type system uses Sora (a geometric, humanist sans-serif) exclusively, avoiding system fonts to maintain brand consistency across platforms. Display (64px, 500 weight, -0.02em tracking) is reserved for hero headlines and major section titles; it reads as confident and authoritative without excess weight. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) establish visual hierarchy for subsections and card titles. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) are the workhorses for descriptive copy and data labels—the 24px line-height on body-md ensures readability even when text is rendered at small sizes over complex backgrounds. Label-md (14px, 500 weight, 0.01em tracking) and label-sm (12px, 500 weight, 0.02em tracking) a

Layout

The layout uses a 12-column grid with a max-width of 1280px, allowing for flexible content arrangement from mobile (single column) to desktop (multi-column dashboards). The gutter is consistently 24px (md spacing), creating breathing room between sections without introducing excessive whitespace. Container max-widths vary by section (930px, 880px, 860px observed) to accommodate different content types—wider for data tables, narrower for narrative copy. White-space philosophy is 'minimal but intentional': the dark background provides visual weight, so spacing is used sparingly to separate concerns rather than to fill the page. Section separation uses lg spacing (40px) for major breaks and md spacing (24px) for subsections. Cards and containers use md padding (24px) internally, with sm paddi

Elevation & Depth

Depth is conveyed through a combination of inset shadows (for subtle surface definition) and border treatments (for clear layer separation). Level 1 (Base surface) has no shadow—it is the canvas itself (#090909). Level 2 (Standard card) uses a 1px solid border at rgba(255, 255, 255, 0.1) inset, paired with an inset shadow of 0 0 50px 0 rgba(255, 255, 255, 0.02) to create a barely-perceptible inner glow. Level 3 (Elevated card or modal) thickens the border to 2px and increases the inset shadow opacity to rgba(255, 255, 255, 0.04). Hover states transition the background-color from surface-contai

Shapes

The shape philosophy is 'Surgical Minimalism': border-radius values are chosen to feel precise and intentional, never organic or playful. Buttons and inputs use DEFAULT (8px) for a subtle softness that reads as 'refined' rather than 'rounded'. Cards and elevated containers use lg (20px) to create visual separation from the background without appearing bubbly. Modals and full-width overlays use xl (32px) for a more pronounced corner treatment that signals 'important content'. Icon buttons and circular elements use full (9999px) for perfect circles. The reasoning: 8px is the minimum radius that

Components

Action Elements Buttons are the primary interaction surface and must command attention without distraction. The primary button (button-primary) uses white (#ffffff) background with black text (#000000), 12px vertical / 20px horizontal padding, 8px border-radius, and a 44px minimum height. It includes an inset shadow (0 0 50px 0 rgba(255, 255, 255, 0.02)) and a 1px inset border (rgba(255, 255, 255, 0.1)) to create subtle depth. On hover (button-primary-hover), the background transitions to primary-fixed-dim (#c8c8c8) over 200ms ease-out, signaling interactivity without jarring the user. The secondary button (button-secondary) uses a transparent background with a 1px outline-variant border (#3b3b3b) and on-surface-variant text (#a3a3a3). On hover, it fills with surface-container-high (#1

Do's and Don'ts

**Do**

• Do use white (#ffffff) for primary CTAs and critical interactive elements—it has 21:1 contrast against the dark background and commands attention without aggression.
• Do apply the inset shadow (0 0 50px 0 rgba(255, 255, 255, 0.02)) and 1px inset border (rgba(255, 255, 255, 0.1)) to all elevated surfaces to create subtle depth without visual clutter.
• Do transition all interactive state changes (hover, focus, active) over 200ms ease-out to provide tactile feedback without animation bloat.
• Do use the surface-container stack (8 levels from #0b0b0b to #242424) to create clear visual hierarchy in nested layouts—never skip levels or introduce arbitrary grays.
• Do reserve secondary (#5aaaff) for secondary actions, links, and data highlights—it is the only accent color that should appear frequently in the UI.

**Don't**

• Don't use rounded corners smaller than 8px or larger than 32px—hard corners feel broken, and radii larger than 32px read as whimsical and undermine the austere brand.
• Don't apply shadows (box-shadow: 0 X Y Z) to surfaces—use inset shadows and borders instead to maintain the flat, technical aesthetic.
• Don't introduce new accent colors beyond primary (#ffffff), secondary (#5aaaff), tertiary (#34c28a), and error (#e06a6a)—the color palette is intentionally constrained to reduce cognitive load.
• Don't animate transitions longer than 200ms or use easing functions other than ease-out—the brand favors snappy, responsive interactions over ornamental motion.
• Don't use system fonts or fallback sans-serifs—always specify Sora to maintain brand consistency and the geometric, humanist character that defines the visual identity.