Slow Down Creative

Overview

Slow Down Creative is a Lakota woman-owned branding studio that transforms purpose-driven organizations through intentional, beautiful brand identities. The design system embodies 'Warm Minimalism'—a philosophy that strips away unnecessary complexity while infusing warmth through earthy, sun-inspired color palettes and generous white space. The aesthetic evokes calm deliberation, inviting users to pause and reflect, mirroring the brand's core ethos of thoughtful creation. The UI communicates clarity and accessibility without sacrificing sophistication.

The brand voice is grounded, generous, and conversational—never corporate or rushed. Vocabulary emphasizes intention ('craft,' 'thoughtful,' 'beautiful'), purpose ('better world,' 'meaningful'), and slowness ('pause,' 'deliberate'). Tone is warm but professional, encouraging collaboration and trust. Example: 'Let's craft something meaningful together—we believe great brands start with listening.'

Colors

The color system centers on a warm, earthy foundation with strategic accent pops. Primary (#FF6102, a vibrant burnt orange) is the signature accent used exclusively on CTAs, active states, and key interactive moments—it commands attention without aggression. Secondary (#F2B05F, a softer golden-tan) provides supporting warmth for secondary actions and highlights. Tertiary (#B4D9F0, a soft sky blue) introduces calm and balance, used sparingly for tertiary information or status indicators.

The surface stack is deliberately light and airy: surface (#FDFFF7) is an off-white with a hint of warmth (not pure white), creating a welcoming canvas. Surface-container variants range from #FAF9F5 (lowest, nearly imperceptible) to #E0DCD2 (highest, for elevated surfaces). On-surface text is a deep charco

Typography

The type system pairs two distinct voices: Larken (a refined, elegant serif loaded at weights 300 and 300-italic) anchors display and headline levels, communicating sophistication and intentionality. Montserrat (a geometric sans-serif at weights 500–700) handles labels, navigation, and UI text, providing clarity and modern accessibility. Matter (a humanist sans-serif fallback) serves body copy and secondary text, ensuring readability at small sizes. Display (56px, 300 weight, -0.02em letter-spacing) sets the tone for hero sections with generous line-height (64px) and subtle negative letter-spacing to create visual tension. Headline-lg (40px, 300 weight) is used for section titles, maintaining elegance. Body-md (16px, 400 weight, 24px line-height) is the workhorse for paragraph text and ens

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, allowing content to breathe on large screens while remaining responsive on mobile. The site margin (gutter) is set to 24px on desktop, scaling down to 18px on tablet and 12px on mobile via clamp() functions, ensuring consistent breathing room. Container max-width is 1280px; content rarely spans full width, instead using 8–10 columns to maintain readability and focus. White-space is treated as a design element: lg spacing (40px) separates major sections, md spacing (24px) divides subsections, and sm spacing (12px) creates breathing room within components. The spacing scale is semantic: use lg for hero-to-featured-work transitions, md for card padding and section margins, and sm for internal component padding. The grid is flu

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic contrast. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for resting state cards and inputs, md (0 3px 8px rgba(0, 0, 0, 0.15)) for hovered cards and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating elements and dropdowns. Shadows are soft and diffuse, never harsh or dark, maintaining the warm, approachable aesthetic. Transitions between elevation levels use 300ms cubic-bezier(0.34, 2.27, 0.64, 1) for a subtle spring effect on hover, creating a sense of responsiveness without feel

Shapes

The shape philosophy is 'Approachable Precision'—rounded corners are used strategically to soften the interface without sacrificing clarity. Buttons and primary CTAs use full (9999px) border-radius, creating pill-shaped elements that feel friendly and clickable. Cards and containers use lg (1rem / 16px) border-radius, balancing softness with definition. Input fields use full (9999px) to match button styling and create visual cohesion in forms. Secondary UI elements (badges, small containers) use md (0.75rem / 12px) or DEFAULT (0.5rem / 8px) for subtle rounding that doesn't dominate. The reason

Components

Action Elements Buttons are the primary interactive element and use a consistent 48px height for touch-friendly targets. Button-primary (#FF6102 background, white text, full border-radius, 12px 32px padding) is reserved for primary CTAs like 'Work With Us' and 'Our Work.' On hover, the background shifts to primary-fixed-dim (#F2B05F), and the element scales to scaleX(0.993) scaleY(0.992) with a 300ms cubic-bezier(0.34, 2.27, 0.64, 1) transition, creating a subtle spring effect. Button-secondary (transparent background, 2px solid on-surface border, full border-radius) is used for secondary actions like 'View All Projects.' On hover, it gains a semi-transparent light background (rgba(253, 255, 247, 0.5)) and the text color shifts to primary, with a 300ms ease transition. Button-ghost (tr

Do's and Don'ts

**Do**

• Do use primary (#FF6102) exclusively for CTAs and active states—it's the brand's signature accent and should feel special, not ubiquitous.
• Do maintain generous white space (lg spacing = 40px) between major sections to reinforce the 'slow down' philosophy and prevent cognitive overload.
• Do pair Larken (serif, 300 weight) with Montserrat (sans-serif, 600 weight) for visual contrast—never mix weights within the same typeface for hierarchy.
• Do use full border-radius (9999px) on all buttons and primary inputs to create instant visual recognition of interactive elements.
• Do apply soft shadows (md elevation: 0 3px 8px rgba(0, 0, 0, 0.15)) on hover to create tactile feedback without harsh contrast shifts.

**Don't**

• Don't use pure white (#FFFFFF) as the page background—always use surface (#FDFFF7) to maintain warmth and reduce eye strain.
• Don't apply primary color to body text, backgrounds, or non-interactive elements; reserve it for CTAs, active states, and focus indicators only.
• Don't mix serif and sans-serif fonts within a single heading or label—use Larken for display/headlines and Montserrat for UI text, never both in one element.
• Don't use sharp corners (border-radius: 0) on buttons or cards; the brand voice is approachable, not austere.
• Don't apply shadows darker than md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) on standard components—the palette is light and warm, and heavy shadows feel out of place.