Strut

Strut's design system uses an antique paper aesthetic with modern, structured typography for a focused writing environment. A warm, desaturated canvas color sets a muted backdrop for crisp UI elements, defined by subtle borders rather than heavy shadows. The primary accent color is a soft, vivid yellow, used sparingly to highlight functional iconography and interactive elements. Component weights are ghost-like and delicate, prioritizing content over chrome. Use Oatmeal Canvas (#e5dfd5) as the primary background for all major sections and containers. Apply GT Pressura Standard for all display-level typography, ensuring high letter-spacing on larger sizes for a distinctive open feel. Define UI element separation using Charcoal Text (#333333) or Muted Ash (#73706b) 1px solid borders, avoiding heavy shadows. Reserve Amber Accent (#ffb546) for critical interactive elements like active icons or subtle state indicators. Maintain a clear content hierarchy using Inter for body and functional text, with varying weights for emphasis at 10px-48px sizes. Apply 8px radius for general components and cards, and 28px for larger interactive containers, maintaining a soft, friendly feel. Utilize 16px for horizontal and vertical element gaps to ensure consistent breathing room and clear content separation. Do not use dark or primary colored backgrounds for entire sections; the canvas should remain light and desaturated. Avoid bold or heavy font weights for headlines; use GT Pressura Standard 400/500 with generous letter-spacing to create visual impact. Do not over-saturate colored elements; the Amber Accent (#ffb546) is designed to be a pop against a muted palette, not compete with it. Avoid using multiple colors for text styles beyond Charcoal Text (#333333) and Storm Gray (#676460); maintain a monochromatic text palette. Do not introduce complex shadows or gradients; rely on subtle borders and high contrast for definition. Never compromise the wide letter-spacing for GT Pressura Standard headings; it is crucial to the brand's typographic identity. Do not apply padding below 16px for cards; this system prioritizes a comfortable, uncrowded density.