# Zeuxinnovation Design System

> High-contrast brutalist minimalism defined by massive Inter headlines, a strict monochrome palette, and expansive white space.

**Source:** https://zeuxinnovation.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Zeuxinnovation utilizes a "monochrome-heavy" design system where visual impact is derived from typographic scale rather than color. The canvas is pure white `#ffffff` with primary actions and text in absolute black `#000000`. Headlines are set in Inter Bold at extreme scales (up to 144px), often featuring negative letter-spacing (-7.2px) to create a dense, architectural feel. The system avoids shadows and rounded corners, opting for sharp 0px radii and 1px borders to maintain a structural, "blueprint" aesthetic.

## Signature DNA
1. **Typographic Brutalism** (Massive Inter Bold headlines at 10vw or 144px with aggressive negative tracking (-5% to -7%) to create interlocking letterforms. Observed on Homepage and About pages.)
2. **Absolute Monochrome** (A binary color system of `#000000` and `#ffffff` with no secondary brand colors, using grayscale only for tertiary metadata. Observed across all analyzed pages.)
3. **Sharp Geometry** (Total rejection of border-radii (0px) for all structural elements and primary buttons, creating a rigid, professional grid. Observed on all CTA blocks and section containers.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
| :--- | :--- | :--- | :--- | :--- |
| None | N/A | N/A | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--color-white` | `#ffffff` | Page background, button text, surface | 236 | 1 | CSS Variable |
| `--color-black` | `#000000` | Primary text, button background, borders | 184 | 1 | CSS Variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `decorative-gray` | `#e6e6e6` | Subtle borders (decorative_only) | 13 | 0.9 | Computed Style |

### Semantic
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `error` | `#ff0000` | 404 Icon / Error states | 1 | 0.8 | Screenshot (404 page) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Inter | 100, 300, 400, 500, 700 | All UI, Headings, Body | Inter (Google Fonts) | SIL Open Font |
| ui-monospace | 400 | Metadata, Mono labels | JetBrains Mono | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `display-mega` | 144px | 115.2px | -7.2px | 700 | Hero H1 | `h1.text-[10vw]` |
| `display-xl` | 96px | 96px | -4.8px | 700 | Section Display | `span.text-6xl` |
| `display-lg` | 72px | 72px | -3.6px | 700 | Section Headers | `h2.text-7xl` |
| `heading-md` | 30px | 36px | -0.75px | 700 | Card Titles | `h3.text-3xl` |
| `heading-sm` | 24px | 32px | -0.6px | 700 | Sub-sections | `h3.text-2xl` |
| `body-lg` | 18px | 29.25px | normal | 300 | Lead Paragraphs | `p.text-lg` |
| `body-md` | 16px | 24px | normal | 400 | Default Body | `section.pt-24` |
| `mono-sm` | 12px | 16px | 1.2px | 400 | Metadata/Tags | `span.text-xs.font-mono` |

### Principles
1. **Boldness is the Default:** Headings almost exclusively use weight 700.
2. **Negative Tracking on Display:** Any type over 30px requires negative letter-spacing to maintain visual density.
3. **Monospace for Utility:** Technical metadata or small labels use `ui-monospace` with wide tracking (1.2px to 1.4px).

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `space-xs` | 8px | 57 |
| `space-sm` | 16px | 84 |
| `space-md` | 24px | 36 |
| `space-lg` | 32px | 17 |
| `space-xl` | 48px | 6 |
| `space-section` | 96px | 4 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `radius-none` | 0px | All buttons, cards, and containers | 597 occurrences |
| `radius-pill` | 9999px | Specific decorative tags (rare) | 20 occurrences |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `flat` | none | All UI elements | No shadows captured in source |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Start a Project")
**Pages observed:** Homepage, About
**Spec:** Background: `#000000` | Text: `#ffffff` | Radius: `0px` | Padding: `18px 24px` | Typography: `Inter 700 18px`
**States observed:** Default: Captured | Hover: Not captured

#### Secondary Button
**Role:** Alternative action (e.g., "Watch Showreel")
**Pages observed:** Homepage
**Spec:** Background: `transparent` | Text: `#000000` | Border: `1px solid #000000` | Radius: `0px` | Typography: `Inter 700 18px`
**States observed:** Default: Captured | Hover: Not captured

### Tier 2: Patterns

#### Section Header
**Role:** Introducing major content blocks
**Pages observed:** Homepage, Pricing
**Spec:** Text: `#000000` | Typography: `Inter 700 72px` | Border-Top: `1px solid #000000` | Padding-Top: `32px`
**States observed:** Static

#### Mono Tag
**Role:** Metadata and small labels
**Pages observed:** Homepage, About
**Spec:** Text: `#000000` | Typography: `ui-monospace 400 12px` | Letter-spacing: `1.2px`
**States observed:** Static

### Tier 3: Surface-specific

#### Dark Surface Block
**Role:** High-contrast footer or emphasis section
**Pages observed:** Homepage, About
**Spec:** Background: `#000000` | Text: `#ffffff` | Padding: `48px` | Radius: `0px`
**States observed:** Static

#### Content Card
**Role:** Portfolio or service display
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` | Border: `1px solid #e6e6e6` | Radius: `0px` | Typography: `Inter 700 30px`
**States observed:** Default: Captured | Hover: Translate-X (2px)

## Layout
| Property | Value |
| :--- | :--- |
| Max content width | 1440px |
| Section Padding (Desktop) | 96px |
| Grid | 12-column fluid |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Headlines scale from `10vw` to `text-4xl`; padding reduces to 16px-24px. |
| Desktop | 1440px | Full 12-column layout; massive display typography enabled. |

## Imagery & decoration
- **Monochrome Photography:** Images are typically grayscale or high-contrast to match the UI.
- **Structural Lines:** Uses 1px horizontal rules to separate sections.
- **Avoids:** Gradients, soft shadows, rounded corners, and illustrative icons.

## Do's
- Use `#000000` for all primary interactive elements.
- Set H1 headlines to `Inter 700` with at least `-3.6px` letter-spacing.
- Maintain `0px` border-radius on all structural components.
- Use `ui-monospace` for all technical or secondary metadata.
- Ensure 96px of vertical spacing between major sections.

## Don'ts
- **Wrong:** Using a blue primary color for a button. **Right:** Use `#000000`. **Reason:** This is a monochrome parent brand; saturated colors are prohibited.
- **Wrong:** Applying a `border-radius: 8px` to a card. **Right:** Use `0px`. **Reason:** The brand identity is built on sharp, brutalist geometry.
- **Wrong:** Using `Inter 400` for a section heading. **Right:** Use `Inter 700`. **Reason:** Visual hierarchy depends on extreme weight and scale.
- Do not use drop shadows to create depth; use borders or background shifts.
- Do not use centered text for long-form body copy; stick to left-aligned grids.

## Similar brands
- Huge Inc
- Design Within Reach
- Minimalissimo
- Hypebeast (Web)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --font-main: 'Inter', sans-serif;
  --font-mono: 'ui-monospace', monospace;
  --radius-none: 0px;
  --space-base: 8px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #000000;
  --color-canvas: #ffffff;
  --font-inter: "Inter";
  --tracking-tighter: -0.05em;
  --radius-sharp: 0px;
}
```

## Agent prompt examples
- "Generate a hero section for Zeuxinnovation using Inter Bold at 144px, black text on a white background, with a sharp-edged black button."
- "Create a pricing card with a 1px black border, 0px border-radius, and metadata labels in 12px ui-monospace with 1.2px letter spacing."
- "Design a footer with a solid black background, white Inter text, and no rounded corners."

## Known gaps
- Hover and Active states for buttons were not captured in the automated crawl.
- Form input validation states (success/warning) are missing from the evidence.
- Tablet-specific breakpoints were not explicitly sampled.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://zeuxinnovation.com | 1440px | 2026-06-06 |
| About | https://zeuxinnovation.com/about | 1440px | 2026-06-06 |
| Mobile Home | https://zeuxinnovation.com | 390px | 2026-06-06 |