---
name: Datalands
description: "Worth including for its masterful execution of high-contrast monochrome design and expressive use of custom geometric typography."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  neutral: "#3D3D3D"
  line: "rgba(255, 255, 255, 0.2)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 120px
    lineHeight: 1.0
    fontWeight: 900
    letterSpacing: "-2px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 60px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-0.5px"
  subheading:
    fontFamily: grotesque-sans
    fontSize: 22px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: grotesque-sans
    fontSize: 12px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "1.6px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A visual communication and information design studio that blends branding and data.

*A bold, monochromatic architecture firm for data.*

## Colors

High-contrast monochromatic with stark white typography on a deep black canvas.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Muted (`#3D3D3D`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.2)`)** — uses `line` token

## Typography

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

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

## Layout

full-width hero sections with split layouts for content

*Rhythm:* generous

## Elevation & Depth

- Borders: 1px solid white for primary outlines, 2px borders on badges

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** rounded pill buttons with white outline on transparent background
- **card:** minimalist layout with clean typography separation
- **chip:** small pill-shaped labels with solid backgrounds (e.g., orange for case studies)
- **input:** minimal, transparent inputs with bottom borders
- **hero:** massive typographic display filling the screen width

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```