Lattice

Lattice presents a vibrant, modular productivity system: a predominantly clean white canvas punctuated by distinct gradient-filled containers and brightly colored brand accents. Typography is compact and confident, primarily in a single sans-serif weight, ensuring clarity. Functional elements like buttons and badges embrace rounded forms and an array of muted yet distinct brand hues, creating a visually organized and accessible experience. Use 'Matter Black' (#001f1f) for all primary headings and body text, ensuring strong readability. Apply a border-radius of 28.8768px for all primary action buttons for a consistent soft, approachable feel. Employ 'Canvas White' (#ffffff) as the default background for most page sections and card surfaces. Utilize 'Pale Green' (#cdface) as the background for primary call-to-action buttons, accompanied by 'Forest Green' (#366625) text. Provide ample vertical separation between major page sections with a default sectionGap of 72px. Maintain a compact button style with elementGap of 7px for tight UI element alignments. Apply Matter font at 500 weight for headings for confident visual hierarchy. Avoid using harsh, saturated colors for large background areas; reserve them for small accents or carefully crafted gradients. Do not deviate from the Matter typeface; maintain its consistent use across all text elements. Refrain from using square corners on interactive elements; apply radii of at least 11.5507px for a softer, more inviting touch. Do not introduce new shadow styles beyond the defined subtle stack for elevated cards; maintain visual lightness. Avoid using multiple font weights within a single text block to preserve the confident and direct typographic voice. Do not overuse bold text; rely on size and context for emphasis rather than increased visual weight. Do not combine multiple colored gradients arbitrarily; use them purposefully for distinct sections, following the established 'Lime Spritz Gradient' pattern.