---
name: Reboot Studio
description: "Worth including as a prime example of a modern, high-end agency portfolio that uses restrained design to convey premium quality and focus."
version: alpha

colors:
  background: "#ffffff"
  primary: "#232323"
  secondary: "rgba(35, 35, 35, 0.4)"
  neutral: "#c8c8c8"
  bg-soft: "#f5f5f5"
  line: "rgba(0, 0, 0, 0.1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.6
    fontWeight: 500
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.8
    fontWeight: 500
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.6
    fontWeight: 500
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 16px
  lg: 16px
  pill: 9999px

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

---

## Overview

A premium agency portfolio for building marketing sites for software startups.

*A high-end bespoke studio for software founders.*

## Colors

Strict monochrome palette with strong typographic contrast.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#232323`)** — uses `ink` token
- **Secondary text (`rgba(35, 35, 35, 0.4)`)** — uses `ink-soft` token
- **Muted (`#c8c8c8`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0.1)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

*Rhythm:* Generous vertical spacing with large padding blocks (128px top padding observed).

## Elevation & Depth

- 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).

## Shapes

- `sm`: 4px
- `md`: 16px
- `lg`: 16px
- `pill`: 9999px

## Components

- **button:** Pill-shaped buttons with a dark background (#232323) or transparent with a subtle border.
- **card:** Not prominently featured in the provided views.
- **chip:** Small pill-shaped tags (e.g., 'Hiring · Web Designer') with a 1px border and rounded corners.
- **input:** Not prominently featured in the provided views.
- **hero:** Large typographic layout mixing dark and muted gray text, centered on a white background.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```