---
title: "Base Design design system"
variant: extended
source: https://www.basedesign.com/
captured_at: 2026-10-12
theme: light
industry: design
generator: Design DNA (https://four.wiralomi.com/style/basedesign-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Base Design · Design System

> A crisp monochrome frame for a vivid creative feed

**Theme:** light · **Industry:** design · **Source:** https://www.basedesign.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Base Design’s homepage presents a dense, continuously browsable feed of identity and digital projects. A restrained monochrome interface lets varied project imagery supply nearly all the colour and character.

## North star

Keep the interface monochrome and sharply gridded so each project’s own visual identity becomes the page’s accent.

## Overview

The page uses a restrained interface palette: white canvas, near-black type and rules, pale gray panels, and occasional black media tiles. Most of the screenshot’s vivid colours come from project artwork and photography, not the site chrome; keep them within the individual feed tiles rather than turning them into global accents. Lightweight uppercase Base Grotesk gives navigation, labels, and editorial project titles a consistent, direct voice. A thinly ruled header sits above a compact, tightly joined mosaic of project cards, mixing imagery with white text-only tiles. The grid varies tile widths and heights while maintaining crisp rectangular edges and narrow gutters. Project videos, photographs, graphics, and motion imagery carry the visual variety. Flat surfaces, fine borders, and minimal ornament preserve a gallery-like feel. Small filter and navigation controls anchor the experience without competing with the work.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Soft Ink | `#121212` | `--color-soft-ink` | brand | Primary text, navigation labels, outlines, and the dark FEED control. |
| Gallery Gray | `#eeeeee` | `--color-gallery-gray` | surface | Pale gray card and interface surfaces; also appears in fine borders. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Page canvas and light text-card backgrounds. |
| Pure Black | `#000000` | `--color-pure-black` | semantic | Black project tiles and selected project-link treatments; distinct from the softer primary ink. |

### Semantic aliases

`--color-canvas` → `#eeeeee` (Gallery Gray) · `--color-surface` → `#ffffff` (Paper White) · `--color-surface-2` → `#000000` (Pure Black) · `--color-text` → `#121212` (Soft Ink) · `--color-text-muted` → `#eeeeee` (Gallery Gray) · `--color-border` → `#121212` (Soft Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#121212` | `#eeeeee` | 16.15:1 | AAA |
| `#121212` | `#ffffff` | 18.73:1 | AAA |
| `#121212` | `#000000` | 1.12:1 | fail |
| `#eeeeee` | `#ffffff` | 1.16:1 | fail |
| `#eeeeee` | `#000000` | 18.1:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| baseGrotesk | `--font-body` | webfont | 300 | Navigation, project labels and titles, controls, and interface copy. | Inter |

- **baseGrotesk:** Use a light sans-serif voice; measured body, caption, and button styles are uppercase, with subtle caption tracking.

### Type scale — Major Third (ratio ≈ 1.25, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 18px | 300 | 1 | 0 | uppercase | baseGrotesk | Uppercase project titles and prominent feed text. |
| caption | 12px | 300 | 1 | 0.01em | uppercase | baseGrotesk | Compact uppercase project labels and metadata. |
| button | 12px | 300 | 1 | 0.01em | uppercase | baseGrotesk | Uppercase navigation and filter controls. |

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 4, 8, 9, 10, 21, 32, 56 px.
- Section rhythm 32px · element gap 4px · card padding — · max content width —.

A slim, full-width header spans the top, with the brand at left and compact navigation and utility controls aligned right. Below it, a dense five-column project mosaic fills nearly the entire content area. Card widths and heights vary to create an irregular editorial grid; text-only tiles sit alongside image and video work. Thin gutters and rules keep the composition tightly organized. Content aligns to the grid rather than a narrow reading column, and the feed continues vertically with compact section rhythm.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s ease-out` on interactive elements.

The interface is predominantly flat: no measured shadows or rounded corners. Thin dark rules define the header, controls, and card edges, while narrow gutters separate tiles. Layering comes from the varied artwork inside the grid, not from floating panels or decorative depth effects.

## Imagery

The feed combines project photography, video stills, graphic identities, product mockups, and typographic artwork. Tiles crop content tightly to their rectangular frames, while selected text cards use plain white or black fields. Saturated reds, oranges, blues, and greens belong to individual projects; preserve this diversity rather than applying a shared colour filter.

## Components

### Top navigation

A compact horizontal bar with the Base label on the left and outlined FEED, PROJECTS, INDEX, search, and menu controls on the right.

### Feed mosaic

A dense, five-column grid of mixed-size project tiles, with narrow separations and crisp rectangular edges.

### Project card

A flat rectangular tile that displays cropped project imagery, video, or artwork; some measured cards use #eeeeee.

### Editorial text tile

Centered uppercase project title on a plain white field, using lightweight Base Grotesk.

### Selected feed control

FEED is a compact #121212-filled button with white uppercase text and a fine dark outline.

### Filter and view controls

Small outlined controls sit along the lower edge of the feed, including FILTER, plus/minus, and NOW.

### Measured component styles

- **Primary button** (“FEED”): background #121212 · text #ffffff · border 1px solid #121212 · radius 0px · padding 0px 10px · 300 12px baseGrotesk · uppercase
- **Secondary button** (“Base”): transparent background · text #121212 · border 1px solid #121212 · radius 0px · padding 0px 10px · 300 12px baseGrotesk
- **Link** (“KOREAN RETAILER THE HYUNDAI LAUNCHES IMM”): transparent background · text #000000 · border 1px solid #121212 · radius 0px · padding 0px · 400 10px baseGrotesk
- **Input**: transparent background · text #121212 · radius 0px · padding 0px 10px · 300 12px baseGrotesk
- **Card**: background #eeeeee · text #000000 · radius 0px · padding 0px · 400 10px baseGrotesk
- **Navigation item** (“FEED PROJECTS INDEX ABOUT CONTACT PRESS ”): transparent background · text #000000 · radius 0px · padding 0px · 400 10px baseGrotesk

## Do

- Use white as the interface canvas.
- Keep primary text and rules near-black.
- Reserve saturated colour for project media.
- Build a dense, varied rectangular tile grid.
- Use lightweight uppercase interface typography.
- Keep card edges flat and sharply defined.

## Don't

- Do not introduce gradients into the site chrome.
- Do not round card or button corners.
- Do not add shadows to create artificial depth.
- Do not apply one colour treatment across all project media.
- Do not loosen the feed into a sparse card layout.
- Do not let decorative interface elements overpower the work.

## Agent prompt

Build a new agency page in Base Design’s restrained portfolio style. Use Paper White (#ffffff) as the canvas, Soft Ink (#121212) for typography and key rules, and Gallery Gray (#eeeeee) only for quiet surfaces. Pure Black (#000000) may frame selected media. Set a light grotesk sans serif, using uppercase labels and compact navigation. Organize the main content as a dense, asymmetrical rectangular project mosaic with narrow gutters, mixed tile proportions, and crisp edges. Let each project provide its own colour through photography, video, graphics, or typography; do not impose a global accent palette. Keep the header and controls small, flat, and clearly ruled. Avoid shadows, rounded corners, gradients, and excess decoration. Prioritize the work while preserving clear navigation and usable project links.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | content-feed | A compact top navigation above a dense five-column mosaic of mixed-size project tiles. | Browse project feed, Filter projects, Open project links | Thin outlined controls, Mixed media tiles, Uppercase labels, Text-only project cards |

## Source CSS custom properties (selected)

```css
--color-white: #fff;
--color-off-white: #eee;
--color-gray-light: #e0e0e0;
--color-gray: #9d9d9d;
--color-gray-dark: #515151;
--color-black: #121212;
--color-red: #ff090d;
--color-orange: #f70;
--color-yellow: #fff200;
--color-green: #41f141;
--color-blue: #4542fd;
--color-purple: #b901f1;
--color-pink: #ff72ce;
--color-gray-filter: #dcdcdc;
--color-brown: #b45f1f;
--color-permanent-black: #000;
--color-permanent-off-white: #eee;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/basedesign-com