---
version: alpha
name: Maben
description: Editorial Swiss-grotesque minimalism for a commercial builder — ABC Repro and ABC Repro Mono on a warm off-white canvas, zero border-radius everywhere, near-black ink, and a single electric orange accent. Uppercase mono labels, tight negative tracking on display sizes, and a structural grid where photography and whitespace carry the weight.

colors:
  # Canvas + ink
  background: "#f8f8f2"
  surface: "#ffffff"
  surface-soft: "#d8d5c9"
  ink: "#292728"
  ink-pure: "#000000"

  # Accent
  primary: "#ff5226"

  # Secondary brand hues (used sparingly in section theming)
  blue: "#3a3d5c"
  green: "#3d5342"
  yellow: "#f8ae36"
  red-1: "#832223"
  red-2: "#6d0000"
  red-3: "#490b0b"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#f8f8f2"

  # Neutral helpers
  grey: "#d8d5c9"
  white: "#ffffff"

typography:
  display-hero:
    fontFamily: "ABC Repro, Arial, sans-serif"
    fontSize: 96px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -2.4px
  display-large:
    fontFamily: "ABC Repro, Arial, sans-serif"
    fontSize: 52px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -1.3px
  section-heading:
    fontFamily: "ABC Repro, Arial, sans-serif"
    fontSize: 42px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -1.05px
  sub-heading:
    fontFamily: "ABC Repro, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.5px
  card-title:
    fontFamily: "ABC Repro, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  body:
    fontFamily: "ABC Repro, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 0px
  body-medium:
    fontFamily: "ABC Repro, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  label-mono:
    fontFamily: "ABC Repro Mono, ui-monospace, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.3px
  caption-mono:
    fontFamily: "ABC Repro Mono, ui-monospace, Menlo, monospace"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.5px
  button-ui:
    fontFamily: "ABC Repro Mono, ui-monospace, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.5px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px

rounded:
  none: 0px
  sm: 0px
  md: 0px
  pill: 0px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px

  button-secondary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    borderColor: "{colors.ink}"

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    borderColor: "{colors.ink}"

  badge:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.caption-mono}"
    rounded: "{rounded.none}"
    padding: 4px 8px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 24px
    borderColor: "{colors.grey}"

  card-project:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    rounded: "{rounded.none}"
    padding: 0px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.ink}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    padding: 16px 24px
    borderColor: "{colors.grey}"
---

# Maben Design System

## Overview

Maben is a Melbourne commercial construction and interiors company, and its website refuses every cliché of the building trade. There are no hard-hat blues, no gradient hero overlays, no rounded "friendly" cards. Instead the site reads like an editorial design studio's portfolio: a warm off-white canvas (`{colors.background}`), near-black grotesque type (`{colors.ink}`), and a single jolt of electric orange (`{colors.primary}`) used like a highlighter. The result is confident and quiet — a builder presenting itself as a craft practice.

The typographic backbone is ABC Repro, Dinamo's reworked grotesque, paired with ABC Repro Mono. Repro carries the headlines and body with a neutral, slightly mechanical voice; the mono companion handles the small structural labels — section numbers, eyebrows, nav items, button text — almost always in uppercase. This sans/mono split is the system's signature: the mono italicizes the "documentation" layer of the page (indexes, metadata, captions) while Repro Sans does the talking. Display sizes climb to a billboard 96px with tight negative tracking (around -2.4px), so the largest headlines feel compressed and engineered rather than airy.

Everything is hard-edged. Border-radius is `0` across the entire stylesheet — buttons, inputs, image frames, cards. There are no shadows doing decorative work; separation comes from the grid, from generous whitespace, and from full-bleed project photography that sits flush inside its containers. The body carries a left padding rail (`64px` on desktop, `16px` on mobile) that nudges content off the edge and reinforces the magazine-margin feeling.

Color is deployed with restraint. Off-white and near-black do nearly all the work; orange marks the live, interactive, and emphatic moments. A small reserve of secondary brand hues (`{colors.blue}`, `{colors.green}`, `{colors.yellow}`, and a trio of deep reds) exists for section theming and project tagging, but they never crowd the chrome. The palette is warm-neutral, not sterile — `#f8f8f2` and `#292728` both lean slightly warm, which keeps the minimalism human.

