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

# Yuga Labs · Design System

> Monochrome space, oversized type, onchain culture.

**Theme:** dark · **Industry:** crypto · **Source:** https://yuga.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._

Yuga Labs pairs expansive black space with oversized typography and a stark monochrome identity. A brief white ApeCoin chapter and compact collection directory punctuate the otherwise restrained, media-led page.

## North star

Use expansive, uninterrupted black or white fields and let one oversized, tightly set headline or stark media moment define each section.

## Overview

The page builds its identity from a strict black-and-white foundation: black dominates the opening and editorial sections, while white carries the ApeCoin feature, partnership callout, collection directory, and footer. White text reverses onto the dark sections; black text takes over on the light band. AK Monument Grotesk supplies both compact navigation and very large, heavy uppercase headlines, with tight leading and negative tracking making display copy feel compressed and emphatic. The first screen is an immersive monochrome motion graphic, not a product mock-up: a white abstract mark and dotted wave pattern sit against black. Long stretches of dark negative space separate sparse statements and collection imagery. The layout shifts to a broad white editorial field near the bottom, with left-aligned copy, a centered join prompt, and a compact multi-column directory. The acid yellow-green is a restrained accent found in a card, not the defining page canvas.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Abyss Black | `#000000` | `--color-abyss-black` | brand | Primary canvas for the opening, large editorial stretches, and dark section backgrounds; also grounds buttons and dark text. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Headline and navigation contrast on black; becomes the broad background for the ApeCoin section and footer. |
| Charcoal Panel | `#131313` | `--color-charcoal-panel` | surface | Dark collection-card surface, subtly lifted from the black canvas. |
| Acid Lime | `#d3de5d` | `--color-acid-lime` | accent | Limited accent on a collection card; do not treat it as a page-wide brand background. |

### Semantic aliases

`--color-canvas` → `#000000` (Abyss Black) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#131313` (Charcoal Panel) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#000000` (Abyss Black) · `--color-border` → `#000000` (Abyss Black) · `--color-accent` → `#d3de5d` (Acid Lime)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#131313` | 18.58:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#131313` | 1.13:1 | fail |
| `#d3de5d` | `#000000` | 14.38:1 | AAA |
| `#d3de5d` | `#ffffff` | 1.46:1 | fail |
| `#d3de5d` | `#131313` | 12.72:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| AK Monument Grotesk | `--font-body` | webfont | 800, 200, 700, 400 | Used throughout for display headlines, editorial copy, navigation, links, and footer labels. | Space Grotesk |

- **AK Monument Grotesk:** Display and major headings are heavy, uppercase, tightly tracked, and compressed by low line-height; body and navigation stay restrained.

### Type scale — Golden Ratio (ratio ≈ 1.628, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 160px | 800 | 0.82 | -0.03em | uppercase | AK Monument Grotesk | Oversized uppercase statements and hero-scale display moments. |
| h1 | 102px | 800 | 0.82 | -0.03em | uppercase | AK Monument Grotesk | Large, heavy uppercase lead headline such as “BUILDING CULTURE ONCHAIN.” |
| h2 | 52px | 800 | 0.9 | -0.02em | — | AK Monument Grotesk | Prominent section headings, including the ApeCoin headline. |
| h3 | 32px | 700 | 0.9 | 0 | — | AK Monument Grotesk | Secondary headings and emphatic content labels. |
| h4 | 24px | 700 | 0.83 | 0 | — | AK Monument Grotesk | Compact subsection and directory headings. |
| body | 14px | 200 | 1.1 | 0 | — | AK Monument Grotesk | Supporting editorial copy and explanatory text. |
| nav | 14px | 400 | 1 | 0 | — | AK Monument Grotesk | Small, plain navigation labels and utility links. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 2, 6, 12, 15, 20, 25, 30, 40 px.
- Section rhythm 245px · element gap — · card padding — · max content width 1380px.

The page uses a spacious, mostly single-column editorial flow, with measured maximum content width of 1380px and a four-column collection showcase. Section rhythm is deliberately expansive: large black intervals separate the opening media, the left-aligned statement, and supporting copy. The white lower band changes the mood without changing the restrained alignment system. Its ApeCoin copy begins at the left, the join prompt is centered, and the directory and footer resolve into compact columns. Density remains low except around collections and footer links.

## Shape & elevation

- Radius: button `9999px` · link `40px` · xs `30px` · sm `40px` · pill `9999px`
- No box shadows measured: the page is flat.

The design is predominantly flat, with no measured shadows or gradients. Separate sections through large shifts in whitespace and the decisive black-to-white background change, not layered cards. Hairlines and underlined links provide restrained structure; collection panels use flat fills and square corners. Buttons are black pill shapes with a black border.

