---
version: alpha
name: Reboot Studio
description: Barcelona studio minimalism — Inter on a near-white canvas with soft #232323 ink, generous rounded-2xl cards, and a vibrant electric-blue-to-warm-accent palette held back for moments of craft. Quiet chrome, loud detail.

colors:
  # Canvas + ink
  background: "#fcfcfc"
  surface: "#ffffff"
  surface-soft: "#f5f5f5"
  ink: "#232323"
  ink-strong: "#151515"
  ink-secondary: "#666666"
  ink-muted: "#c8c8c8"

  # Accent palette — used sparingly for craft moments
  primary: "#2b33ff"        # electric blue
  accent-blue: "#006aff"
  accent-indigo: "#1a2ff7"
  accent-cyan: "#00c8fb"
  accent-orange: "#f4a41b"
  accent-red: "#ef3313"
  accent-rust: "#a4341e"

  # Neutral scale
  gray-900: "#1f1f1f"
  gray-800: "#262626"
  gray-700: "#404040"
  gray-500: "#9ca3af"
  gray-300: "#e5e7eb"
  gray-100: "#f5f5f5"

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

  # Borders
  border: "#e5e7eb"
  border-strong: "#222326"

typography:
  display-hero:
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif"
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -2px
  display:
    fontFamily: "Inter, -apple-system, Helvetica, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -1.2px
  heading:
    fontFamily: "Inter, -apple-system, Helvetica, Arial, sans-serif"
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.8px
  sub-heading:
    fontFamily: "Inter, -apple-system, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, -apple-system, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, -apple-system, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, -apple-system, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  label:
    fontFamily: "Inter, -apple-system, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, -apple-system, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  mono-caption:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 80px
  5xl: 128px

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

components:
  # Primary dark CTA
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.ink-strong}"
    textColor: "{colors.on-ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  # Electric-blue accent CTA
  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  # Secondary outline
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.border}"

  # Pill tag / discipline label
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  # Portfolio / content card
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.2xl}"
    padding: 24px
    borderColor: "{colors.border}"

  # Media / image card — top-rounded, generous
  card-media:
    backgroundColor: "{colors.surface-soft}"
    rounded: "{rounded.2xl}"
    padding: 0px
    borderColor: "{colors.border}"

  # Input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 10px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.primary}"

  # Top nav
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body-medium}"
    padding: 16px 24px
    borderColor: "{colors.border}"

  # Avatar — circular team face
  avatar:
    backgroundColor: "{colors.surface-soft}"
    rounded: "{rounded.pill}"
    width: 64px
    height: 64px
    borderColor: "{colors.surface}"
---

# Reboot Studio Design System

## Overview

Reboot Studio is a Barcelona design-and-engineering studio that builds "world-class marketing sites," and its own site is the proof of work — a near-white canvas (`{colors.background}`) carrying soft, almost-black ink (`{colors.ink}`) set entirely in Inter. The aesthetic is restrained to the point of confidence: the chrome stays quiet so the craft can be loud. There is no decoration competing for attention, only generous whitespace, large rounded media, and type that gets out of the way of the work being shown.

