Grammarly

Grammarly presents a grounded, text-first experience centered on clarity and understated precision. Its defining visual characteristic is the near-achromatic palette, almost entirely grays and whites, which creates a quiet background for the functionality. The single strong 'Teal Verdant' accent is reserved almost exclusively for calls to action, generating a strong visual cue without overwhelming the interface. Subtle textural depth is hinted at through the interaction of dark grays and crisp whites, rather than overt shadows or complex color schemes. Prioritize Inkwell Deep (#0e101a) or Inkwell Muted (#1f243c) for all text to maintain a consistent dark-on-light theme. Use Teal Verdant (#027e6f) exclusively for primary calls to action, maintaining its impact and clarity. Apply 8px border-radius to all interactive buttons for a consistent soft-edged feel. Utilize 'matter' (substitute Open Sans) for all headlines and display text, leveraging its 670 weight and negative letter-spacing for sharp, impactful titles. Maintain a comfortable spacing density with a base of 8px, frequently using 8px, 16px, 24px and 32px for gaps and padding. Avoid introducing additional saturated colors beyond Teal Verdant (#027e6f); the system relies on a near-achromatic palette for its tranquility. Do not use box-shadows for elevation; the system uses varying background shades (like Arctic Mist #ffffff and Snow Drift #f5f5f5) to create perceived depth. Do not use overly complex background patterns or gradients; stick to solid color surfaces to maintain clarity. Avoid excessive variation in typography; 'matter' for headings and 'Glyph' for body text should cover most use cases. Do not design full-bleed layouts; content should be subtly constrained, implying a max-width, with consistent horizontal padding for readability.