## Imagery

The opening is defined by a full-bleed black-and-white animated-looking graphic: a central abstract white mark framed by a field of dotted, warped shapes. Collection content is media-heavy, with many image elements arranged in a four-column showcase; these assets are content imagery rather than the source of the core palette. A video appears in the white ApeCoin section. Keep imagery bold, high contrast, and spaciously framed.

## Components

### Top navigation

A minimal bar at the bottom edge of the opening media, with a thin rule, Yuga Labs at left, and Home/About links at right.

### Oversized statement

Large, bold uppercase AK Monument Grotesk on black, left-aligned with tight line-height and tracking.

### Collection showcase

Four-column media-led collection area with white text links; measured card fills include #131313 and an occasional #d3de5d.

### ApeCoin feature

White section with black uppercase heading, explanatory copy, video, a black rounded Learn more button, and a fine horizontal divider.

### Join callout

Centered JOIN US headline on white with a compact black pill link beneath it.

### Collection directory

Compact three-column link directory on white, headed by an underlined Our Collections label.

### Footer

White, low-density footer with grouped navigation, policy, and social links arranged across three columns.

### Measured component styles

- **Primary button** (“Learn more”): background #000000 · text #ffffff · border 2px solid #000000 · radius 90px · padding 0px 20px · 400 25.6px AK Monument Grotesk
- **Link** (“BORED APE YACHT CLUB DISCOVER”): transparent background · text #ffffff · radius 40px · padding 0px · 400 25.6px AK Monument Grotesk
- **Card**: background #131313 · text #ffffff · radius 0px · padding 0px · 400 25.6px AK Monument Grotesk
- **Navigation item** (“Yuga Labs”): transparent background · text #ffffff · radius 0px · padding 0px · 400 14px AK Monument Grotesk

## Do

- Use black and white as the dominant section-level colour system.
- Preserve generous dark negative space between content moments.
- Set major display headlines in heavy uppercase with tight leading.
- Keep navigation small and visually quiet.
- Use the lime accent sparingly and only as a content-level highlight.
- Prefer flat surfaces and thin rules over decorative elevation.

## Don't

- Do not fill every section with cards or copy.
- Do not introduce gradients or drop shadows.
- Do not use the lime accent as the primary canvas.
- Do not round collection panels.
- Do not make navigation compete with the hero artwork.
- Do not add decorative colours beyond the measured palette.

## Agent prompt

Build a new page in the Yuga Labs visual style using Abyss Black (#000000) and Gallery White (#ffffff) as the dominant alternating section fields. Use AK Monument Grotesk, or Space Grotesk if unavailable; make display headings heavy, uppercase, tightly tracked, and compact in leading. Keep navigation small and understated. Let each section breathe with substantial uninterrupted space, then use a deliberate alignment change—left-aligned editorial copy, a centered callout, or a compact multi-column directory—to create rhythm. Treat media as bold, high-contrast content, not decorative cards. Use Charcoal Panel (#131313) for subtle dark card differentiation and Acid Lime (#d3de5d) only as a restrained accent. Keep surfaces flat, buttons pill-shaped, and rules thin; avoid shadows, gradients, and unnecessary UI.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed monochrome media fills the viewport; a minimal navigation strip sits along its lower edge. | brand-first opening, Home/About navigation | black canvas, abstract white mark, dotted motion graphic, thin nav rule |
| 2 | other | Sparse black editorial section with a large headline aligned to the left. | brand statement, high-impact headline | white uppercase type, large black negative space |
| 3 | other | Black single-column field with a concise block of bold white copy near the lower content area. | mission explanation, editorial pacing | left-aligned copy, large surrounding whitespace |
| 4 | product-showcase | Four-column collection showcase with abundant media and concise discovery links. | browse collections, discover links | image-heavy grid, dark cards, white labels, limited lime accent |
| 5 | feature-split | White section with left-aligned heading and copy, video content, and a compact CTA. | learn more, token information | black uppercase heading, black pill button, fine divider |
| 6 | cta | Centered join message and link on a broad white field. | partnership invitation, single CTA | centered headline, black pill link, open whitespace |
| 7 | category-nav | Three-column directory on white, aligned to the left beneath an underlined heading. | collection navigation, grouped links | compact columns, underlined section title, small link labels |
| 8 | footer | Three groups of links spread across a white footer. | site navigation, legal links, social links | black text, three-column grouping, generous spacing |

## Source CSS custom properties (selected)

```css
--color: white;
--background: black;
--color-invert: black;
--background-invert: white;
```

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