# spektralstudio.com — Design System

## 1. Visual Theme & Atmosphere

Spektral Studio inhabits a world of deep digital night. The background is a near-black navy (`rgb(20,20,26)`) — not a cold pure black but a dark with a subtle blue-purple undertone that gives it warmth and depth. Against this, warm parchment text (`rgb(227,223,210)`) creates a sophisticated, almost cinematic contrast. The dual typeface system — bold uppercase Space Grotesk for display, Geist Mono variable for body — signals a studio at the intersection of technical craft and visual identity. Built with Webflow and GSAP, the site feels like it moves with intentional weight.

## 2. Color Palette & Roles

| Role | Value | Usage |
|---|---|---|
| Background | `rgb(20,20,26)` | Page canvas — dark navy-black |
| Input surface | `rgb(29,29,39)` | Form fields — slightly lighter dark |
| Divider | `rgb(62,62,70)` | Section dividers, subtle borders |
| Body text | `rgb(168,168,168)` | Secondary text — cool midtone gray |
| Heading text | `rgb(227,223,210)` | Warm parchment — primary foreground |
| Focus blue | `rgb(56,152,236)` | Interactive focus ring and accent |
| Submit button | `rgb(227,223,210)` bg / `rgb(20,20,26)` text | Parchment-on-dark CTA |
| Page overlay | `rgba(20,20,26,0.9)` | Transition and overlay layer |

Blue appears only as an interactive signal — a precise moment of clarity in an otherwise warm-dark world.

## 3. Typography Rules

A deliberately split system: headers live in **Space Grotesk Bold** (700), body lives in **Geist Mono Variable** (weight 300 — light).

- `h1/h2`: Space Grotesk, 32px, weight 700, uppercase, −0.96px tracking
- `body/p/a/textarea`: Geist Mono Variable, 14px, weight 300
- `input`: Geist Mono Variable, 13px, weight 300

The uppercase bold headers contrast dramatically with the light monospaced body — a high-contrast typographic pairing that feels technical but intentional.

## 4. Component Stylings

Form inputs use dark backgrounds `rgb(29,29,39)` with parchment text and a bottom-border-only approach (`borderColor` shows bottom only). On hover, the bottom border lifts to a mid-gray `rgb(104,107,124)`. On focus, it shifts to the electric blue `rgb(56,152,236)`. No border radius — sharp, technical form fields. The submit button inverts: parchment background, dark text.

## 5. Layout Principles

Sections use `0px` gap and padding — tight, edge-to-edge compositions. The preloader and page-transition layers (full-screen) suggest sophisticated entrance animations. No grid dimensions captured — likely a centered single-column or asymmetric layout.

## 6. Depth & Elevation

No shadows. Depth is created through transparency: `rgba(20,20,26,0.9)` for the overlay, a near-full-opacity dark that still hints at content beneath. The layered dark surfaces (20,20,26 → 29,29,39 → 62,62,70) create three tiers of depth through lightness alone.

## 7. Do's and Don'ts

**Do:** Keep all text in warm parchment or mid-gray. Use Space Grotesk exclusively for display text, uppercase and bold. Use Geist Mono at weight 300 for all body content. Reserve blue only for interactive states.

**Don't:** Add bright colors — the blue accent exists only for focus/interaction. Don't mix weight variations in body text; light mono is the entire body personality. Don't add rounded corners.

## 8. Responsive Behavior

Webflow breakpoints: 479, 480, 768, 990, 1280, 1440, 1600. A comprehensive 7-tier system suggesting fine-grained responsive control from mobile portrait through ultrawide.

## 9. Agent Prompt Guide

> "Design in the style of spektralstudio.com: dark navy-black background `rgb(20,20,26)`, warm parchment text `rgb(227,223,210)`, Space Grotesk bold uppercase for headings, Geist Mono light for body text, electric blue focus ring, form fields with bottom-border only, no shadows, GSAP-ready transitions."

*Generated by Sparkbites — extracted from live CSS analysis*