design.md

# Design System: Performance Architecture

## 1. Overview & Creative North Star

The Creative North Star for this design system is **“The Kinetic Blueprint.“**

This is not a static interface; it is a high-performance engine for TRIØ. It draws inspiration from technical schematics and brutalist editorial layouts. We reject the „template“ look by favoring intentional asymmetry, aggressive typographic scales, and a depth model that feels like layers of precision-engineered glass and carbon fiber. The goal is to convey speed, technical precision, and an uncompromising „Performance Architecture“ aesthetic.

**Key Design Principles:**

* **Intentional Asymmetry:** Break the grid. Use large, oversized type that bleeds into sections to guide the eye.

* **High-Contrast Friction:** Use the neon `primary` (#D4FF59) against the deep `surface` (#111316) to create visual „heat“ in key interaction areas.

* **Structural Transparency:** Utilize glassmorphism to show the „inner workings“ of the layout, implying depth and architectural layers.

—

## 2. Colors

Our palette is rooted in a high-contrast dark mode, punctuated by a singular, high-visibility neon lime.

### The „No-Line“ Rule

Explicitly prohibited: 1px solid borders for sectioning or container definition. Boundaries must be defined through background color shifts. For example, a `surface-container-low` section sitting on a `surface` background provides all the structural definition needed. Let the pixels breathe; do not cage them in lines.

### Surface Hierarchy & Nesting

Treat the UI as a physical stack of technical materials.

* **Base:** `surface` (#111316) — The ground plane.

* **Lower Tier:** `surface-container-low` (#1A1C1F) — For large, non-interactive section backgrounds.

* **Active Tier:** `surface-container` (#1E2023) — For standard cards and modular blocks.

* **Highest Tier:** `surface-container-highest` (#333538) — For „floating“ elements or active states.

### The „Glass & Gradient“ Rule

To elevate the experience, floating elements (modals, persistent headers, selection chips) must use **Glassmorphism**.

* **Formula:** `surface-variant` at 60% opacity + `backdrop-blur: 24px`.

* **Signature Textures:** Use subtle linear gradients for CTAs, transitioning from `primary_fixed` (#C8F24D) to `secondary_fixed_dim` (#B6D16D) at a 135-degree angle. This provides a „metallic sheen“ that flat colors lack.

—

## 3. Typography

Typography is the primary driver of the TRIØ brand. It should feel aggressive, editorial, and fast.

* **Display & Headlines (Space Grotesk):** Our „voice.“ Used for high-impact statements. Use `italic` weights for „Performance“ keywords to imply motion.

* *Scale:* `display-lg` (3.5rem) should be used sparingly to anchor hero sections, often with negative letter-spacing (-0.02em).

* **Titles & Body (Inter):** Our „intelligence.“ High legibility, neutral, and technical.

* *Hierarchy:* Use `title-lg` for card headers and `body-md` for technical specs.

* **Labels (Inter):** Always uppercase with increased letter-spacing (+0.1em) to mimic blueprint notations.

—

## 4. Elevation & Depth

Depth in this system is achieved through **Tonal Layering**, not shadows.

### The Layering Principle

Hierarchy is established by „stacking“ surface tiers. Place a `surface-container-lowest` card atop a `surface-container-low` section to create a soft, natural lift. This mimics the way light interacts with dark, matte materials.

### Ambient Shadows

Shadows are only permitted on floating „over-the-UI“ elements (e.g., Modals).

* **Spec:** Blur: 40px, Spread: 0, Opacity: 8%, Color: `surface_tint`.

* **The „Ghost Border“ Fallback:** If accessibility requires a container edge, use a „Ghost Border“: `outline-variant` at 15% opacity. Never use 100% opaque borders.

—

## 5. Components

### Buttons

* **Primary:** Rectangular, sharp `DEFAULT` (0.25rem) radius. Background: `primary_container`. Text: `on_primary_container` (Bold Italic).

* **Secondary (Ghost):** No background. Ghost border (15% opacity `outline-variant`). Text: `primary`.

* **Tertiary:** Text-only with a 2px underline of `primary` that extends on hover.

### Cards & Lists

* **Constraint:** Zero divider lines.

* **Structure:** Use vertical whitespace (32px – 64px) or a background shift to `surface-container-low` to separate content.

* **Image Treatment:** Photography must be high-contrast, desaturated, or black-and-white to maintain the „Performance Architecture“ mood, allowing the neon lime accents to pop.

### Input Fields

* **Style:** Minimalist. Only a bottom border (Ghost Border style).

* **Focus State:** The bottom border transitions to 100% `primary` (#D4FF59) with a subtle glow.

### Additional Component: „The Performance Bar“

A thin, persistent progress or data visualization element using a `primary` to `secondary` gradient, used to indicate load states or user progression, reflecting the „engine“ metaphor.

—

## 6. Do’s and Don’ts

### Do:

* **Do** use extreme typographic scale. If a headline is big, make it *huge*.

* **Do** use „///“ (triple slashes) as a decorative motif to end headlines, as seen in the brand profile.

* **Do** allow images to overlap container boundaries to create a sense of movement.

### Don’t:

* **Don’t** use standard „Material Design“ blue or generic shadows.

* **Don’t** use rounded corners larger than `xl` (0.75rem). This system is sharp and architectural.

* **Don’t** clutter the UI. If a piece of information isn’t vital to „the mission,“ remove it. Use the Spacing Scale to create „luxury“ through silence.

* **Don’t** use dividers. If you feel the need for a line, use a gap or a subtle color block instead.

—

*Document end. Reference tokens for all implementation.*