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

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)

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