Little Might

Overview

Little Might is a personal brand and content platform for ambitious builders and operators seeking actionable strategies for business and personal fulfillment. The aesthetic embraces 'Warm Minimalism'—a design philosophy that pairs austere, high-contrast typography with a vibrant coral accent (#f7591f) to create visual energy without visual noise. The brand serves operators who value clarity, precision, and practical wisdom; the UI evokes a sense of calm professionalism tempered by approachable warmth. The emotional response is one of clarity and confidence: users feel they are reading from someone who has done the work and is sharing the exact method.

The voice is direct, precise, and never breathless. Cathryn writes in short, declarative sentences with concrete examples. Vocabulary favors operational terms ('builders', 'operators', 'deep', 'method') over aspirational language. Example sentence in brand voice: 'I go deep on one hard thing at a time, then write down exactly how to do it yourself.'

Colors

The color system is built on a warm, off-white canvas (#f5f4ed, labeled --color-paper) paired with a near-black text (#0b0d0b, --color-ink) and a single, high-saturation accent: coral (#f7591f, --color-accent). This three-color palette creates maximum contrast and visual hierarchy with minimal cognitive load. Primary (#f7591f) is used exclusively for call-to-action buttons, hover states on interactive elements, and accent text (e.g., the italicized 'Then I write down how' in the hero). On-primary is set to the paper color (#f5f4ed) to ensure legibility on the coral background. Secondary and tertiary colors are muted grays (#65655c and #52534e respectively) used for supporting text, metadata, and disabled states. The surface stack progresses from the bright paper (#f5f4ed) through progressi

Typography

The type system pairs two serif faces with a monospace accent. Display and headline levels use Instrument Serif (400 weight, no boldface), a high-contrast serif that conveys authority and editorial sophistication. The display size is set to 86.4px with -0.02em letter-spacing to create a tight, confident presence. Body text uses Inter (400 weight) at 16–18px with 1.5 line-height for comfortable reading. Metadata, labels, and UI text use Geist Mono (500 weight) at 10.88–11.2px with 0.1–0.12em letter-spacing, creating a technical, precise tone that reinforces the 'builder' positioning. The monospace is used sparingly: on navigation links, button labels, and form labels. This creates a visual distinction between content (serif + sans) and interface (mono). Apply text-shadow: 0 1px 2px rgba(0,

Layout

The page uses a fluid, single-column layout with a fixed max-width of 1240px (--container-max-width), centered with mx-auto. The grid is 12 columns on desktop, collapsing to 1 column on mobile. Horizontal padding is 20px (gutter) on mobile, 32px (sm:px-8) on tablet, and 40px on desktop, creating a breathing room that respects the minimalist aesthetic. Vertical spacing follows a consistent 8px unit scale: section separation uses lg spacing (40px), component internal padding uses md spacing (24px), and micro-interactions use sm spacing (12px). The hero section uses a two-column layout on desktop (54% copy, 46% illustration) with the illustration positioned via background-image and background-position on screens ≥1024px, creating a sophisticated layered effect. The newsletter signup form is i

Elevation & Depth

Depth is achieved through subtle layering and soft shadows rather than dramatic contrast. The design uses three elevation levels: Level 1 (Base) is the paper background (#f5f4ed) with no shadow. Level 2 (Cards, Inputs) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px solid border at rgba(0, 0, 0, 0.12) (--color-rule). Level 3 (Modals, Dropdowns) applies box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with the same border. The header uses a backdrop-filter: blur(6px) with opacity: 0.92 to create a frosted-glass effect while maintaining legibility. Hover states on cards transition the bac

Shapes

The shape philosophy is 'Architectural Precision'—rounded corners are used sparingly and consistently to create a sense of order and intentionality. Buttons and chips use 6px (rounded-DEFAULT), creating a subtle softness without appearing playful. Cards and containers use 8px (rounded-md) for slightly more breathing room. Input fields use 6px to align with button styling. The header and modals use 0px (sharp corners) to emphasize their structural role as containers. The newsletter signup form uses 8px (rounded-md) to differentiate it as a secondary container within the hero. The author avatar

Components

Action Elements Buttons use a two-tier system: primary (coral background, paper text, 40px height, 10px 24px padding) and secondary (transparent background, coral text, 1px border at --color-rule, 40px height, 10px 20px padding). Primary buttons transition to opacity: 0.9 on hover over 150ms. Secondary buttons transition text-color and border-color to coral on hover. The newsletter Subscribe button in the header uses the primary style with rounded-DEFAULT (6px) and padding 10px 24px. The form submit button uses the same primary style but with a darker background on hover (#f5471a) to create visual feedback. All buttons use Geist Mono (500 weight, 11.2px, 0.12em letter-spacing) for a technical, precise tone.

Containers & Surfaces Cards use a 1px solid border at --color-rule (rgba(0

Do's and Don'ts

**Do**

• Do use the coral accent (#f7591f) exclusively for interactive elements (buttons, links, hover states) and accent text to maintain visual hierarchy and guide user attention.
• Do pair Instrument Serif headlines with Inter body text to create a sophisticated editorial voice that reinforces the 'builder' positioning.
• Do apply consistent 8px unit spacing (md: 24px for sections, sm: 12px for components) to create visual rhythm and predictability across the layout.
• Do use Geist Mono (500 weight, 0.1–0.12em letter-spacing) for all UI labels and metadata to create a technical, precise tone that differentiates interface from content.
• Do maintain the warm, off-white canvas (#f5f4ed) as the dominant background to create a calm, approachable aesthetic that contrasts with the high-contrast serif typography.

**Don't**

• Don't introduce new accent colors or gradients; the three-color palette (paper, ink, coral) is the entire system. Resist the temptation to add secondary accent colors.
• Don't use bold or italic weights in Instrument Serif headlines; the typeface's high contrast is sufficient for emphasis. Reserve italics for accent text (e.g., 'Then I write down how') in the primary color.
• Don't apply shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.12); the minimalist aesthetic relies on subtle depth, not dramatic layering.
• Don't round corners more than 8px (rounded-md) on cards and containers; the architectural precision philosophy requires restraint. Sharp corners (0px) are reserved for structural elements like headers.
• Don't use system fonts or generic sans-serif fallbacks; always specify the full font stack (Inter, Geist Mono, Instrument Serif) with appropriate fallbacks to maintain the brand's distinctive typographic voice.