Grain

Grain presents a dynamic, AI-first productivity workspace characterized by a bright, open canvas and micro-interactions of vivid green accents. Typography is compact and precise, utilizing a variable font for both confident headlines and crisp body text. Subtle shadows and rounded forms add a friendly, approachable polish to components, avoiding heavy elevation for a lightweight feel. Prioritize 'Grain Green' (#009959) for all primary call-to-action backgrounds and active states to guide user interaction. Use 'Canvas White' (#fafafa) as the dominant background for most page sections and card surfaces to maintain a bright, open aesthetic. Apply Inter Variablefont for all body text and most headings; leverage its variable weights to achieve precise visual hierarchy and density. Maintain a comfortable rhythm with a 24px default card padding and 8px element gap for consistent content grouping. Employ consistent 10px border-radius for general components like cards, buttons, and icons, with specific 8px for primary buttons and 24px for pill-shaped tags. Utilize 'Rich Black' (#000000) for all primary body text and significant headlines to ensure strong contrast and readability against light backgrounds. Integrate the 'Ambient Gradient' where visual breaks or subtle section transitions are needed to add depth with branded color washes. Avoid using multiple chromatic colors simultaneously; green accents should predominantly carry the brand's 'on' state. Do not introduce strong, opaque box-shadows on cards or surfaces; prefer subtle inset shadows or no shadows to keep components lightweight. Refrain from using bold or heavy weights for large display text; the system favors lighter weights like Inter 400-600, reserving Poppins 600 for specific headline impact. Do not deviate from the established border-radius values; consistency in rounded corners is crucial for the brand's approachable feel. Avoid using any color other than 'Grain Green' (#009959) for the primary call-to-action background, as this dilutes brand identity. Do not apply excessive letter-spacing on text; leverage negative tracking on larger text sizes for a compact, intentional look. Avoid full-bleed imagery unless explicitly specified for hero sections; most content should live within well-defined, contained areas.