Strut

Overview

Strut is a collaborative writing workspace that merges notes, documents, and projects into a unified interface powered by AI. The design system embodies **Warm Minimalism**—a philosophy that prioritizes legibility and purposeful hierarchy through a carefully curated oatmeal-and-charcoal palette, accented by a vibrant golden-orange that signals interactivity and forward momentum. The brand serves knowledge workers, writers, and small teams who value clarity over decoration, and who expect their tools to feel both approachable and capable. The emotional response is one of calm focus: the warm background (#e5dfd5) evokes paper and natural materials, while the typography system (GT Pressura Standard for headlines, Inter for body) creates a sophisticated yet unpretentious voice.

Strut's tone is conversational, direct, and occasionally playful—never corporate, never breathless. The vocabulary emphasizes agency and simplicity: "Write first, organize later," "Your always-on AI collaborator," "Focused writing meets project management." The brand personality is that of a thoughtful colleague who removes friction without sacrificing depth. Example sentence in Strut's voice: "Capture your ideas in a Quick Note, then let AI help you find the pattern."

Colors

The color system is rooted in **warm, paper-like neutrality** with a single, commanding accent. The primary surface (#e5dfd5, a soft oatmeal) provides the canvas—it is the dominant background and evokes the tactile warmth of aged paper or linen. The on-surface text color (#333333, a near-black charcoal) ensures legibility at 14px body size and maintains a 15:1 contrast ratio. The primary accent color (#ffb546, a golden-orange) is reserved exclusively for call-to-action buttons, active states, and brand-critical interactive elements—it appears sparingly but unmistakably, commanding attention without aggression. Secondary colors support specific use cases: the secondary palette (#758696, a muted slate-blue) is used for metadata, timestamps, and secondary navigation; the tertiary (#9966cc, a

Typography

The type system pairs two distinct typefaces to create visual rhythm and hierarchy. **GT Pressura Standard** (loaded via custom font-face) is used exclusively for display and headline levels (104px, 48px, 32px), where its geometric, slightly condensed letterforms create a modern, confident presence. **Inter** (from Google Fonts: https://fonts.googleapis.com/css?family=Inter:regular,500,600,700) handles all body, label, and UI text, providing exceptional legibility at small sizes (12px–18px) with its open counters and generous spacing. Font weights are intentional: headlines use 400 (regular) to avoid heaviness, while labels use 600 (semibold) to signal interactivity. Line-height is generous: 112px for display (1.08x), 28px for body-lg (1.56x), and 16px for label-sm (1.33x), creating breath

Layout

The layout system uses a **12-column fluid grid** with a maximum container width of 1200px, ensuring the design scales gracefully from mobile (single column) to desktop (full grid). The gutter spacing is consistently 24px (md spacing unit), creating a rhythm that feels neither cramped nor wasteful. White-space is treated as a first-class design element: section separation uses lg spacing (40px) to create breathing room between major content blocks; card padding uses md spacing (24px) to balance content density; and input fields use sm spacing (12px) for internal padding. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is derived from an 8px base unit, allowing precise control while maintaining visual harmony. Container max-width of 1200px prevents line lengths from exce

Elevation & Depth

Depth in Strut is conveyed through **subtle layering and soft shadows** rather than dramatic contrast. The elevation system uses three distinct shadow values: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minimal lift on hover states and subtle separators; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and modals; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating elements like dropdowns and popovers. Shadows are always soft and diffuse—never sharp or high-contrast—to maintain the warm, approachable aesthetic. The surface stack (surface-container-lowest through surface-container-highest) provide

Shapes

The shape philosophy is **Soft-Technical**: rounded corners are used purposefully to soften the geometric precision of a productivity tool, creating approachability without sacrificing clarity. Buttons use lg radius (20px), creating a pill-like form that feels friendly and clickable; cards use lg radius (20px) for consistency and visual cohesion; input fields use DEFAULT radius (8px) to signal their functional, utilitarian purpose; and badges use full radius (9999px) to emphasize their role as discrete, self-contained labels. Small UI elements (dropdowns, popovers) use sm radius (3px) to maint

Components

Action Elements Buttons are the primary call-to-action mechanism. **button-primary** uses the full primary accent (#ffb546) with on-primary text (#1d1b1a), 48px height, 24px horizontal padding, and lg radius (20px). The box-shadow is md (0 3px 8px rgba(0, 0, 0, 0.15)) to create subtle lift. On hover, the background shifts to #ff9500 (inverse-primary) and shadow increases to lg (0 6px 16px rgba(0, 0, 0, 0.2)), signaling interactivity with a smooth transition (150ms ease-out). On active/pressed state, the background darkens to #e68a00 and shadow reduces to sm, creating tactile feedback. **button-secondary** uses a transparent background with a 1px outline-variant border and primary text color, allowing secondary actions to coexist without visual competition. Hover state fills the backgro

Do's and Don'ts

**Do**

• Do use the primary accent (#ffb546) exclusively on CTAs, active states, and brand-critical interactive elements—never on backgrounds or non-interactive text.
• Do maintain the warm oatmeal background (#e5dfd5) as the dominant surface; it is the brand's signature and should never be replaced with pure white or gray.
• Do apply the full typography hierarchy: use GT Pressura Standard for headlines (48px+), Inter for body and labels, and maintain the specified line-heights and letter-spacing for optimal legibility.
• Do use the elevation system consistently: sm shadows for subtle hover states, md shadows for cards and modals, lg shadows for floating elements like dropdowns.
• Do respect the spacing scale (8px base unit) for all margins and padding; never use arbitrary values like 15px or 37px.

**Don't**

• Don't use pure white (#ffffff) or pure black (#000000) for backgrounds or text; the warm palette (#e5dfd5 for surface, #333333 for text) is non-negotiable.
• Don't apply the primary accent color to non-interactive elements, secondary buttons, or backgrounds—it must remain reserved for CTAs and active states to maintain visual hierarchy.
• Don't mix typefaces within a single headline or body paragraph; GT Pressura Standard is for headlines only, Inter is for everything else.
• Don't create custom shadow values; use only the three defined elevation levels (sm, md, lg) to maintain visual consistency.
• Don't round corners uniformly across all components; use the graduated radius scale (sm for small UI, DEFAULT for inputs, lg for cards and buttons) to create visual hierarchy.