# Basedesign · Design system migration spec

> Source: https://www.basedesign.com  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of a bold, type-driven agency portfolio that uses restraint and scale to achieve a high-impact, cultural aesthetic.

## 1. Identity DNA

The system operates as a cultural gallery meets design manifesto, where every element is placed with the deliberateness of a curated exhibition. It is a brutalist framework that uses stark contrast and massive scale to generate immediate impact, functioning less as a decoration and more as a declaration.

**One-liner:** A brutalist design agency that uses massive typography and stark contrast to create cultural impact.
**Keywords:** bold · graphic · editorial · minimal · cultural · impact
**Analogy:** A high-impact cultural gallery meets a modern design manifesto.

## 2. Color

The palette is a study in restraint, built on a high-contrast monochrome foundation of pure black and white. A single gray provides subtle tonal variation, while interactive accents are reserved for a functional blue.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#212121` | secondary text |
| `--muted` | `#ABABAB` | placeholder |
| `--line` | `rgba(0,0,0,0.12)` | divider |

**Color principle:** High-contrast monochrome with occasional blue accents for interactive elements.

The principle is absolute: color serves contrast and function, never ornamentation.

## 3. Typography

Typography is the primary architectural element, with a geometric-sans category chosen for its clean, authoritative forms. The voice is declarative, using extreme scale differences to construct a rigid visual hierarchy.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 120px | 0.9 | 700 | -1px | Massive hero headings and primary graphic elements. |
| headline | 60px | 1.17 | 300 | 0px | Secondary headlines and statements. |
| body | 18px | 1.4 | 400 | 0.12px | Standard body copy and descriptive text. |
| caption | 12px | 1.33 | 400 | 0.3px | Navigation links and utility text. |

**Type rules:**
- Use extreme size differences to create visual hierarchy.
- Maintain tight leading for display text.
- Ensure all text is left-aligned for a clean, structured look.

## 4. Spacing

The spatial rhythm is defined by generous whitespace, which acts as a frame for the bold typographic statements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace is used to frame bold typographic elements.

## 5. Surfaces

Surfaces are flat and graphic, relying on high contrast rather than faux depth. Borders are minimal and functional, existing only as thin black underlines to delineate interactive zones.

- **Radius:** sm 0px · md 0px · lg 0px · pill 50px
- **Borders:** Thin black underlines are used for interactive elements and section dividers.

## 6. Layout

The structural skeleton begins with a full-width typographic hero that dominates the viewport. This is followed by a series of high-contrast editorial sections, creating a clear, linear journey.

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

**Skeleton:** Full-width typographic hero followed by high-contrast editorial sections.

## 7. Motion & Interaction

Motion is employed with the precision of a gallery light shift—smooth fades for content transitions and subtle transforms for interactive feedback. The philosophy prioritizes refinement and purpose over decoration.

- **Durations:** micro 200ms · small 250ms · medium 350ms
- **Easing:** `cubic-bezier(0.32, 0, 0.67, 0)`
- **Patterns:**
  - Smooth fades for content transitions
  - Subtle transforms for interactive elements

- **Hover:** Elements fade or transform subtly on hover.
- **Click:** Direct feedback through minimal visual changes.
- **Transition:** Smooth opacity and transform transitions for a refined feel.
- **Keyboard:** Standard focus and navigation support.

## 8. Voice & Don'ts

The editorial voice is confident, direct, and authoritative, with headlines that are bold, large-scale, and declarative. It communicates with the certainty of a manifesto.

- **Tone:** Confident, direct, and authoritative.
- **Headline style:** Bold, large-scale, and declarative.
- **CTA style:** Simple, unadorned text links.
- **Avoid:** Decorative elements that distract from typography. / Rounded corners or soft shapes. / Complex color gradients or patterns. / Small, dense text blocks. / Ornate or script typefaces. / Loud, saturated color palettes.

### Don'ts
- ❌ Don't use rounded corners on main containers — screenshot shows strictly sharp edges or very subtle 2px radius.
- ❌ Don't add drop shadows to cards — screenshot shows flat, high-contrast surfaces with no elevation.
- ❌ Don't use multiple colors in a single section — screenshot shows a strict monochrome palette.
- ❌ Don't center all text — screenshot shows a strong preference for left-aligned typography.
- ❌ Don't use small, cramped layouts — screenshot shows expansive whitespace and massive typography.
- ❌ Don't use decorative icons — screenshot shows a minimal, type-driven interface.

The system deliberately rejects decorative icons, soft gradients, rounded corners, and any element that would dilute its stark, type-driven authority.

## System Prompt (paste into AI tool)

```
This is a high-impact design agency website characterized by massive typography, stark black-and-white contrast, and a minimal, editorial layout. The primary font category is geometric-sans, used at extreme scales (up to 120px) to create a bold visual identity. The palette is almost entirely monochrome, using only #FFFFFF, #000000, and #212121. Do not use rounded corners, soft shadows, or any decorative elements that would dilute the bold, direct aesthetic. Focus on sharp edges, generous whitespace, and powerful typographic statements. The layout should feel like a gallery or manifesto, with clear hierarchy and deliberate pacing.
```