# molly.studio — Design System

## 1. Visual Theme & Atmosphere

Molly Studio is a **Webflow-powered creative studio** where warm orange (#fd9527) does all the expressive lifting against a cool white-and-gray neutral system. GSAP animations underpin the interactivity, suggesting motion is a core design value — not an afterthought. The token vocabulary is unusually complete for a studio site: named surface colors, a translucent alpha-background, three tiers of gray text, and a custom spring easing function signal a design system built with intention. The feeling is warm, professional, and kinetically alive.

## 2. Color Palette & Roles

| Role | Value | Usage |
|------|-------|-------|
| Background | `#ffffff` | Page canvas |
| Off-White | `#F3F3F3` | Alternate section backgrounds |
| Brand Orange | `#fd9527` | Buttons, highlights, accents |
| Text Primary | `#333333` | Headings, body copy |
| Text Secondary | `#666666` | Secondary labels, captions |
| Text Tertiary | `#999999` | Muted metadata |
| Surface | `#eeeeee` | Code blocks, inset panels |
| Border | `#dddddd` | All structural dividers |
| Alpha Background | `rgba(255,255,255,0.75)` | Frosted sticky header |
| Black | `#000000` | High-contrast elements |
| Off-Black | `#111111` / `#222222` | Dark surfaces |

Orange is the only warm tone. Everything else is a cool neutral, making the brand pop without competing tones.

## 3. Typography Rules

- **Font family**: Rubik — geometric sans-serif; approachable and versatile across all weights
- **H1**: 16px / 25.6px, weight 600, UPPERCASE, letter-spacing -0.5px — compact logo-scale labels
- **H2**: 16px / 16px, weight 500, UPPERCASE, letter-spacing -0.5px — matching header visual rhythm
- **Body**: 16px / 25.6px, weight 400 — readable prose at comfortable density
- **P / small**: 14px / 22.4px, weight 400 — supporting copy
- **Code blocks**: Likely monospace via surface token (#eee background)

| Level | Size | Weight | Transform | Letter Spacing |
|-------|------|--------|-----------|----------------|
| H1 | 16px | 600 | UPPERCASE | -0.5px |
| H2 | 16px | 500 | UPPERCASE | -0.5px |
| Body | 16px | 400 | none | normal |
| P | 14px | 400 | none | normal |

## 4. Component Stylings

- **Buttons**: Orange (#fd9527) fill, white text — the primary CTA color in the system
- **Sticky header**: `rgba(255,255,255,0.75)` alpha background — frosted glass on scroll
- **Code blocks**: `#eeeeee` surface background, IBM Plex Mono or similar
- **Cards**: White with `#dddddd` border — clean definition without shadow
- **Spring easing**: Custom spring function drives GSAP animations — natural, physics-based motion
- **Border radius**: Tailwind defaults (likely 4–8px for standard components)

## 5. Layout Principles

- **Stack**: Webflow + GSAP — visual CMS layout with animation layer
- **Breakpoints**: 752 / 1145 / 1512px — three-tier responsive ladder
- **Spacing tokens**: `--spacing-8`, `--spacing-16`, `--spacing-24`, `--spacing-32`, `--spacing-48`, `--spacing-64`
- **Grid**: Webflow's 12-column grid system with responsive column collapses
- **Motion**: GSAP with spring easing for entrance and interactive animations

## 6. Depth & Elevation

- **Alpha header**: `rgba(255,255,255,0.75)` sticky nav — soft frosted elevation on scroll
- **Surface tones**: #eee panels create slight depth against white without shadows
- **Borders**: #ddd defines boundaries in place of shadows
- Minimal box shadow use — flatness preserved outside the sticky header

## 7. Do's and Don'ts

**Do:**
- Use orange exclusively for interactive CTAs and brand anchors
- Apply the three-tier gray text scale (#333 / #666 / #999) consistently
- Animate with the custom spring easing — GSAP is a core design material here
- Use #eeeeee for inset/code surfaces rather than borders alone

**Don't:**
- Mix warm colors beyond orange — no yellows, reds, or pinks
- Use heavy drop shadows — the border system does the structural work
- Override Rubik weight above 600 — the system uses 400–600 only

## 8. Responsive Behavior

- Three-tier breakpoints: 752px (tablet), 1145px (desktop), 1512px (large)
- Sticky frosted header persists across all breakpoints
- GSAP animations may be reduced on mobile for performance
- Webflow grid collapses to single-column on mobile

## 9. Agent Prompt Guide

> "Design in the style of Molly Studio: white background, warm orange `#fd9527` brand accent, Rubik typeface at 400–600, UPPERCASE heading labels, three-tier gray text hierarchy (#333/#666/#999), frosted alpha navigation, GSAP spring easing for animations, Webflow component structure."

**Quick reference:**
- Background: `#ffffff`
- Brand: `#fd9527` (orange)
- Text: `#333333` / `#666666` / `#999999`
- Border: `#dddddd`
- Surface: `#eeeeee`
- Font: Rubik, 400–600
- Stack: Webflow + GSAP

*Generated by Sparkbites — extracted from live CSS analysis*