--- version: alpha name: Quantazone Dark description: A dark, enterprise-leaning AI consulting system with bright blue action states and restrained industrial contrast. colors: primary: "#0065FF" secondary: "#8C8C8C" tertiary: "#374151" neutral: "#0C1116" surface: "#111820" on-surface: "#F7F7F7" error: "#EF4444" text-muted: "#8C8C8C" text-subtle: "#6B7280" border: "#374151" backdrop: "#0C1116" typography: headline-display: fontFamily: "Space Grotesk" fontSize: 54px fontWeight: 600 lineHeight: 64.8px letterSpacing: 0.5px headline-lg: fontFamily: "Inter" fontSize: 39px fontWeight: 500 lineHeight: 47px letterSpacing: 0px headline-md: fontFamily: "Space Grotesk" fontSize: 27px fontWeight: 500 lineHeight: 40.5px letterSpacing: 0px headline-sm: fontFamily: "Inter" fontSize: 20px fontWeight: 500 lineHeight: 24px letterSpacing: 0px body-lg: fontFamily: "Inter" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0px body-md: fontFamily: "Inter" fontSize: 14px fontWeight: 400 lineHeight: 21px letterSpacing: 0px body-sm: fontFamily: "Inter" fontSize: 12px fontWeight: 400 lineHeight: 18px letterSpacing: 0px label-lg: fontFamily: "Inter" fontSize: 16px fontWeight: 400 lineHeight: 24px letterSpacing: 0px label-md: fontFamily: "Inter" fontSize: 14px fontWeight: 400 lineHeight: 21px letterSpacing: 0px label-sm: fontFamily: "Inter" fontSize: 12px fontWeight: 500 lineHeight: 16px letterSpacing: 0.02em rounded: none: 0px sm: 4px md: 5px lg: 8px xl: 12px full: 9999px spacing: xs: 2px sm: 10px md: 18px lg: 36px xl: 60px gutter: 24px section: 96px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-surface}" typography: "{typography.label-lg}" rounded: "{rounded.md}" padding: "8px 16px" height: "40px" button-primary-hover: backgroundColor: "#1A73FF" textColor: "{colors.on-surface}" typography: "{typography.label-lg}" rounded: "{rounded.md}" padding: "8px 16px" height: "40px" button-secondary: backgroundColor: "transparent" textColor: "{colors.secondary}" typography: "{typography.label-lg}" rounded: "{rounded.sm}" padding: "8px 16px" height: "40px" button-link: backgroundColor: "transparent" textColor: "{colors.secondary}" typography: "{typography.label-md}" rounded: "{rounded.none}" padding: "0px" card: backgroundColor: "{colors.neutral}" textColor: "{colors.secondary}" rounded: "{rounded.lg}" padding: "16px" input: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" rounded: "{rounded.md}" padding: "12px 16px" chip: backgroundColor: "{colors.surface}" textColor: "{colors.on-surface}" rounded: "{rounded.full}" padding: "4px 12px" --- # Quantazone Dark ## Overview Quantazone presents itself as a modern AI consulting brand with a serious, enterprise-first tone. The visual language is dark, spacious, and restrained, using bright blue accents to signal action without feeling playful. The overall impression is confident and technical, aimed at business decision-makers who want clarity, credibility, and a premium sense of control. ## Colors - **Primary (#0065FF):** A vivid electric blue used for the main call to action, the logo mark, and other high-priority interactive states. It is the only strong accent and should remain reserved for moments that need immediate attention. - **Secondary (#8C8C8C):** A muted cool gray used for supporting text, secondary buttons, and low-emphasis UI elements. It helps the interface feel measured and professional. - **Tertiary (#374151):** A dark border gray used for card outlines and subtle structural definition. It separates regions without creating visual noise. - **Neutral (#0C1116):** The deep charcoal background that establishes the site’s dark mode foundation. It provides high contrast for white headings and blue CTAs. - **Surface (#111820):** A slightly lifted dark surface tone for panels, cards, and inputs when separation from the background is needed. Keep it close to the base background to preserve the understated look. - **On-surface (#F7F7F7):** The primary light text color used for headings, button labels, and essential foreground content. It reads as near-white rather than stark pure white. - **Error (#EF4444):** A clear alert color for destructive or invalid states. It is not prominent in the screenshot, but it should remain saturated and reserved. - **Text-muted (#8C8C8C):** Use for body copy, navigation labels, and de-emphasized descriptions. - **Text-subtle (#6B7280):** A softer muted tone for helper text, hints, and secondary metadata. - **Border (#374151):** A subdued border tone for outlines and separators. - **Backdrop (#0C1116):** A reinforcing background token for full-bleed sections and layout shells. ## Typography The system blends two sans-serif families: **Space Grotesk** for high-impact hero headings and **Inter** for most interface and body content. Space Grotesk gives the brand a technical, slightly futuristic personality, while Inter keeps navigation and supporting text crisp and highly readable. Headlines lean large and confident, with the main hero set in `headline-display` at 54px/64.8px and medium weight. Secondary headings step down through `headline-lg` and `headline-md`, maintaining a clean editorial hierarchy without heavy decoration. The body text is intentionally compact: `body-md` at 14px/21px is the dominant reading size, and `body-lg` can be used for slightly more prominent supporting copy. Labels and navigation should stay understated, generally in regular weight, with minimal letter spacing. Only the smallest label treatment uses a subtle tracking increase, which helps compact UI text feel polished without looking styled or loud. ## Layout The layout is centered and spacious, with a strong hero-first composition. Navigation sits in a single top row, while the primary message is centered in the viewport with generous vertical breathing room. The overall structure feels like a fixed-max-width desktop experience rather than a dense fluid application. Spacing follows a restrained rhythm built from small increments: `xs` 2px for micro adjustments, `sm` 10px for compact separations, `md` 18px for standard content gaps, and larger steps of `lg` 36px and `xl` 60px for section-level breathing room. Use `section` 96px for major page divisions when a more generous landing-page cadence is needed. Cards and content blocks should use 16px internal padding by default, with larger outer spacing around hero sections and navigation. Keep alignment centered where possible, and avoid crowded multi-column compositions unless the content truly requires them. ## Elevation & Depth The design is intentionally flat. There are no visible ambient shadows, and hierarchy is created through contrast, size, and spacing rather than depth effects. The background and surface tones are close enough that sections feel cohesive, while borders provide the main structural cue. Use subtle borders in `#374151` when a component needs separation, and rely on the bright primary blue to create action prominence. Avoid heavy shadow systems, glows, or layered depth that would disrupt the calm, enterprise tone. ## Shapes The shape language is modest and functional. Buttons use slightly rounded corners, cards are softly squared, and nothing feels overly pill-shaped or ornamental. The overall impression is architectural and disciplined rather than friendly or soft. Use `rounded.md` for primary actions, `rounded.sm` for secondary controls, and `rounded.lg` for cards or panels that should feel a bit more contained. Reserve `rounded.full` for small chips or tags when a fully rounded treatment is needed. ## Components ### Buttons - `button-primary` is the dominant CTA style: blue fill, near-white text, 40px height, and 8px/16px padding. It should be used for actions like “Book a Meeting” or “Let’s Talk.” - `button-primary-hover` can brighten slightly while keeping the same geometry and text treatment. - `button-secondary` should remain transparent with muted gray text and a subtle border-like presence; use it for lower-emphasis actions. - `button-link` is for text-only navigation or inline actions. It should be minimal, underlined when needed, and never visually compete with the primary CTA. - Buttons should stay compact and polished, with consistent minimum height and modest corner radii. ### Cards - `card` uses the dark neutral background, a 1px border, and 16px padding. - Cards should feel like quiet containers, not elevated panels. Keep shadows off and use content spacing to imply structure. - When cards sit on the page background, the border is more important than any tonal shift. ### Inputs - Inputs should match the surface tone and rounded medium corners. - Keep padding generous enough for desktop comfort, but avoid large fields that would break the restrained layout. - Focus states should rely on the primary blue rather than shadow or glow. ### Chips and small tags - `chip` should use a fully rounded shape and compact padding. - Keep chip labels short and readable, with no decorative styling beyond simple tonal contrast. ### Navigation and links - Navigation items are text-first and understated, with small dropdown indicators and no heavy chrome. - Use muted colors for default nav states and blue only for active or primary actions. ## Do's and Don'ts - Do keep the interface dark, quiet, and spacious. - Do reserve `#0065FF` for the most important calls to action and key brand marks. - Do use Space Grotesk for hero-level statements and Inter for all utility and body text. - Do keep borders subtle and shadows absent unless there is a strong functional reason. - Don't introduce bright secondary accent colors that compete with the primary blue. - Don't use large radii, heavy gradients, or glassmorphism effects. - Don't make body text too small or too low-contrast; readability matters in a dark enterprise UI. - Don't overcrowd the layout with dense cards or multi-color UI treatments.