Ada

The Ada design system establishes a stark, information-first aesthetic built on high contrast and minimal ornamentation. Typography anchors the visual hierarchy, with a clear distinction between prominent headings and concise body text. Surfaces are flat and monochromatic, emphasizing content over decorative elements. Interaction is signaled through bold black borders and subtle background shifts, ensuring focus remains on actionable items. Prioritize Times (serif) for all headings and primary body text to establish an authoritative tone. Use Arial (sans-serif) only for functional elements like buttons or small navigational text, ensuring clear distinction from content. Maintain high contrast throughout the interface, primarily using Ghost Ink (#000000) on Canvas White (#FFFFFF) backgrounds. Apply Fog Button (#efefef) as the background for any button intended to be visually subtle but interactive. Ensure all interactive elements, where visible borders are present, such as ghost buttons, use a 1px Ghost Ink (#000000) border. Adhere to 0px border-radius for all component corners, reinforcing a sharp, precise aesthetic. Utilize 16px as the standard vertical element separation, with larger 40px gaps for section breaks. Avoid using any colors other than Ghost Ink (#000000), Canvas White (#FFFFFF), Fog Button (#efefef), and the browser default blue link color in the UI. Do not introduce rounded corners or box shadows, as the system relies on flat surfaces and sharp edges. Do not deviate from the specified font families or their assigned roles; Times is for content, Arial for controls. Avoid decorative gradients or background images that detract from the content-first focus. Do not use padding on cards; they should act as invisible containers using the default 0px padding. Do not apply custom styling to links; allow the browser default underlined blue to indicate interactivity. Never use less than 16px vertical element spacing, except for specific button padding.