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 trackingbody/p/a/textarea: Geist Mono Variable, 14px, weight 300input: 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 textrgb(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
