# thelinestudio.com — Design System

## 1. Visual Theme & Atmosphere

The Line Studio is an animation studio whose website is itself an animated statement. The background is a cool light gray (`rgb(221,222,226)`) — not white, not neutral, but a blue-tinged silver that feels cinematic and studio-grade. The hero deploys **DenimWeb** at a staggering 155px — almost purely graphic, where letterforms become visual architecture. Two shades of vivid red interrupt the cool gray world: one as a hero layer element, one as the sticky footer. These reds feel intentional and editorial — a brand signature, not decoration. Built in Nuxt, the site is a showcase of motion capability.

## 2. Color Palette & Roles

| Role | Value | Usage |
|---|---|---|
| Canvas | `rgb(221,222,226)` | Cool silver-gray page background |
| Near-white | `rgb(248,248,248)` | Intro section — slightly warmer |
| Feature panel | `rgba(222,223,227,0.95)` | Featured work asset backgrounds |
| Header text | `rgb(248,248,248)` | Nav links — near-white on overlay |
| Body/main text | `rgb(11,11,11)` | Near-black foreground |
| Active link | `rgb(255,57,30)` | Orange-red active navigation state |
| Hero layer | `rgb(255,0,0)` | Pure red hero layer element |
| Footer | `rgb(255,57,30)` | Sticky footer — brand red |
| Scrollbar | `rgb(11,11,11)` | Custom scrollbar handle |

The red appears in two places only — active nav state and the footer — creating a bookend effect.

## 3. Typography Rules

**DenimWeb** exclusively throughout — a contemporary geometric typeface with strong optical styling enabled via `"ss03"` font feature:

- `h1/h3`: DenimWeb, 155px, weight 500, −6.22px tracking — monumental, graphic-scale display
- `h2/p`: DenimWeb, ~9px, weight 440, uppercase — microscopic labels
- `body/a`: DenimWeb, 16px, weight 400
- `button`: DenimWeb, 13px, weight 400

The extreme scale contrast (155px vs. 9px) is the typographic design statement — macro and micro coexisting without middle ground. The `"ss03"` stylistic set is consistently applied, suggesting alternate letterform variants.

## 4. Component Stylings

No border radii detected — everything is sharp-edged. No shadows. The only interactive styling is the active link becoming `rgb(255,57,30)`. Header has a `5.9px` padding and gap — extremely tight, likely a horizontal strip nav. Footer uses `343px` bottom padding — massive, suggesting a large footer zone for content.

## 5. Layout Principles

Nuxt with 6 breakpoints: 767, 768, 1023, 1024, 1240, 1600. Three tiers: mobile, tablet, desktop, wide. The layout likely uses viewport-relative units (`vw`) for the massive display typography — at 155px the sizing almost requires it.

## 6. Depth & Elevation

No shadows. Depth through surface luminance: near-white intro (`0.973`) → cool gray canvas (`0.871`) → dark footer red (`0.444`) → near-black scrollbar (`0.043`). The `rgba(222,223,227,0.95)` panel at 0.875 creates a frosted-glass-adjacent effect with near-opaque transparency.

## 7. Do's and Don'ts

**Do:** Use DenimWeb at extreme scale for hero/display. Apply the `"ss03"` font feature universally. Let the cool gray canvas breathe — don't fill it with color. Use red only for the brand moments (active nav, footer).

**Don't:** Add intermediate heading sizes — the macro/micro contrast is the system. Don't add border radius — sharp edges are essential. Don't soften the red with transparency.

## 8. Responsive Behavior

Six breakpoints with clean tablet and desktop tiers. The 155px display type likely scales with `clamp()` or viewport units to remain proportional at mobile sizes.

## 9. Agent Prompt Guide

> "Design in the style of thelinestudio.com: cool silver-gray `rgb(221,222,226)` canvas, DenimWeb typeface at extreme scale (155px) with `ss03` feature, micro labels at 9px, sharp edges throughout, vivid orange-red `rgb(255,57,30)` for active states and footer only, no shadows, animation-forward."

*Generated by Sparkbites — extracted from live CSS analysis*