**Key Characteristics:**
- ABC Repro grotesque for display + body, ABC Repro Mono for all small structural labels
- Uppercase mono eyebrows, nav, and button copy — the "documentation" voice
- Warm off-white canvas (`{colors.background}`) with near-black ink (`{colors.ink}`)
- Single electric orange accent (`{colors.primary}`) used sparingly for emphasis and interaction
- Zero border-radius everywhere — every edge is hard
- Negative letter-spacing at display sizes (~-2.4px at 96px), neutral tracking at body
- No decorative shadows; structure comes from grid, whitespace, and full-bleed photography
- Left-margin content rail that frames the page like a magazine spread

## Colors

### Primary
- **Off-White** (`{colors.background}`): The page canvas. Warm, paper-like, never pure white.
- **Maben Black** (`{colors.ink}`): Primary text, headings, dark buttons, dividers. Warm near-black, not `#000`.
- **Maben Orange** (`{colors.primary}`): The accent — links, active states, primary CTAs, emphasis marks. Used sparingly.

### Surfaces
- **White** (`{colors.surface}`): Card surfaces and inputs that lift off the off-white canvas.
- **Grey** (`{colors.surface-soft}` / `{colors.grey}`): Soft tonal surface and hairline dividers between sections.

### Secondary Brand Hues
- **Blue** (`{colors.blue}`): Deep slate-blue for section theming and tags.
- **Green** (`{colors.green}`): Muted forest green for section theming.
- **Yellow** (`{colors.yellow}`): Warm amber accent for highlights.
- **Reds** (`{colors.red-1}`, `{colors.red-2}`, `{colors.red-3}`): A descending oxblood scale for deep accent panels.

### On-Color
- **On Primary** (`{colors.on-primary}`): White text on orange CTAs.
- **On Ink** (`{colors.on-ink}`): Off-white text on the dark buttons and footer.

## Typography

### Font Family
- **Primary**: `ABC Repro`, with fallbacks: `Arial, sans-serif`
- **Monospace**: `ABC Repro Mono`, with fallbacks: `ui-monospace, Menlo, monospace`
- ABC Repro ships in Regular (400) and Medium (500); the mono is used at Regular. There is no light weight and no true bold in the system — emphasis comes from size, case, and the mono switch, not weight.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 96px billboard headline, maximum compression |
| `display-large` | 52px large statements |
| `section-heading` | 42px feature section titles |
| `sub-heading` | 32px sub-sections |
| `card-title` | 20px project / card titles (Medium) |
| `body` | 16px standard reading text |
| `body-medium` | 16px emphasized body |
| `label-mono` | 12px uppercase mono — nav, eyebrows, metadata |
| `caption-mono` | 10px mono captions, indices |
| `button-ui` | 12px mono uppercase button copy |

### Principles
- **Sans / mono duality**: Repro Sans for content, Repro Mono for structure (labels, nav, numbers, buttons). The mono is always small and usually uppercase.
- **Compression at the top**: Display sizes use ~-2.4px tracking; tracking relaxes to neutral by body size.
- **Two weights, strict roles**: 400 for almost everything, 500 (Medium) for card titles and emphasis. No 700.
- **Uppercase as a system, not decoration**: Eyebrows, nav, and CTAs are uppercase mono — the documentation layer of the page.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. The rhythm is an 8px-derived scale climbing to large `2xl`–`4xl` gaps (48–96px) for section separation.

### Grid & Container
- Content sits behind a persistent left rail (`64px` desktop / `16px` mobile body padding) — a magazine margin.
- Project showcases use a structured multi-column grid with full-bleed imagery flush to its frame.
- Generous max-width with edge-to-edge photography breaking the grid for impact.

### Whitespace Philosophy
- **Editorial calm**: Large vertical gaps between sections; whitespace and photography carry the composition.
- **Hard edges, soft warmth**: Zero radius everywhere is offset by the warm off-white/near-black palette so the minimalism never feels cold.
- **Orange as punctuation**: Color appears only where it earns attention — never as a background wash for chrome.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page background, text blocks, most sections |
| Hairline (Level 1) | 1px `{colors.grey}` divider | Section separation, nav underline |
| Outlined (Level 1b) | 1px `{colors.ink}` border | Inputs, ghost buttons, framed media |
| Focus | `{colors.primary}` outline | Keyboard focus on interactive elements |

**Shadow Philosophy**: Maben uses essentially no drop shadows. Depth is communicated through hard borders, hairline dividers, and the layering of full-bleed imagery against the off-white field. The system is flat by conviction — structure, not elevation.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything — the system default |
| `sm` | 0px | Buttons, inputs (kept square) |
| `md` | 0px | Cards, media frames |
| `pill` | 0px | Even badges are square |

