Extract

Extract's design system channels a confident, editorial aesthetic built on stark black and white contrasts, punctuated by a soft, muted green and rich, natural photography. Typography features bold, custom display fonts for headlines alongside a robust sans-serif for body text, creating a strong sense of visual hierarchy. Components are minimal and grounded in stark geometric shapes, often appearing as ghost outlines or solid blocks, avoiding heavy shadows or intricate decorations to maintain clarity and directness. Use Feature Deck font (weight 400) for all primary headings (44px, 104px) to establish a strong, impactful visual. Maintain a clear monochrome base with Canvas White (#ffffff) for backgrounds and Ink Black (#070707) for text, components, and borders. Apply Accent Green (#e7feda) sparingly as a muted background color for distinct sections or footers, never for interactive elements. Utilize ABC Diatype (weights 400, 700) for all body text, navigation items, and secondary headings, ensuring readability across various contexts. Implement border radii of 9.27273px for cards and images, and 4.63636px for buttons and input fields to maintain a consistent geometric style. Employ ghost button styles (Ink Black border, Canvas White background, Ink Black text) for secondary actions or outlined navigation. Prioritize natural, rich photography for project showcases, ensuring images are either contained within Ink Black cards or presented against Canvas White backgrounds. Avoid using drop shadows or complex gradients; the system relies on flat surfaces and strong contrasts for visual hierarchy. Do not introduce additional chromatic colors beyond Accent Green (#e7feda) for UI elements; maintain the strict monochrome and subtle accent palette. Do not deviate from the specified font sizes and line heights for Feature Deck and ABC Diatype to preserve the distinct typographic rhythm. Do not use Accent Green (#e7feda) for text or primary interactive elements; its role is purely for background segmentation. Avoid cluttered layouts; use Element Gap (19px) to provide ample breathing room between elements and Section Gap (59px) between major content blocks. Do not apply standard, uniform border radii to all elements; distinguish between card/image radii (9.27273px) and button/input radii (4.63636px).