# Buck · Design system migration spec

> Source: https://buck.co  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in agency minimalism, using extreme typographic restraint and whitespace to highlight high-end creative work.

## 1. Identity DNA

Buck operates like a gallery where the architecture deliberately recedes. The design system is an exercise in subtraction—a pure white canvas with black type, built so the studio's own creative work becomes the only source of color and visual weight. This is a structure designed to disappear.

**One-liner:** A minimalist, high-contrast portfolio designed to let large-format creative work take center stage.
**Keywords:** creative · global · studio · design · technology
**Analogy:** A high-end creative agency portfolio showcasing large-scale motion and brand work.

## 2. Color

The palette is strictly binary: black text on a white ground, with a single warm gold accent reserved for minimal highlights. This absence of color is the strategy—it guarantees that the vibrant project imagery holds the viewer's full attention.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F2F4F8` | card background |
| `--ink` | `#000000` | body text |
| `--muted` | `#9CA3AF` | placeholder |
| `--accent` | `#F4C054` | single accent |
| `--line` | `rgba(226, 232, 240, 1)` | divider |

**Color principle:** Extreme minimalism with a strict black-and-white canvas, using vibrant project imagery as the only source of color.

The principle is that the system's own chromatic restraint makes the client work look more vivid by contrast.

## 3. Typography

Typographic voice is carried entirely by Mabry, used at an ultra-light weight across every scale and function. The choice of a single, consistent weight—rather than a family of bold and regular variants—creates an airy, confident uniformity.

- **Display:** geometric-sans
- **Body:** geometric-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 50px | 1.0 | 100 | -1px | Main intro text |
| body | 21px | 1.4 | 100 | 0 | Project metadata and descriptions |

**Type rules:**
- The primary typeface (Mabry) is used exclusively across all elements.
- Headings and body text both utilize an ultra-light weight (100).
- Text transforms to uppercase are frequently applied for project categories.

## 4. Spacing

Rhythm is asymmetric and generous, with large padding around project thumbnails creating a deliberate, unhurried vertical flow.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Asymmetric, with large generous padding around project thumbnails and a clear vertical flow.

## 5. Surfaces

Surfaces are defined by their near-absence. Shadows are omitted entirely, and borders are reduced to a 1px hairline used only for essential structural separation.

- **Radius:** sm 0px · md 0px · lg 0px · pill 9999px
- **Borders:** Extremely thin 1px solid borders used sparingly, primarily for structural separators or interactive elements.

## 6. Layout

The layout skeleton is a loose, masonry-style grid with wide gutters, where project cards of varying sizes are placed with intentional irregularity. The grid is not a rigid matrix but a flexible container that lets each piece of work breathe.

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

**Skeleton:** A loose, masonry-like grid where project cards of varying sizes are placed with wide gutters.

## 7. Motion & Interaction

Motion philosophy treats interaction as a quiet confirmation rather than a performance. Transitions are smooth and consistent, using background-color shifts and staggered reveals to guide attention without demanding it.

- **Durations:** micro 200ms · small 300ms · medium 750ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth transitions on background-color changes.
  - Subtle hover effects on project cards.
  - Staggered reveal of grid items on scroll.

- **Hover:** Subtle background-color shifts or slight opacity changes on project thumbnails.
- **Click:** Direct navigation to project case studies, often with a smooth page transition.
- **Transition:** Consistent use of 'all' or 'background-color' transitions for interactive states.
- **Keyboard:** Basic focus management allowing navigation through the project grid.

## 8. Voice & Don'ts

The editorial voice is professional and understated, matching the typographic tone. It avoids dense paragraphs and decorative flourishes, trusting the simplicity of the layout to carry authority.

- **Tone:** Professional, authoritative, yet understated.
- **Headline style:** Ultra-light, large-scale sans-serif type that conveys confidence through simplicity.
- **CTA style:** Minimalist, relying on navigation links rather than prominent call-to-action buttons.
- **Avoid:** Heavy, bold typefaces for body copy. / Cluttered layouts or dense paragraphs. / Decorative flourishes or unnecessary borders.

### Don'ts
- ❌ Don't use bold weights for headings — screenshot shows ultra-light (100) weights for all primary text.
- ❌ Don't add drop shadows to project cards — screenshot shows completely flat, clean surfaces.
- ❌ Don't use a colorful background — screenshot shows a strictly pure white (#FFFFFF) canvas.
- ❌ Don't use rounded corners on containers — screenshot shows sharp, rectangular thumbnails.
- ❌ Don't use decorative borders — screenshot shows clear separation through whitespace and minimal line weight.
- ❌ Don't use complex, multi-layered grid layouts — screenshot shows a relatively simple, staggered 2-column flow.

The system deliberately avoids bold weights, shadows, rounded corners, and complex grids—constraints that preserve the clarity and focus of the portfolio presentation.

## System Prompt (paste into AI tool)

```
BUCK is a global creative agency portfolio. The design DNA is extreme minimalism, utilizing a pure white (#FFFFFF) background and black (#000000) text to ensure the vibrant project imagery is the focal point. Typography is a clean geometric-sans (Mabry) used consistently at an ultra-light weight (100), creating a sophisticated, airy feel. Key colors are limited to the site's stark black-and-white contrast, with a singular warm gold accent (#F4C054) occasionally used for highlights. Critical constraints: do not use bold font weights for headlines, do not add shadows or complex borders to cards, and do not use multi-column text layouts; always prioritize generous whitespace and let the work speak for itself.
```