Maben has no rounding. Every corner is a right angle; the brand's identity is partly in that uncompromising squareness.

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Orange fill, white text, square, 12px uppercase mono. Hovers to near-black.
- **`button-secondary`** — Solid near-black fill, off-white text, square.
- **`button-ghost`** — Off-white background, 1px `{colors.ink}` border, ink text.

### Badges
- **`badge`** — Square near-black chip, off-white 10px mono text. Used for tags and project metadata.

### Cards
- **`card`** — White surface lifting off the canvas, square corners, hairline grey border.
- **`card-project`** — Image-led project tile, no padding, full-bleed photography with a mono caption beneath.

### Inputs
- **`input`** — White surface, 1px ink border, square, 16px Repro body. Focus shifts the border to `{colors.primary}`.

### Navigation
- **`nav-bar`** — Off-white header, 12px uppercase mono links, hairline grey bottom border. Orange marks the active/hover item.

## Do's and Don'ts

### Do
- Use ABC Repro for content and ABC Repro Mono for all small structural labels
- Set every corner to `0` radius — squareness is the identity
- Keep ink near-black (`{colors.ink}`) and canvas warm off-white (`{colors.background}`) — not `#000`/`#fff`
- Use orange (`{colors.primary}`) only for interaction and emphasis
- Uppercase the mono eyebrows, nav, and button copy
- Apply negative letter-spacing at display sizes (~-2.4px at 96px)
- Let full-bleed photography and whitespace carry the layout

### Don't
- Don't round any corners — no pills, no soft cards
- Don't use drop shadows for decoration
- Don't flood the page with orange — it's punctuation, not a background
- Don't introduce a bold (700) weight — emphasis comes from size, case, and the mono switch
- Don't use pure black or pure white for the main ink/canvas pair
- Don't set body text in the mono — mono is for labels only

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, body rail drops to 16px, display sizes scale down |
| Tablet | 600–1024px | 2-column project grids, expanded margins |
| Desktop | 1024–1440px | Full grid, 64px left rail |
| Large Desktop | >1440px | Centered with generous margins, full-bleed imagery |

### Touch Targets
- Buttons use comfortable 12px×24px padding
- Nav links at 12px mono with adequate spacing
- Inputs at 16px body for legible typing

### Collapsing Strategy
- Hero: 96px → scales down, maintains negative tracking proportionally
- Navigation: horizontal mono links → menu toggle
- Project grids: multi-column → 2-column → single column
- Left content rail: 64px → 16px
- Section spacing: 96px → tighter on mobile

### Image Behavior
- Project photography stays full-bleed and square-framed at all sizes
- Images break the grid for impact on desktop, stack cleanly on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Maben Orange `{colors.primary}` with white text
- Background: Off-White `{colors.background}`
- Heading text: Maben Black `{colors.ink}`
- Body text: Maben Black `{colors.ink}`
- Divider: 1px `{colors.grey}`
- Accent / link / active: Maben Orange `{colors.primary}`
- Focus ring: Maben Orange `{colors.primary}`

### Example Component Prompts
- "Create a hero on off-white `{colors.background}`. Headline in ABC Repro 96px weight 400, line-height 1.05, letter-spacing -2.4px, color `{colors.ink}`. Eyebrow above it in ABC Repro Mono 12px uppercase. Square orange CTA (`{colors.primary}`, white text, 0 radius, 12px 24px padding, 12px mono uppercase)."
- "Design a project card: full-bleed square image, no radius, with an ABC Repro Mono 12px uppercase caption beneath in `{colors.ink}`. Title in ABC Repro 20px weight 500."
- "Build a nav bar: off-white header, ABC Repro Mono 12px uppercase links in `{colors.ink}`, hairline `{colors.grey}` bottom border, active item in `{colors.primary}`."
- "Create an input: white surface, 1px `{colors.ink}` border, 0 radius, 16px ABC Repro body. On focus, border becomes `{colors.primary}`."

### Iteration Guide
1. Radius is always 0 — never round anything
2. Mono = structure (labels/nav/buttons), Sans = content
3. Orange is punctuation — reach for `{colors.ink}` on `{colors.background}` first
4. Two weights only: 400 default, 500 for card titles/emphasis
5. Negative tracking scales with size: ~-2.4px at 96px, neutral by 16px
6. Warm near-black/off-white pair, never pure black or white

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Maben. Brand names and trademarks belong to their respective owners.