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 displayh2/p: DenimWeb, ~9px, weight 440, uppercase — microscopic labelsbody/a: DenimWeb, 16px, weight 400button: 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) withss03feature, micro labels at 9px, sharp edges throughout, vivid orange-redrgb(255,57,30)for active states and footer only, no shadows, animation-forward.”
Generated by Sparkbites — extracted from live CSS analysis
