Super
Black text on parchment-white, illuminated by a single amber light.
This system projects an image of focused utility and quiet confidence, using a stark black-on-white text, highlighted by a single vibrant yellow accent. The design leans into sharp contrasts and subtle textural variations in its neutral palette, allowing content to take center stage without visual noise. Generous padding around elements creates a sense of airiness, emphasizing the digital-first nature of the product.
⚡️ Build with this templatehttps://super.soColor Palette
Typography
Heading: inherit
Body: inherit
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
# Super — Style Reference > Black text on parchment-white, illuminated by a single amber light. Theme: light This system projects an image of focused utility and quiet confidence, using a stark black-on-white text, highlighted by a single vibrant yellow accent. The design leans into sharp contrasts and subtle textural variations in its neutral palette, allowing content to take center stage without visual noise. Generous padding around elements creates a sense of airiness, emphasizing the digital-first nature of the product. ## Colors | Name | Value | Role | |------|-------|------| | Amber Glow | `#ffbe3c` | CTA buttons, active navigation indicators — a warm, inviting beacon against the muted interface. | | Obsidian | `#111111` | Headline text, primary button backgrounds, navigation text — serves as the primary dark element. | | Charcoal Black | `#262a2` | Primary body text, card backgrounds in dark mode, significant elements across the UI. | | Warm Gray | `#37352f` | Secondary text, borders, and subtle background elements for visual separation. | | Cool Stone | `#4d545c` | Muted text for inactive states or less prominent information, like button text on light backgrounds. | | Dusk Gray | `#66707a` | Supportive body text, footnotes, and descriptive copy where full contrast isn't required. | | Pale Ash | `#808c99` | Tertiary text, subtle borders, and placeholder text, indicating secondary information. | | Light Mist | `#ccd1d6` | Light borders, dividers, and background elements, providing subtle structure. | | Frosted Linen | `#f9f9f8` | Base background for light-themed sections, offering a soft white canvas. | | Pure White | `#ffffff` | Card backgrounds, navigation bar background, general UI surfaces requiring maximum luminosity. | | Midnight Void | `#090909` | Used for the dark footer background, providing a deep, grounding anchor to the page. | ## Typography | Family | Role | |--------|------| | Beausite | The primary typeface for all text elements. The extensive weight range allows for precise typographic hierarchy, while the subtly negative letter-spacing for larger sizes gives headlines a polished, composed appearance that feels intentional rather than just 'big'. |