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

# Datalands · Design System

> Bold typography, vivid work, and information-led design.

**Theme:** dark · **Industry:** design · **Source:** https://datalands.co/ · **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._

A dark, editorial studio homepage that introduces Datalands through oversized wordmark typography and a curated flow of client work. Hairline dividers, compact mono labels, and selectively colorful project imagery keep the presentation disciplined and distinctive.

## North star

Keep the canvas black and typography-led; let vivid color appear only as a deliberate accent or contained project artwork.

## Overview

The page is built on a near-continuous black canvas, with white typography doing almost all of the brand work. Bright pink and sky blue are restrained accents rather than a general-purpose palette: pink marks newsletter controls, while blue anchors the inverse-color footer identity. Warm off-white appears in form fields and project artwork, not as a broad section background. The opening wordmark is an oversized, heavy display graphic; supporting copy uses a clean grotesque sans, while small uppercase mono labels establish navigation and editorial metadata. The long page uses open, asymmetrical compositions instead of boxed cards: project media and captions alternate across the canvas, and fine gray rules divide service, client, team, and process bands. Large gaps create a deliberate, comfortable rhythm. Photography, motion, logos, and bright case-study visuals are embedded as content, with color contained within each project rather than allowed to disrupt the predominantly monochrome identity.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Black | `#000000` | `--color-studio-black` | brand | Dominant page canvas and dark text on the blue footer; supports the stark editorial contrast. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Primary wordmark, headings, body copy, and high-contrast content on the black canvas. |
| Pulse Pink | `#fc74dd` | `--color-pulse-pink` | accent | Newsletter submit controls and small interaction accents; keep use selective. |
| Sky Panel | `#94bcee` | `--color-sky-panel` | surface | Inverse-color footer field behind the black wordmark and contact details. |
| Warm Porcelain | `#f3f3ef` | `--color-warm-porcelain` | surface | Newsletter input backgrounds and pale areas within project imagery; not a general page band. |
| Soft Graphite | `#d9d9d9` | `--color-soft-graphite` | semantic | Minor muted text and subtle neutral details; not a defining brand surface. |

### Semantic aliases

`--color-canvas` → `#000000` (Studio Black) · `--color-surface` → `#94bcee` (Sky Panel) · `--color-surface-2` → `#f3f3ef` (Warm Porcelain) · `--color-text` → `#ffffff` (Paper White) · `--color-text-muted` → `#000000` (Studio Black) · `--color-accent` → `#fc74dd` (Pulse Pink) · `--color-accent-2` → `#94bcee` (Sky Panel) · `--color-on-accent` → `#3d3d3d`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#94bcee` | 1.96:1 | fail |
| `#ffffff` | `#f3f3ef` | 1.11:1 | fail |
| `#000000` | `#94bcee` | 10.69:1 | AAA |
| `#000000` | `#f3f3ef` | 18.88:1 | AAA |
| `#fc74dd` | `#000000` | 8.68:1 | AAA |
| `#fc74dd` | `#94bcee` | 1.23:1 | fail |
| `#fc74dd` | `#f3f3ef` | 2.17:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Basis Grotesque Pro Regular | `--font-body` | webfont | 400 | Main headings, project captions, explanatory copy, and most page text. | Inter |
| Martian Mono sWd Rg | `--font-mono` | webfont | 400 | Uppercase section labels, eyebrows, and compact editorial metadata. | IBM Plex Mono |
| Martian Mono Std xLt | `--font-martian-mono-std-xlt` | webfont | 400 | Light mono details and newsletter field or control text. | IBM Plex Mono |
| Martian Mono Std Lt | `--font-martian-mono-std-lt` | webfont | 300 | Uppercase links and small navigation-style actions. | IBM Plex Mono |

