84b9987c49
Brings the working codebase (Next.js app, auth system, Stripe billing, Docker/deploy config, tests, docs) into version control on top of the placeholder initial commit, and adds account self-deletion (Danger Zone in Settings, password + typed-email confirmation, cascading DB cleanup, Stripe cancellation) per GDPR right-to-erasure. Excludes local build caches, node_modules, and internal agent scratch files; .gitignore hardened to keep those out going forward. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
7.1 KiB
name, colors, typography, spacing
| name | colors | typography | spacing | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Zenith Silver |
|
|
|
Brand & Style
The design system embodies a premium, gallery-like aesthetic that prioritizes clarity, structural integrity, and negative space. The brand personality is "Architectural Minimalist"—sophisticated, cold, and intentional. It is designed for high-end SaaS, luxury editorial, or architectural portfolios where the content is elevated by a rigorous, unadorned framework.
The style is a fusion of Modern Minimalism and Swiss International Style. It avoids decorative flourishes like gradients or organic shapes, instead relying on strict alignment, razor-sharp edges, and a monochromatic palette to evoke an atmosphere of precision and quiet luxury.
Colors
The palette is rooted in a monochromatic "Zenith Silver" foundation.
- Primary (#F5F7F9): The "Zenith Silver" base. Used for large surface areas and page backgrounds to create an airy, expansive feel.
- Secondary (#000000): Pure black. Used exclusively for typography and structural strokes to provide aggressive contrast against the silver base.
- Tertiary (#475569): Slate Blue-Grey. Used for subtle accents, secondary actions, and metadata to soften the binary contrast of black and silver where necessary.
- Neutral (#E2E8F0): A mid-tone silver used for borders, dividers, and disabled states.
Do not use gradients. Transparency should only be used for overlays, maintaining a solid color logic elsewhere.
Typography
Typography is the primary driver of the visual hierarchy. This design system utilizes a trio of fonts to delineate roles:
- Hanken Grotesk is used for headlines. It should be set with tight tracking in larger sizes to create a "locked" architectural feel.
- Inter provides high legibility for body copy and long-form text, maintaining a neutral, professional tone.
- JetBrains Mono is used for labels, captions, and technical data. It introduces a subtle "precision" layer reminiscent of blueprints and architectural annotations.
All labels should default to uppercase when using the label-caps role to reinforce the structured, gallery aesthetic.
Layout & Spacing
The layout follows a Fixed Grid philosophy for desktop to maintain a "frame" around the content, and a fluid 4-column system for mobile.
- Desktop (1440px+): 12-column grid with a 1200px max-width container, 24px gutters, and 64px outer margins.
- Tablet (768px - 1439px): 8-column grid with 24px gutters and 32px margins.
- Mobile (Up to 767px): 4-column fluid grid with 16px gutters and 16px margins.
Spacing follows a strict 4px base unit. Use large vertical stacks (stack-xl) between major sections to emphasize the "Airy" nature of the brand. Alignment should be rigorous; elements should always snap to the grid lines, never floating arbitrarily.
Elevation & Depth
This design system rejects traditional shadows and depth. It uses Low-contrast Outlines and Tonal Layering to create hierarchy.
- Level 0 (Background): Zenith Silver (#F5F7F9).
- Level 1 (Cards/Containers): White (#FFFFFF) with a 1px solid border in Neutral (#E2E8F0).
- Interactive States: On hover, elements do not lift; they shift color (e.g., a button fill turns from Black to Slate Blue-Grey) or thickness (a border moves from 1px to 2px).
Depth is implied through overlapping planes and high-contrast typography rather than lighting effects.
Shapes
The shape language is strictly Sharp. All UI elements—including buttons, input fields, and cards—must have a 0px radius. This reinforces the architectural and precision-engineered feel of the system.
Photography should be treated as "windows" within the grid, always rectangular and never cropped with rounded corners.
Components
- Buttons: Solid #000000 background with #FFFFFF text for primary actions. 1px solid #000000 border with no fill for secondary. All buttons are rectangular with no padding-inline under 24px.
- Input Fields: 1px solid #E2E8F0 bottom-border only (minimalist style) or full 1px border. Use
label-capsfor field labels placed strictly above the input. - Cards: White backgrounds with 1px borders in #E2E8F0. No shadows. Content within cards should follow the 24px internal padding rule.
- Chips/Tags: Using
label-mdtypography, these are small rectangular boxes with #F5F7F9 fills and no borders. - Lists: Separated by 1px horizontal dividers in #E2E8F0. No bullets; use JetBrains Mono numbers (01, 02, 03) for ordered lists.
- Photography Placeholders: Use large-scale imagery with desaturated or high-contrast treatments. Images should span multiple columns to act as structural anchors for the text.