CURATED · OPEN · FREE

Basedesign

A brutalist design agency that uses massive typography and stark contrast to create cultural impact.

AgencyBold TypographyEditorialCleanPremium

Basedesign screenshot

↓ Download design system (5 MB)Open in OpenDesign

Visit: https://www.basedesign.com

📦 Browse pack contents →

01

Identity DNA

boldgraphiceditorialminimalculturalimpact

A high-impact cultural gallery meets a modern design manifesto.

02

Color

#000000Ink

#212121Ink soft

#FFFFFFBG

#ABABABMuted

rgba(0,0,0,0.12)Line

High-contrast monochrome with occasional blue accents for interactive elements.

03

Typography

geometric-sans

display120px · 700
headline60px · 300
body18px · 400
caption12px · 400

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.

04

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous whitespace is used to frame bold typographic elements.

05

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 50px

Thin black underlines are used for interactive elements and section dividers.

06

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

07

Motion & Interaction

200msmicro

250mssmall

350msmedium

cubic-bezier(0.32, 0, 0.67, 0)easing

Smooth fades for content transitions · Subtle transforms for interactive elements

Elements fade or transform subtly on hover. · Direct feedback through minimal visual changes.

08

Components

button Simple text-based links with minimal decoration.
card Typographic cards that highlight bold headlines and project imagery.
hero A massive typographic hero that uses a single word or phrase to dominate the viewport.

09

Voice & Don'ts

Tone Confident, direct, and authoritative.
Headlines Bold, large-scale, and declarative.
CTAs Simple, unadorned text links.

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.
Avoid: Decorative elements that distract from typography.
Avoid: Rounded corners or soft shapes.
Avoid: Complex color gradients or patterns.
Avoid: Small, dense text blocks.
Avoid: Ornate or script typefaces.
Avoid: Loud, saturated color palettes.

10

Inside the pack — real screenshots

Basedesign — 桌面首屏（hero） — 桌面首屏（hero）

Basedesign — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Basedesign — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Basedesign — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Basedesign — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Basedesign — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Basedesign — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Basedesign — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Basedesign — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Basedesign — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Basedesign — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Basedesign — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Basedesign — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Basedesign — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Basedesign — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Basedesign — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Basedesign — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Basedesign — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko