14islands

This design system evokes the precision of a high-end editorial layout, prioritizing clear information delivery over decorative elements. The interplay of stark #070707 text against expansive #F2F2F2 backgrounds creates a powerful, almost architectural contrast, while the strategic use of --color-grey-highlight-light (#a2a2a9) provides subtle visual breaks that maintain gravity. Typography drives the aesthetic, with custom fonts AftenScreen delivering impactful, tightly kerned headlines and BentonSans ensuring legible, understated body copy, resulting in a system that feels both modern and timeless. Prioritize Canvas White (#f2f2f2) as the main background for content areas and Deep Graphite (#070707) for all primary text, ensuring visual clarity and impact. Use AftenScreen at its largest sizes (75px, 100px, 180px) with negative letter-spacing for all hero and section headlines to create dramatic visual tension. Employ BentonSans at 16px weight 400 with a 1.4 line height for all body copy and secondary informational text to maintain high readability. Introduce Soft Gray Highlight (#a2a2a9) for secondary text elements or visual accents, especially for subheadings or subtle distinctions. Apply a consistent 4.16667px border-radius to all image containers and interactive elements, avoiding sharp corners while still maintaining a structured feel. Maintain generous vertical spacing between sections, using values around 100px to 108px to ensure content breathes. Ensure interactive elements (buttons, links) are either Deep Graphite (#070707) or Soft Gray Highlight (#a2a2a9) with no background, relying on text and subtle borders for indication. Avoid using background colors other than Canvas White (#f2f2f2) or Off White (#ffffff) for primary content sections. Do not introduce highly saturated or vivid chromatic colors; adhere strictly to the established neutral palette. Refrain from using strong box-shadows or complex elevation effects; the design relies on spacing and typography for hierarchy. Do not deviate from the specified negative letter-spacing for AftenScreen headlines, as this is a core part of its visual identity. Avoid pill-shaped or overly rounded elements; the standard 4.16667px radius should be used consistently. Do not use generic system fonts; always specify BentonSans or AftenScreen (or their approved substitutes) for all text. Do not add additional padding or background styles to the 'Minimal Button' components; their design is intentionally understated.