---
version: alpha
name: Verteal
description: Embedded-agency minimalism — near-black canvas with off-white ink, a single geometric sans, near-zero radii for a sharp modern edge, high-contrast inverted buttons, and image-forward portfolio cards separated by whisper-thin gray dividers rather than heavy chrome.
colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#121212"
  surface-soft: "#1a1a1a"
  ink: "#fafafa"
  ink-pure: "#ffffff"

  # Secondary / muted text
  ink-secondary: "#a3a3a3"
  ink-muted: "#737373"

  # Accent — inverted light action
  primary: "#fafafa"
  primary-hover: "#e5e5e5"

  # Borders + dividers
  border: "#262626"
  border-soft: "#1f1f1f"

  # On-color
  on-primary: "#0a0a0a"
  on-ink: "#0a0a0a"

  # Neutral scale
  gray-900: "#0a0a0a"
  gray-800: "#171717"
  gray-700: "#262626"
  gray-500: "#737373"
  gray-400: "#a3a3a3"
  gray-100: "#e5e5e5"

typography:
  display-hero:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -2.56px
  section-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -1.76px
  sub-heading:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.84px
  card-title:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.30
    letterSpacing: -0.66px
  body-large:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: -0.2px
  body:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0px
  label-mono:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.30
    letterSpacing: 0.6px
  caption:
    fontFamily: "Inter, Helvetica Neue, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0.3px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 120px

rounded:
  none: 0px
  micro: 2px
  xs: 4px
  sm: 6px
  md: 8px
  lg: 12px
  pill: 9999px

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

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 12px 22px
    borderColor: "{colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.xs}"
    padding: 12px 22px
    borderColor: "{colors.gray-500}"

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

  card-portfolio:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 0px
    borderColor: "{colors.border-soft}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.xs}"
    padding: 10px 14px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 18px 24px
    borderColor: "{colors.border-soft}"

  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
    borderColor: "{colors.border}"
---

# Verteal Design System

## Overview

Verteal is a Porto-based embedded digital agency, and its site reads exactly like the pitch: minimal, confident, substance over decoration. The canvas is near-black (`{colors.background}`) with off-white ink (`{colors.ink}`), a high-contrast dark mode that lets portfolio imagery and bold type carry the page. There is no color noise — the entire palette is achromatic, so the work being showcased provides the only chroma on screen.

Typography is the load-bearing element. A single geometric sans (Inter-class) runs the whole hierarchy, with display headlines pushed large and tight — negative letter-spacing around -2.5px at hero size compresses the words into a dense, engineered block. Body copy relaxes to neutral tracking and a comfortable 1.6 line-height, keeping long-form reading easy against the dark field. Weight does the talking: 700 for hero, 600 for section and card titles, 400 for body, 500 for interactive labels.

The structural signature is restraint in the chrome. Radii sit near zero — 4px on buttons and inputs, 8–12px on cards — giving a sharp, modern, almost editorial edge rather than the soft pill language of consumer SaaS. Separation between sections and cards comes from whisper-thin gray dividers (`{colors.border}` / `{colors.border-soft}`) rather than fills or shadows. The page feels built out of clean lines and air.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) with off-white ink (`{colors.ink}`) — high-contrast dark mode
- Fully achromatic chrome; portfolio imagery supplies all color
- Single geometric sans (Inter-class) across the whole hierarchy
- Compressed display type — ~-2.5px tracking at hero, relaxing as size drops
- Near-zero radii (4px buttons/inputs) for a sharp editorial edge
- Inverted high-contrast buttons — light fill, dark text
- Whisper-thin gray dividers instead of heavy borders or shadows
- Image-forward portfolio cards with minimal surrounding chrome

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): Near-black page canvas.
- **Surface** (`{colors.surface}`): Slightly lifted card/panel fill.
- **Surface Soft** (`{colors.surface-soft}`): Tertiary fill for badges, insets.
- **Ink** (`{colors.ink}`): Primary off-white text and headings.
- **Ink Pure** (`{colors.ink-pure}`): Pure white for max-emphasis moments.

### Secondary Text
- **Ink Secondary** (`{colors.ink-secondary}`): Description and supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, metadata, disabled text.

### Accent (Inverted Action)
- **Primary** (`{colors.primary}`): Light fill for primary buttons — inverted against the dark canvas.
- **Primary Hover** (`{colors.primary-hover}`): Slightly dimmed hover state.

### Borders & Dividers
- **Border** (`{colors.border}`): Card outlines, input borders, section rules.
- **Border Soft** (`{colors.border-soft}`): Faintest dividers between sections.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Deepest canvas tone.
- **Gray 700** (`{colors.gray-700}`): Borders and hairlines.
- **Gray 500** (`{colors.gray-500}`): Muted text, hover borders.
- **Gray 400** (`{colors.gray-400}`): Secondary text.
- **Gray 100** (`{colors.gray-100}`): Near-white, hover fills on light elements.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks: `Helvetica Neue, Arial, sans-serif`
- One family across the whole system — no serif, no mono companion. Identity comes from scale and tracking, not typeface mixing.

### 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` | 64px hero — compressed, bold billboard line |
| `section-heading` | Section titles |
| `sub-heading` | Sub-sections, panel headers |
| `card-title` | Portfolio / feature card titles |
| `body-large` | Lead paragraphs, intros |
| `body` | Standard reading text |
| `body-small` | Compact UI text, captions in cards |
| `button-ui` | Buttons and nav links |
| `label-mono` | Uppercase-feel labels with slight tracking |
| `caption` | Metadata, tags |

