Attio

The design feels like a meticulously organized, high-end instrument. It operates on a starkly minimalist, black-and-white axis, where near-black (#1c1d1f) on pure white is the default state for text and primary actions. The most distinctive choice is the typographic duality: large, inviting headlines are set in the soft serif Tiempos Text, while the entire user interface, from buttons to body copy, uses the neutral sans-serif Inter. This creates a rhythm between approachable storytelling and functional precision. Color is used with extreme restraint, appearing as subtle accents for interactive states or status indicators, ensuring the user's focus remains on content and functionality. A consistent 10px radius on buttons provides a soft counterpoint to the otherwise sharp, grid-aligned UI frames. Always set display and hero headlines in Tiempos Text. Use Inter with the ss03 font feature setting for all UI copy. Apply negative letter-spacing to all text 18px and larger, following the type scale. Construct primary CTAs from Ink (#1c1d1f) backgrounds with White (#ffffff) text. Maintain a consistent 10px radius on all major buttons. Use borders (1px Slate #d3d8df) as the primary method for separating UI elements. Reserve color (Action Blue #407ff2) for interactive states like links and focus rings. Don't use Tiempos Text for body copy or any text smaller than 28px. Don't use color in headlines or primary buttons. Don't use fill-based colors unless for semantic status indicators. Don't apply shadows to buttons, inputs, or simple cards. Don't use radii other than 10px for buttons or 8px for cards. Don't forget to include the ss03 font feature when setting type. Don't introduce new saturated colors; the palette is intentionally monochrome.