# Datalands · Design system migration spec

> Source: https://datalands.co  ·  Curated by OpenDesign  ·  en

> Worth including for its masterful execution of high-contrast monochrome design and expressive use of custom geometric typography.

## 1. Identity DNA

Datalands presents itself as the architectural firm for data—a practice where information is given structural form. Its identity is built on a stark, monochromatic foundation, treating the digital canvas as a black, expansive site on which bold typographic forms are precisely placed.

**One-liner:** A visual communication and information design studio that blends branding and data.
**Keywords:** visual communication · information design · data visualization · branding · studio
**Analogy:** A bold, monochromatic architecture firm for data.

## 2. Color

The color system is one of extreme reduction, built on a strict high-contrast monochrome. Pure black (#000000) and white (#FFFFFF) form the entire operative palette, with color appearing only as a rare, functional accent.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#3D3D3D` | placeholder |
| `--line` | `rgba(255, 255, 255, 0.2)` | divider |

**Color principle:** High-contrast monochromatic with stark white typography on a deep black canvas.

This principled absence of color ensures all visual emphasis is directed to form, hierarchy, and content.

## 3. Typography

Typographic voice is established through a clear categorical hierarchy: a bold, custom geometric sans-serif for logotypes, a clean grotesque-sans for body copy, and a functional monospace for UI elements. The scale moves from massive, screen-filling display type to minimal, utilitarian labels.

- **Display:** geometric-sans
- **Body:** grotesque-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 120px | 1.0 | 900 | -2px | Massive hero logotype |
| heading | 60px | 1.1 | 400 | -0.5px | Section headlines and services list |
| subheading | 22px | 1.3 | 400 | 0px | Paragraphs and descriptions |
| caption | 12px | 1.3 | 400 | 1.6px | Labels, tags, and navigation elements |

**Type rules:**
- Use monospace for UI labels and small tags.
- Maintain heavy weight for the main logotype.
- Body copy remains clean and highly legible grotesque-sans.

## 4. Spacing

Spacing follows a generous rhythm, granting each element significant room to breathe within the layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** generous

## 5. Surfaces

Surfaces are defined by crisp, minimal outlines rather than depth or shadow. Primary borders are thin white lines, while interactive badges receive a heavier 2px stroke for emphasis.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** 1px solid white for primary outlines, 2px borders on badges

## 6. Layout

The layout skeleton is built on full-width hero sections that command the viewport, transitioning to split layouts for content presentation. This creates a clear, navigable structure defined by massive type and ample negative space.

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

**Skeleton:** full-width hero sections with split layouts for content

## 7. Motion & Interaction

Motion is employed with deliberate restraint, serving functional feedback over decoration. Interactions rely on smooth, steady transitions using a standard cubic-bezier easing curve.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.44, 0, 0.56, 1)`
- **Patterns:**
  - subtle hover transitions on interactive elements

- **Hover:** subtle color shifts or opacity changes
- **Click:** subtle compression or state change
- **Transition:** all 0.3s cubic-bezier(0.44, 0, 0.56, 1)
- **Keyboard:** standard focus states with visible outlines

## 8. Voice & Don'ts

The editorial voice is professional, minimal, and sophisticated, mirroring the visual system's clarity. Headlines are direct and visual, while calls to action adopt a strict monospace, uppercase treatment within rounded buttons.

- **Tone:** professional, minimal, and sophisticated
- **Headline style:** bold, direct, and highly visual
- **CTA style:** monospace, uppercase, and enclosed in rounded buttons
- **Avoid:** unnecessary decoration / colorful gradients / playful or informal language

### Don'ts
- ❌ don't use colorful gradients — the screenshot shows a strict monochrome palette
- ❌ don't use decorative serifs — the typography is exclusively geometric and grotesque sans-serif
- ❌ don't use heavy drop shadows — the screenshot shows flat, clean surfaces
- ❌ don't use small, cramped spacing — the layout is highly spacious with generous padding
- ❌ don't use mixed-case hero typography — the logotype is a distinct geometric custom style
- ❌ don't use complex navigation menus — the screenshot shows simple text links and minimal buttons

The system deliberately rejects decorative serifs, colorful gradients, heavy drop shadows, and cramped spacing to maintain its core integrity.

## System Prompt (paste into AI tool)

```
Datalands is a visual communication and information design studio specializing in data visualization and branding. The design is defined by a stark, high-contrast monochromatic palette using pure black (#000000) for the background and white (#FFFFFF) for text, with very minimal accents like orange (#FF7400) for specific tags. The typography relies on bold, custom geometric sans-serif fonts for massive logotypes and clean grotesque-sans for body copy, complemented by monospace for small labels. Critical donts include: never use colorful gradients, avoid decorative serifs, and do not crowd the layout with unnecessary UI elements.
```