Preview image. Unlock full-res
Warm editorial gateway. Like a clean, well-organized newsstand where one striking orange magazine cover catches your eye amidst a collection of white and gray.
This design system presents a clean, content-focused experience reminiscent of a curated editorial platform, prioritizing readability and direct interaction. A single, vibrant orange accent color (#FF6719) cuts through a palette of cool grays, drawing immediate attention to calls to action and active states. Softly rounded corners (8px and 12px) for cards and inputs, contrasting with the nearly pill-shaped interactive elements (9999px), create a subtle tension between structure and approachability. The use of system fonts with custom display typography lends a familiar yet distinct voice, reinforcing its role as a platform for individual expression.
Always use Orange Ember (#FF6719) for primary calls to action and active states to guide user focus.
Apply 9999px border-radius for small, interactive pill-shaped elements like 'Subscribe' or 'Like' buttons.
Use 8px border-radius for cards and larger interactive elements (like main CTA buttons) to maintain a soft but structured appearance.
Prefer Midnight Graphite (#363737) for all primary text content (headings, body) to ensure excellent readability against white backgrounds.
Utilize the system-ui font family for general UI labels and body text, keeping weights between 400 and 500 for optimal legibility.
Employ Cahuenga (500 weight, 24px-32px) for page and section titles to express the brand's unique editorial voice.
Maintain element spacing using a 4px base unit, with elementGap values like 4px, 8px, 12px, depending on proximity needs.
Avoid introducing additional saturated colors; maintain Orange Ember as the sole vibrant accent.
Do not use sharp 0px corners, as the system consistently uses 8px, 12px, or 9999px radii.
Do not deviate from the specified font families; system-ui for body, Cahuenga for headlines, and Spectral/-apple-system-ui-serif for editorial content.
Avoid overly dramatic shadows; stick to the subtle rgba(0,0,0,0.1) 0px 4px 6px style for card elevation only.
Do not use generic gray values; always pull from the defined neutral scale (Midnight Graphite, Anchor Gray, Silver Mist, Cool Stone).
Never use system-ui for prominent headings; Cahuenga is reserved for this purpose.
Do not introduce inconsistent padding values; adhere to the 4px base unit and established elementGap tokens like 4px, 8px, 12px.
