Flodesk

Overview

Flodesk embodies 'Refined Minimalism'—a design philosophy that prioritizes clarity, intentionality, and craft over visual noise. The brand serves email marketers and creators who refuse to compromise on design quality; the UI communicates that sophistication and simplicity are not opposing forces but complementary virtues. The aesthetic is deliberately restrained: a warm, neutral palette (#f8f8f5 surface, #111110 text) with precise geometric forms and generous whitespace create an environment where content—not decoration—commands attention. The brand personality is confident yet approachable, speaking in the language of design professionals without pretension. Voice: direct, precise, and grounded in craft. Example: 'Your emails deserve a builder that doesn't get in the way.'

Colors

The color system is anchored in a sophisticated neutral foundation with strategic accent deployment. Primary (#111110, near-black) serves as the dominant interactive color—used on CTAs, focus states, and primary text—creating a sense of authority and intentionality. The surface stack (#f8f8f5 → #eaeae4 → #d7d7d0) provides subtle depth through grayscale progression, enabling visual hierarchy without relying on color. Secondary (#6e6848, warm taupe) acts as a supporting neutral for secondary text and disabled states, maintaining warmth without distraction. Tertiary (#e56341, warm salmon-orange) is reserved for accent moments—badges, highlights, and supporting CTAs—introducing energy while respecting the restrained palette. Error (#d53b20, deeper rust-red) signals destructive or warning state

Typography

The type system uses Flodesk Sans exclusively, a custom sans-serif optimized for screen legibility and brand distinctiveness. The hierarchy spans from display (80px, 500 weight, -0.02em tracking) for hero statements down to label-sm (12px, 500 weight, 0.05em tracking) for UI labels. Headlines (headline-lg at 60px through headline-md at 40px) use 500 fontWeight to maintain elegance without heaviness; body copy (body-lg 20px, body-md 16px) sits at 400 weight with 0em letter-spacing for neutral readability. All sizes above 28px apply -0.02em letter-spacing to tighten the visual rhythm and reinforce the 'refined' aesthetic. When displaying body text over colored backgrounds (tertiary-container #f1ebc8 or error-container #fae4e2), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) to maintain leg

Layout

The layout system uses a 12-column grid with responsive breakpoints (375px mobile, 768px tablet, 1024px desktop, 1440px wide). Container max-width is fixed at 1440px on large screens, with grid margins scaling from 16px (mobile) to 80px (desktop). The gutter between columns is consistently 24px across all breakpoints, creating a predictable rhythm. Whitespace is treated as a first-class design element: section separation uses 5xl (64px) spacing on desktop, 3xl (40px) on tablet, and 2xl (32px) on mobile. Cards and containers use 24px internal padding (xl spacing) with 12px gaps between nested elements (md spacing). The philosophy is 'generous but not wasteful'—every pixel of whitespace serves to clarify content hierarchy and reduce cognitive load. Hero sections occupy full viewport height w

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic visual separation. The shadow system uses a single, consistent formula: 0px 15px 44px 0px rgba(0, 0, 0, 0.1) for standard elevation (sm and md levels). This soft, spread shadow (15px blur, 44px spread) creates a gentle lift without drawing attention—appropriate for a brand that values restraint. Elevated surfaces (cards, modals, dropdowns) sit at md elevation; interactive elements on hover shift to lg elevation (0px 15px 44px 0px rgba(0, 0, 0, 0.15), increasing opacity to 0.15) to signal state change. Flat surfaces (but

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are used sparingly and purposefully, never arbitrarily. Buttons use full (100px) border-radius to signal primary actions and create a distinctive, approachable silhouette; secondary buttons and inputs use DEFAULT (8px) radius for a more structured, technical feel. Cards and containers use lg (16px) radius to soften edges without compromising the refined aesthetic. Small UI elements (badges, tags, focus rings) use full (100px) radius to create a cohesive, playful accent. The rationale: full radius on buttons creates a 'pill' shape th

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use {colors.primary} (#111110) background with {colors.on-primary} (#f0f0eb) text, full (100px) border-radius, 12px vertical + 32px horizontal padding, and 48px height. On hover, shift backgroundColor to {colors.primary-container} (#241a17) and maintain text color; add {elevation.md} shadow (0px 15px 44px 0px rgba(0, 0, 0, 0.1)). On active, darken to #0a0a0a. Secondary buttons use transparent background with {colors.primary} text, 1px solid {colors.outline} border, DEFAULT (8px) border-radius, and the same padding/height. On hover, shift backgroundColor to {colors.surface-container-high} (#d7d7d0). All buttons use {typography.label-md} (14px, 500 weight) and apply transition: background-color 200ms ease, box

Do's and Don'ts

**Do**

• Do use {colors.primary} (#111110) for all primary CTAs and interactive elements; it's the brand's signature accent and signals intentionality.
• Do apply -0.02em letter-spacing to all headlines (28px and above) to reinforce the refined aesthetic and tighten visual rhythm.
• Do use full (100px) border-radius exclusively on primary buttons to create a distinctive, approachable silhouette that differentiates from competitors.
• Do maintain generous whitespace (5xl/64px section separation on desktop) to reduce cognitive load and emphasize content clarity.
• Do apply the double-ring focus indicator (0 0 0 2px surface, 0 0 0 4px outline-variant) on all interactive elements for accessible, brand-consistent focus states.
• Do use {colors.tertiary} (#e56341) sparingly for accent moments (badges, highlights) to introduce warmth without breaking the neutral aesthetic.

**Don't**

• Don't use colors outside the defined palette (no arbitrary brand colors, no unsanctioned accent hues); the neutral + tertiary system is intentional and tested for contrast.
• Don't apply border-radius to text elements, dividers, or background containers; reserve rounded corners for buttons (full), cards (lg), and small UI elements (full).
• Don't use shadows heavier than {elevation.lg} (0px 15px 44px 0px rgba(0, 0, 0, 0.15)); the brand's restraint depends on subtle, consistent shadow physics.
• Don't mix font families; Flodesk Sans is the only typeface—no serif fallbacks, no system fonts, no decorative fonts for headlines.
• Don't apply letter-spacing tighter than -0.02em or looser than 0.05em; the type system's precision depends on these specific values.
• Don't use opacity below 0.4 for interactive elements or text; maintain WCAG AA contrast ratios (4.5:1 for body text, 3:1 for UI components).