# Reboot Studio · Design system migration spec

> Source: https://reboot.studio  ·  Curated by OpenDesign  ·  en

> Worth including as a prime example of a modern, high-end agency portfolio that uses restrained design to convey premium quality and focus.

## 1. Identity DNA

Reboot Studio operates with the precision of a high-end bespoke atelier for software founders. Its design system is the architectural blueprint for that space: a rigorous framework of monochrome contrast, typographic weight, and deliberate emptiness that communicates premium craft without ornament. Every element serves a single, confident statement.

**One-liner:** A premium agency portfolio for building marketing sites for software startups.
**Keywords:** startup-focused · minimal · bold · agency · premium
**Analogy:** A high-end bespoke studio for software founders.

## 2. Color

Color is not applied; it is the absence of application. The system enforces a strict monochrome palette, using only white, near-black, and calibrated grays to let typography and layout carry all communicative weight. This restraint ensures the focus remains entirely on the message and its medium.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-soft` | `#f5f5f5` | card background |
| `--ink` | `#232323` | body text |
| `--ink-soft` | `rgba(35, 35, 35, 0.4)` | secondary text |
| `--muted` | `#c8c8c8` | placeholder |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** Strict monochrome palette with strong typographic contrast.

The principle is chromatic discipline: a limited grayscale spectrum creates professional high contrast, proving that visual interest arises from structure, not hue.

## 3. Typography

The typographic voice is set in Inter, a humanist sans-serif chosen for its clarity and neutrality. Its treatment is the system's core expressive tool: large display sizes receive tight, negative letter-spacing to create dense, impactful headlines, while primary body text holds a strict 500 font-weight for consistent, confident readability.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 40px | 1.6 | 500 | -1px | Primary large headings and hero text |
| body | 16px | 1.8 | 500 | 0px | Secondary body text |
| caption | 14px | 1.6 | 500 | 0px | Small UI elements and navigation |

**Type rules:**
- Use Inter or a similar humanist sans-serif
- Apply tight negative letter-spacing to large display sizes
- Maintain a strict 500 font-weight for primary text elements

## 4. Spacing

Vertical rhythm is established through generous, calculated padding—observed at 128px—that grants each component room to breathe and creates a measured, unhurried flow.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing with large padding blocks (128px top padding observed).

## 5. Surfaces

Depth is suggested, not declared. Surfaces are defined by minimal, layered shadows and 1px solid borders using near-transparent blacks or light grays, maintaining a clean, flat aesthetic that never competes with content.

- **Radius:** sm 4px · md 16px · lg 16px · pill 9999px
- **Shadows:**
  - 0px 1px 1px -0.5px rgba(0,0,0,0.06)
  - 0px 10px 15px -3px rgba(0,0,0,0.1)
  - 0px 0px 0px 1px rgba(0,0,0,0.05)
- **Borders:** Solid 1px borders using rgba(0, 0, 0, 0.1) or rgb(229, 231, 235).

## 6. Layout

The layout skeleton is a centered content block, constrained to a maximum width and surrounded by extensive whitespace. This fundamental structure immediately establishes hierarchy and focus, framing typography against a vast, clean field.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered content block with a maximum width, surrounded by extensive whitespace.

## 7. Motion & Interaction

Motion is functional and refined, used exclusively to guide attention and confirm interaction. Animations are smooth fade-ins and subtle shifts, standardized at 0.5s with ease timing, avoiding any expressive or decorative flourish.

- **Durations:** micro 150ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth fade-ins and transitions for text blocks
  - Subtle scaling or color shifts on interactive elements

- **Hover:** Subtle opacity or color changes on interactive elements.
- **Click:** Immediate visual response with smooth transition.
- **Transition:** Standardized 0.5s ease for primary transitions.
- **Keyboard:** Basic focus states inferred from standard browser defaults.

## 8. Voice & Don'ts

The editorial voice matches the visual system: confident, professional, and direct. Headlines are declarative statements, calls to action are simple imperatives, and the language avoids jargon and aggressive sales rhetoric in favor of straightforward clarity.

- **Tone:** Confident, professional, and straightforward.
- **Headline style:** Direct and declarative statements.
- **CTA style:** Simple and action-oriented (e.g., 'See work').
- **Avoid:** Overly complex jargon / Aggressive sales language / Unnecessary decorative elements

### Don'ts
- ❌ don't use multiple accent colors — screenshot shows a strict black, white, and gray palette.
- ❌ don't use decorative serif fonts — screenshot shows a consistent use of a humanist sans-serif.
- ❌ don't create crowded layouts — screenshot shows expansive whitespace and a centered content column.
- ❌ don't use heavy background textures — screenshot shows flat, solid white backgrounds.
- ❌ don't use complex drop shadows on all elements — screenshot shows minimal, subtle shadows.
- ❌ don't use all-caps for body copy — screenshot shows standard sentence case and lowercase.

What is deliberately excluded is definitive: no accent colors, no decorative serifs, no crowded layouts, no heavy textures, and no all-caps body copy, ensuring the system's purity and premium focus.

## System Prompt (paste into AI tool)

```
This is a premium agency portfolio for a studio building marketing sites for software startups. The design DNA is defined by a strict monochrome palette (white, black, and grays), large bold typography using a humanist sans-serif, and a layout that prioritizes generous whitespace and centered content. Key hex colors include white (#ffffff), near-black (#232323), and a light gray (#f5f5f5). Critical don'ts: avoid using decorative fonts, do not clutter the layout with unnecessary elements, and never use bright accent colors that would break the professional, restrained aesthetic. The overall tone is confident and understated.
```