- **Basis Grotesque Pro Regular:** Regular-weight grotesque forms; use compact, slightly tight tracking for body text and restrained sentence case.
- **Martian Mono sWd Rg:** Small uppercase labels with noticeably open tracking; retain the technical, catalog-like feel.
- **Martian Mono Std xLt:** Extra-light mono treatment; pair with uppercase, widely tracked utility text.
- **Martian Mono Std Lt:** Light weight with open tracking; keep link labels small, uppercase, and unobtrusive.

### Type scale — Custom (ratio ≈ 1.912, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 357.5px | 900 | 0.8 | -0.01em | — | OZIK Black | Oversized Datalands wordmark graphic in the opening and footer. |
| h1 | 80px | 400 | 1 | -0.002em | — | Basis Grotesque Pro Regular | Primary introductory statements and major page headings. |
| h2 | 60px | 400 | 1 | -0.003em | — | Basis Grotesque Pro Regular | Large section headings, including studio and process content. |
| h3 | 42px | 400 | 1.1 | -0.04em | — | Basis Grotesque Pro Regular | Secondary feature or project statements. |
| h4 | 38px | 400 | 1.1 | -0.008em | — | Basis Grotesque Pro Regular | Smaller project titles and supporting headings. |
| body | 14px | 400 | 1.2 | -0.036em | — | Basis Grotesque Pro Regular | Project descriptions, studio copy, and explanatory paragraphs. |
| caption | 12.5px | 400 | 1.25 | 0.05em | uppercase | Martian Mono sWd Rg | Uppercase section labels and compact editorial annotations. |
| link | 15px | 300 | 1.25 | 0.05em | uppercase | Martian Mono Std Lt | Small uppercase project links and utility actions. |
| eyebrow | 12.5px | 400 | 1.25 | 0.05em | uppercase | Martian Mono sWd Rg | Section markers such as Case Studies, Services, and Clients. |
| code | 16px | 400 | 1.45 | -0.05em | — | Martian Mono Std xLt | Mono-styled utility details and newsletter-related copy. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 3, 10, 12, 14, 18, 20, 22, 24, 30, 36, 38, 40, 48, 50, 60, 80 px.
- Section rhythm 80px · element gap 10px · card padding — · max content width 1380px.

The page uses a wide canvas with a measured maximum content width of 1380px and a comfortable, spacious rhythm. Sections remain mostly single-column bands, but project stories and studio content shift into asymmetric multi-column compositions. Text often aligns left; project media and captions move between sides rather than following a rigid card grid. Thin horizontal rules separate major content groups. The measured section gap is 80px, with a compact 10px element gap, so generous transitions coexist with tightly grouped metadata.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · media `9999px` · link `30px` · xs `30px` · pill `9999px`
- Shadow `inset` (input): `rgba(0, 0, 0, 0) 0px 0px 0px 1px inset`
- Motion: standard transition `0.3s cubic-bezier(0.44, 0, 0.56, 1)` on interactive elements.

The design is predominantly flat: black bands meet without raised-card styling, and subtle hairlines provide separation. Avoid drop shadows and layered panels. Inputs are pale, pill-shaped controls with a measured inset shadow treatment; rounded media framing appears in project examples. Preserve clear content boundaries through spacing and rules rather than elevation.

## Imagery

Project imagery mixes stills, video, logos, and client portraits. Keep media as contained case-study artifacts, often with rounded framing, and place captions nearby rather than overlaying them by default. The artwork can contain vivid gradients and product colors; these belong to each project, not the site-wide palette. Use restrained, dark surroundings so the media remains legible.

## Components

### Oversized wordmark

Use a bold white Datalands mark against black at the opening, then invert it to black over the blue footer field.

### Section marker

Pair a small uppercase mono label with a leading dot and a fine horizontal divider to introduce content bands.

### Project story

Combine project media, a concise grotesque caption, and a small uppercase mono label or link in an open, asymmetric layout.

### Service list

Present numbered service names in a vertical list, with thin rules separating rows instead of individual cards.

### Newsletter form