### Principles
- **Compression as identity**: hero type runs large with ~-2.5px tracking, relaxing toward neutral as size decreases.
- **One family, strict weights**: 700 hero, 600 headings, 500 interactive, 400 body.
- **Readable dark body**: 1.6 line-height keeps off-white body copy comfortable on near-black.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px; section gaps jump to `{spacing.3xl}`–`{spacing.4xl}`.

### Grid & Container
- Max content width ~1200px, centered
- Hero: large single-column statement with generous top padding
- Portfolio: 2-column image-forward card grid
- Section separation via 1px `{colors.border-soft}` rules

### Whitespace Philosophy
- **Air as structure**: large vertical padding between sections; the dark field reads as calm, not heavy.
- **Compressed text, expanded space**: tight headlines counterbalanced by generous surrounding space.
- **Minimal chrome**: depth comes from thin borders and surface lifts, not shadows.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No border, canvas fill | Page background, text blocks |
| Hairline (Level 1) | 1px `{colors.border-soft}` | Section dividers |
| Outlined (Level 2) | `{colors.surface}` + 1px `{colors.border}` | Cards, inputs, panels |
| Lifted (Level 3) | `{colors.surface-soft}` + 1px `{colors.border}` | Badges, nested insets |
| Focus (Accessibility) | 2px `{colors.ink}` outline | Keyboard focus on interactive elements |

**Depth Philosophy**: Verteal avoids shadows almost entirely. Elevation is communicated by stepping the surface a few percent lighter (`{colors.surface}` → `{colors.surface-soft}`) and drawing a single thin border. The effect is flat, sharp, and editorial.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed media, sharp edges |
| `micro` | 2px | Tiny inline elements |
| `xs` | 4px | Buttons, inputs — the default action radius |
| `sm` | 6px | Small containers |
| `md` | 8px | Cards, panels |
| `lg` | 12px | Portfolio / image cards |
| `pill` | 9999px | Badges, tags |

## Components

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

### Buttons
- **`button-primary`** — light fill (`{colors.primary}`), dark text, 4px radius. The inverted CTA.
- **`button-secondary`** — dark surface with a 1px `{colors.border}` outline.

### Cards
- **`card`** — lifted surface with thin border, 8px radius.
- **`card-portfolio`** — image-forward, 12px radius, near-zero padding so media fills edge to edge.

### Inputs
- **`input`** — dark surface, thin border, 4px radius. Focus swaps the border to `{colors.ink}`.

### Navigation
- **`nav-bar`** — dark sticky header, off-white links, hairline bottom border.

### Badges
- **`badge`** — soft surface, secondary ink, full pill, slight letter-spacing for a labeled feel.

## Do's and Don'ts

### Do
- Keep the canvas near-black and the chrome achromatic — let portfolio imagery be the only color
- Use compressed negative tracking on display type (~-2.5px at hero)
- Use near-zero radii (4px) on buttons and inputs for the sharp edge
- Invert primary buttons — light fill, dark text
- Separate sections with thin `{colors.border-soft}` rules, not shadows
- Lift surfaces a few percent for depth instead of drop shadows

### Don't
- Don't introduce brand color into UI chrome — the work supplies the color
- Don't use pill radius on buttons — pills are for badges/tags only
- Don't add drop shadows; depth is surface-step + hairline border
- Don't mix typefaces — one geometric sans carries everything
- Don't loosen hero tracking to positive values
- Don't drop body line-height below ~1.5 on the dark field

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down, padding tightens |
| Tablet | 600–1024px | 2-column portfolio grid begins |
| Desktop | 1024–1200px | Standard layout |
| Large Desktop | >1200px | Centered, generous margins |

### Collapsing Strategy
- Hero: 64px → scales down, tracking stays proportionally tight
- Navigation: horizontal links → hamburger menu
- Portfolio: 2-column → single column
- Section spacing: 120px → ~64px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Near-black `{colors.background}`
- Heading text: Off-white `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Primary CTA: Light fill `{colors.primary}`, dark text `{colors.on-primary}`
- Border: `{colors.border}`
- Focus ring: `{colors.ink}`

### Example Component Prompts
- "Create a hero on near-black `{colors.background}`. Headline 64px Inter weight 700, line-height 1.05, letter-spacing -2.56px, color `{colors.ink}`. Subtitle 20px weight 400, `{colors.ink-secondary}`. Inverted CTA: `{colors.primary}` fill, `{colors.on-primary}` text, 4px radius, 12px 22px padding; plus a bordered ghost button (1px `{colors.border}`)."
- "Design a portfolio card: `{colors.surface}` fill, 12px radius, 1px `{colors.border-soft}`, image edge-to-edge at top. Title 22px Inter weight 600, letter-spacing -0.66px. Caption 14px `{colors.ink-secondary}`."
- "Build a badge: `{colors.surface-soft}` fill, `{colors.ink-secondary}` text, full pill, 4px 12px padding, 13px weight 500 with 0.6px tracking."

### Iteration Guide
1. Keep all chrome achromatic — color comes only from showcased work
2. Tracking scales with size: -2.56px at 64px, -1.76px at 44px, neutral at body
3. Four weights only: 700 (hero), 600 (headings), 500 (interactive), 400 (body)
4. Radius is near-zero — 4px buttons/inputs, 8–12px cards, pill only for badges
5. Depth = step the surface lighter + one hairline border, never a shadow

---

## 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 Verteal. Brand names and trademarks belong to their respective owners.