Swiss Minimalist Design System
Architectural Rigor + Organic Warmth + Silent Motion. Built for Next.js 16, Tailwind CSS v4, and WCAG 2.2 AAA accessibility. Grounded in the International Typographic Style with tactile physical materiality.
Architectural Rigor
4px baseline rhythm, strict 12-column geometry, and negative display tracking (-0.02em) ensure density, optical order, and uncompromised hierarchy.
Organic Warmth
Sand canvas (#fcf9f5) evoking natural cotton paper paired with burnt terracotta clay and 1px tactile borders. Replaces sterile neon gradients.
Silent Motion
Asymmetric 150ms-250ms ease-out transitions. Exits are 75% faster than entrances. Elastic bounces, flashing springs, and gratuitous motion are banned.
Color Palette & The Dark Viewport Contrast Lab
Click any color swatch below to copy its hex value directly to your clipboard.
1. Core Palette Anchors
2. Sand Canvas Elevation Hierarchy (Tonal Stepping)
The Dark Viewport Rule: #fe9972 vs #974727
Base Terracotta (#974727) has only a 3.20:1 contrast ratio against dark Charcoal (#181b19), failing WCAG AA (4.5:1 required). We enforce Light Terracotta / Coral (#fe9972), achieving a pristine 9.82:1 AAA rating.
| Foreground Token | Background | Ratio | WCAG AA | WCAG AAA | Rule Status |
|---|---|---|---|---|---|
| Base Terracotta (#974727) | Charcoal | 3.20 : 1 | FAIL | FAIL | ❌ PROHIBITED |
| Light Terracotta (Coral) (#fe9972) | Charcoal | 9.82 : 1 | PASS | PASS | ✅ MANDATORY |
| Charcoal Ink (#181b19) | Sand Canvas | 14.21 : 1 | PASS | PASS | ✅ MANDATORY |
| Base Terracotta (#974727) | Sand Canvas | 4.91 : 1 | PASS | PASS (Large) | ✅ PERMITTED |
| Pure White (#ffffff) | Charcoal | 16.48 : 1 | PASS | PASS | ✅ MANDATORY |
Typography & Optical Rhythm
Paired Grotesk warmth with monospace technical clarity. Headings 24px and larger enforce negative optical tracking (-0.02em) to eliminate loose spacing.
Craft as the Feature: Architectural Rigor & Organic Warmth
Craft as the Feature: Architectural Rigor & Organic Warmth
Craft as the Feature: Architectural Rigor & Organic Warmth
Craft as the Feature: Architectural Rigor & Organic Warmth
Craft as the Feature: Architectural Rigor & Organic Warmth
Craft as the Feature: Architectural Rigor & Organic Warmth
Craft as the Feature: Architectural Rigor & Organic Warmth
4px Baseline Rhythm & Varied Radii Hierarchy
All spatial dimensions lock to multiples of 4px. Border radii scale proportionally so outer containers remain larger than nested controls.
Interactive 4px Baseline Rhythm Step Selector
Current: 16px (p-4 / gap-4)p-4 / gap-4Varied Radii Hierarchy (Concentric Nesting)
Main studio viewport enclosures and drawer shells
Case study preview cards, sub-panels, and dialogs
Action buttons, form text inputs, select wells
Keyboard shortcuts, tags, and small badges
Phase chips, deliverable status tags, live dots
Interactive Component Playground
Test live component states: tactile click counters, simulated loading triggers, error inputs, status chips, and elevation cards.
Buttons & State Controls
Clicks: 0rounded-md (12px), min touch height 40px, active scale 0.98.Status Chips & Phase Tags (No // Slop)
Zero Code Delimitersrole.split(' ')[0].Form Controls & Accessible Validation
WCAG 2.2 CompliantValid recipient. Ready for RFC-compliant transmission.
--color-error (#ba1a1a) with accessible assistive text.Surface Elevation & Tactile Depth
Zero Blurry ShadowsThe Executive Studio Viewport Pattern
The focal centerpiece of the portfolio. Enforces dark Charcoal (#181b19), top-right Terracotta rim lighting, 16px dot matrix backdrop, Swiss corner ticks, glassmorphism dock header, and #fe9972 AAA contrast accents.
items-stretch + flex-1 flex-col justify-betweenSilent Motion & Micro-Interactions Lab
Micro-motion exists solely to reinforce user agency and spatial context. Entrances: 150-250ms ease-out. Exits: 100-150ms ease-in (~75% faster).
1. Tactile Modal Dialog (150ms-250ms Ease-Out)
Smooth arrival with background blur, instant crisp exit, and zero spring wobbles.
2. Slide-Over Spec Drawer
Slides smoothly from the right viewport margin for auxiliary inspection without losing main context.
Instantly clamps transition-duration and animation-duration to 0ms for accessibility compliance.
Editorial Rules & Anti-AI-Slop Rubric
Strictly authoring technical specifications in ASD-STE100 and user-facing copy in CEFR A2 English. Artificial robotic tropes, code delimiters (//), and generic hype words are permanently banned.
| Generic AI Slop (Banned) | Swiss Precision (Production Standard) | Engineering Rationale |
|---|---|---|
| 01 // INTENT & SCOPE | Stage 1: Intent & Scope | Zero code delimiters (//). Delimiters create robotic visual noise rather than clean human structure. |
| STAGE 2 // ARCHITECTURE | Stage 2: Architecture & Specs | Eliminates fake sci-fi HUD tropes. Natural Title Case improves optical clarity. |
| Independent Reviewer Veto Power | Strict Quality Gate: Merges are blocked if any tests fail | Replaces dystopian AI jargon with plain, direct operational facts. |
| Leveraging SOTA paradigms to unlock synergy | Building with verified web standards and deterministic tests | Strips generic tech-bro buzzwords. ASD-STE100 mandates clear, verifiable verbs. |
| Seamless and effortless experience | Single-screen navigation with sub-cent loan amortization math | Replaces hollow superlatives with concrete domain engineering proof. |
| Delve into our cutting-edge AI stack | Inspect our multi-agent orchestrator code and test logs | "Delve" is a dead giveaway for generic AI prose. Use active engineering verbs. |
| role.split(" ")[0] (Dynamic pill clipping) | phaseTag: "Architecture" (Explicit structured metadata) | Runtime string slicing creates fragile UI states; structured metadata guarantees clean rendering. |