Use Warm Porcelain (#f3f3ef) pill-shaped fields and Pulse Pink (#fc74dd) pill-shaped submit controls with light mono utility text.

### Footer contact panel

Set a black wordmark, outlined social links, and large contact details on the Sky Panel (#94bcee) surface.

### Measured component styles

- **Primary button** (“✔️”): background #fc74dd · text #3d3d3d · radius 96px · padding 48px 36px · 600 18px Martian Mono Std xLt Extra-light
- **Link** (“View NIKE”): transparent background · text #000000 · radius 30px · padding 0px · 400 12px sans-serif
- **Input**: background #f3f3ef · text #111212 · radius 96px · padding 48px 36px · 200 18px Martian Mono Std xLt Extra-light · shadow rgba(0, 0, 0, 0) 0px 0px 0px 1px inset

## Do

- Keep the main canvas consistently black.
- Use white as the default text color on dark sections.
- Reserve pink for compact, high-salience controls.
- Use sky blue for the inverse-color footer treatment.
- Set utility labels in small, widely tracked uppercase mono.
- Separate content bands with fine rules and generous space.

## Don't

- Do not turn the page into a grid of raised cards.
- Do not spread pink or blue across large dark-page sections.
- Do not use project artwork colors as global brand colors.
- Do not add prominent shadows or decorative gradients to the canvas.
- Do not make utility labels large or sentence case.
- Do not force every project into the same alignment.

## Agent prompt

Build a new Datalands-style page as a dark, editorial studio experience. Use Studio Black (#000000) for the main canvas and Paper White (#ffffff) for the primary typography. Keep Pulse Pink (#fc74dd) limited to interaction accents, and reserve Sky Panel (#94bcee) for a deliberate inverse-color footer or callout. Use Warm Porcelain (#f3f3ef) only for form surfaces or contained media details. Pair a clean grotesque sans with widely tracked uppercase mono labels. Favor oversized brand typography, asymmetric project compositions, open space, and fine dividers over cards, shadows, or decorative gradients. Keep project imagery vivid but contained within its own media area. Use pill-shaped inputs and CTA controls, small editorial metadata, and clear section bands. Preserve an intentional long-scroll rhythm with varied alignment and generous separation.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width black opening with a large centered white wordmark. | Brand-first entry | Oversized display mark, High-contrast monochrome |
| 2 | other | Tall, single-column black band with extensive open space. | Visual pause | Black canvas, Minimal content |
| 3 | other | Short introduction with lead statement and supporting copy aligned across a wide row. | Brand introduction | Grotesque text, Thin divider |
| 4 | product-showcase | Open, asymmetric case-study presentation with media and captions across the page. | Project browsing, Case-study links | Contained project media, Compact labels, Caption pairs |
| 5 | video | Single project video with a nearby descriptive caption. | Project preview | Rounded video frame, Short caption |
| 6 | video | Project video positioned with a short caption in an open composition. | Coming-soon reveal | Rounded media, Compact status label |
| 7 | feature-grid | Five numbered service rows paired with a small supporting image grid. | Service discovery | Numbered rows, Fine horizontal rules |
| 8 | other | Single-column editorial statement with generous surrounding space. | Value proposition | Large text block, Dark canvas |
| 9 | logo-cloud | Four-column client-logo field within a compact section band. | Client credibility | Monochrome logos, Section label |
| 10 | team | Two-column section pairing studio copy with two portrait images. | Meet the founders | Portrait media, Role captions |
| 11 | video | Full-bleed video occupying a dedicated single-column band. | Immersive interlude | Full-width motion media |
| 12 | how-it-works | Process introduction followed by six numbered stages in a compact two-column sequence. | Process explanation | Mono step labels, Fine separators |
| 13 | newsletter | Newsletter introduction and supporting copy above a row of pill-shaped form controls. | Email signup | Porcelain input pills, Pink submit controls |
| 14 | footer | Blue inverse-color footer with large wordmark, outlined social blocks, and contact details. | Social links, Business contact | Blue panel, Black display mark, Large contact text |

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