The ink is the first tell. Reboot never reaches for pure black; body and headings sit at `{colors.ink}` (#232323), a warm near-black that reads softer than #000 and pairs with a muted `{colors.ink-muted}` (#c8c8c8) for the de-emphasized words in their signature "fade-in sentence" hero. That low-contrast secondary is a deliberate move — copy assembles itself word by word from muted gray to full ink, so contrast itself becomes the animation.

Color is held in reserve. The working palette is grayscale, and the vibrant set — electric blue (`{colors.primary}`), orange (`{colors.accent-orange}`), red (`{colors.accent-red}`), cyan (`{colors.accent-cyan}`) — appears only at moments of craft: an accent CTA, a discipline marker, a hover. The radii run large and soft (`rounded-2xl` / 24px on cards and media is the house default), giving everything a friendly, tactile roundness that offsets the seriousness of the monochrome.

**Key Characteristics:**
- Inter everywhere, with tight negative tracking at display sizes (-1.2px to -2px)
- Soft warm near-black ink (`{colors.ink}` #232323), never pure black
- Muted-gray secondary ink (`{colors.ink-muted}`) for the fade-in word reveal
- Near-white `{colors.background}` (#fcfcfc) canvas — barely off pure white
- Vibrant accent palette (blue/orange/red/cyan) held back for craft moments only
- Large, soft `{rounded.2xl}` (24px) on cards and media — friendly roundness
- Pill-shaped CTAs and tags throughout
- Circular team avatars with white rings and hover-reveal labels

## Colors

### Canvas & Ink
- **Background** (`{colors.background}`): The near-white page canvas, a hair off pure white.
- **Surface** (`{colors.surface}`): Pure white for cards and elevated panels.
- **Surface Soft** (`{colors.surface-soft}`): #f5f5f5 fill for media wells and avatar backgrounds.
- **Ink** (`{colors.ink}`): Primary text — warm near-black, never #000.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): The faded word state in the hero reveal.

### Accent Palette (used sparingly)
- **Primary / Electric Blue** (`{colors.primary}`): The signature accent CTA and highlight.
- **Accent Blue** (`{colors.accent-blue}`): Secondary blue for links/marks.
- **Accent Orange** (`{colors.accent-orange}`): Warm craft accent.
- **Accent Red** (`{colors.accent-red}`): High-energy mark.
- **Accent Cyan** (`{colors.accent-cyan}`): Cool craft accent.

### Neutral Scale
- **Gray 900** (`{colors.gray-900}`): Deepest UI gray.
- **Gray 500** (`{colors.gray-500}`): Tertiary / placeholder text.
- **Gray 300** (`{colors.gray-300}`): Borders and dividers.
- **Border** (`{colors.border}`): Card outlines, hairline separators.

## Typography

### Font Family
- **Primary**: `Inter`, with fallbacks `-apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif`
- **Monospace**: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace` — for the occasional technical caption.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 64px hero — the fade-in sentence |
| `display` | 40px section openers |
| `heading` | 30px section titles |
| `sub-heading` | Card and block headings |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-medium` | Nav, emphasized inline text |
| `label` | Buttons, strong labels |
| `caption` | Tags, metadata |
| `mono-caption` | Technical captions |

### Principles
- **Compression at scale**: Inter tightens to -2px at hero size, relaxing to neutral by body — headlines feel engineered, body reads easy.
- **Contrast as motion**: The hero assembles word by word from `{colors.ink-muted}` to `{colors.ink}`; the reveal IS the typography.
- **Two weights do the work**: 400 for reading, 500–600 for everything that needs to announce itself. No 700 in chrome.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large jumps to `{spacing.4xl}` (80px) and `{spacing.5xl}` (128px) for section rhythm.

### Grid & Container
- Centered single-column hero with very generous top padding
- Asymmetric editorial blocks — text columns with inline rounded media (`aspect-video`, `rounded-2xl`)
- Discipline sections laid out horizontally (Design, Engineering, Branding)

### Whitespace Philosophy
- **Room to breathe**: Massive vertical gaps (`{spacing.4xl}`–`{spacing.5xl}`) separate sections; whitespace carries the calm.
- **Soft over hard**: Large radii and hairline `{colors.border}` lines do the dividing — never heavy rules.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow | Page background, text |
| Hairline | `1px solid {colors.border}` | Cards, inputs, nav |
| Soft lift | `0 8px 24px rgba(0,0,0,0.06)` | Hover on media cards |
| Hover float | `translateY(-6px)` transition | Avatars and interactive media |

**Shadow Philosophy**: Depth is whisper-level. Most separation is hairline border plus radius; shadows only appear on hover, where media cards lift gently with a cubic-bezier ease. Motion (translate, fade, scale) carries more of the depth language than static shadow.

## Shapes

| Token | Value | Use |
|---|---|---|
| `xs` | 4px | Tiny chips |
| `sm` | 6px | Small controls |
| `md` | 8px | Inputs, list items |
| `lg` | 12px | Inputs, small cards |
| `xl` | 16px | Cards |
| `2xl` | 24px | Media wells, primary cards — the house default |
| `pill` | 9999px | Buttons, tags, avatars |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Near-black ink fill, white text, pill radius.
- **`button-accent`** — Electric-blue (`{colors.primary}`) fill for the one loud CTA.
- **`button-secondary`** — White, hairline border, pill radius.

### Cards
- **`card`** — White surface, `{rounded.2xl}`, hairline border.
- **`card-media`** — Soft-gray media well, large radius, hover lift.

### Pills & Badges
- **`badge`** — Soft-gray pill with secondary-ink text for discipline tags.

### Inputs
- **`input`** — White, hairline border, `{rounded.lg}`; focus brings the electric-blue border.

### Navigation
- **`nav-bar`** — Near-white sticky header, Inter 16px medium, hairline bottom border.

### Distinctive Components
- **Fade-in sentence hero**: Words animate from `{colors.ink-muted}` to `{colors.ink}` in sequence — the studio's signature.
- **Avatar stack**: Overlapping circular team faces with white rings; a black pill label reveals names/roles on hover.

## Do's and Don'ts

### Do
- Use `{colors.ink}` (#232323), not pure black, for all text
- Keep the working palette grayscale; spend accents one at a time
- Reach for `{rounded.2xl}` on cards and media by default
- Use pill radius on buttons, tags, and avatars
- Let motion and whitespace, not heavy shadow, carry depth

### Don't
- Don't use #000 for body text — the warm near-black is the identity
- Don't scatter multiple vibrant accents in one view
- Don't use sharp corners on media or primary cards
- Don't add heavy borders or strong shadows to the calm chrome
- Don't set `{colors.primary}` as a background for text-heavy surfaces — it's a CTA/highlight, not a canvas

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Single column, hero scales down, inline media stacks |
| Tablet | 640–1024px | Two-column editorial blocks begin |
| Desktop | 1024–1280px | Full asymmetric layout, inline media floats beside text |
| Large | >1280px | Centered, generous side margins |

### Collapsing Strategy
- Hero: 64px → scales down, keeps proportional negative tracking
- Inline media: floats beside copy on desktop → stacks full-width on mobile
- Discipline sections: horizontal → vertical stack
- Avatar stack: maintains overlap; hover label becomes tap-reveal on touch

---

## Agent Prompt Guide

### Quick Color Reference
- Primary CTA: near-black `{colors.ink}` / electric-blue accent `{colors.primary}`
- Background: near-white `{colors.background}`
- Heading + body text: `{colors.ink}`
- Faded/secondary text: `{colors.ink-muted}`
- Border: `1px solid {colors.border}`

### Example Component Prompts
- "Hero on near-white `{colors.background}`. Headline 64px Inter weight 600, line-height 1.05, letter-spacing -2px. Animate words from `{colors.ink-muted}` to `{colors.ink}` in sequence."
- "Media card: soft-gray `{colors.surface-soft}` well, `{rounded.2xl}` (24px), hairline `{colors.border}`. On hover lift with translateY(-6px) and a whisper shadow."
- "Pill CTA: `{colors.ink}` fill, white text, 9999px radius, 12px 24px padding, Inter 14px weight 600. Accent variant uses `{colors.primary}` fill."
- "Avatar stack: 64px circular faces, `{colors.surface}` 4px ring, overlapping -12px. Black pill label reveals name + role on hover."

### Iteration Guide
1. Warm near-black `{colors.ink}` over pure black — always
2. Grayscale by default; one vibrant accent at a time
3. `{rounded.2xl}` on media/cards, pill on controls
4. Depth from motion + whitespace, not shadow
5. Two weights: 400 reads, 600 announces

---

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