# 1010data Design System

> High-contrast data-industrialism: deep obsidian canvases punctuated by high-voltage orange accents and structured sans-serif typography.

**Source:** https://1010data.com | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
1010data utilizes a "Dark Mode by Default" architecture where a primary obsidian canvas (`#000000`) serves as the floor for all high-level storytelling. The system is strictly monochrome in its foundation, relying on white (`#ffffff`) for readability and a specific "Luminous Amber" (`#fc6815`) for all directional energy and primary actions. Layouts are characterized by generous vertical pacing and a rigid adherence to sans-serif type scales that prioritize clarity over ornamentation.

## Signature DNA
1. **Obsidian Foundation:** The brand lives on a pure black background (`#000000`), forcing a high-contrast relationship with white body text (`#716d74`) and headers.
2. **Kinetic Orange Accents:** All primary CTAs and "Explore" links use a high-saturation orange (`#fc6815`), creating a singular focal point against the dark canvas.
3. **Structured Information Density:** Content is grouped into clearly defined vertical bands with significant negative space, mimicking the precision of the data science it represents.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--wp--preset--color--black` | `#000000` | Primary page background / Canvas | High | 100% | Token Evidence |
| `--wp--preset--color--white` | `#ffffff` | Primary text / High-contrast surface | High | 100% | Token Evidence |
| `--wp--preset--color--fl-body-text` | `#716d74` | Secondary body text / Muted descriptions | High | 100% | Token Evidence |
| `--wp--preset--color--fl-heading-text` | `#333333` | Dark-on-light heading (inverted sections) | Medium | 90% | Token Evidence |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--wp--preset--color--fl-accent` | `#fc6815` | Primary CTA / Action color | High | 100% | Token Evidence |
| `--wp--preset--color--fl-nav-hover` | `#2b7bb9` | Link hover state (secondary) | Medium | 80% | Token Evidence |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|-------|------|-------------|------------|
| Sans-Serif (System) | 400, 700 | All headers, body, and UI | Inter | Proprietary/System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|-------|-------------|----------------|--------|-----|-------------------|
| `{text.hero}` | 64px | 1.1 | -0.02em | 700 | Main Hero H1 | `h1.entry-title` |
| `{text.h2}` | 42px | 1.2 | normal | 700 | Section Headers | `h2` |
| `{text.h3}` | 32px | 1.2 | normal | 700 | Sub-section Headers | `h3` |
| `{text.body-lg}` | 18px | 1.6 | normal | 400 | Hero intro text | `.hero-text` |
| `{text.body}` | 16px | 1.5 | normal | 400 | Default body copy | `p` |
| `{text.cta}` | 16px | 1.0 | 0.05em | 700 | Button labels | `.fl-button-text` |
| `{text.nav}` | 14px | 1.4 | normal | 400 | Top navigation | `.fl-page-nav` |
| `{text.caption}` | 12px | 1.4 | 0.1em | 700 | Uppercase labels | `.featured-label` |

### Principles
1. **Header Weight:** All headers (H1-H3) are consistently bolded to maintain authority against the dark background.
2. **Tight Hero Leading:** Large display type uses tight line-height (1.1) to create a "blocky" visual impact.
3. **Generous Body Tracking:** Body text uses standard tracking but relies on a slightly greyed-out hex (`#716d74`) to reduce eye strain on pure black.

## Spacing
**Base unit:** 8px
Table: | Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | Inline elements |
| `{space.sm}` | 16px | Card internal padding |
| `{space.md}` | 32px | Component grouping |
| `{space.lg}` | 64px | Section vertical padding |
| `{space.xl}` | 120px | Hero vertical padding |

## Border radius
Table: | Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Primary buttons, section containers | Screenshot 1 |
| `{radius.sm}` | 4px | Form inputs, small UI elements | Screenshot 1 |
| `{radius.md}` | 8px | Resource cards | Screenshot 1 |

## Elevation
Table: | Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `flat` | none | Default state for all sections | Screenshot 1 |
| `raised` | 0 4px 20px rgba(0,0,0,0.5) | Hovered resource cards | Screenshot 1 |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Learn More")
**Pages observed:** Homepage
**Spec:** Background: `#fc6815` | Text: `#ffffff` | Radius: `0px` | Padding: `15px 35px` | Typography: Bold Sans 16px
**States observed:** Default | Hover: captured (darkens slightly)

#### Ghost Link
**Role:** Secondary navigation within sections (e.g., "Explore More")
**Pages observed:** Homepage
**Spec:** Background: `transparent` | Text: `#fc6815` | Border-bottom: `2px solid #fc6815` | Typography: Bold Sans 16px
**States observed:** Default | Hover: not captured

### Tier 2: Patterns

#### Resource Card
**Role:** Displaying blog posts or news
**Pages observed:** Homepage
**Spec:** Background: `#1a1a1a` (inferred dark grey) | Text: `#ffffff` | Radius: `8px` | Padding: `24px`
**States observed:** Default | Hover: captured (elevation increase)

#### Top Navigation
**Role:** Global site navigation
**Pages observed:** Homepage
**Spec:** Background: `transparent` (over hero) | Text: `#ffffff` | Height: `80px`
**States observed:** Default | Hover: `#2b7bb9` (blue)

### Tier 3: Surface-specific

#### Industry Solution Block
**Role:** Vertical content sections for specific sectors
**Pages observed:** Homepage
**Spec:** Background: `#000000` | Text: `#ffffff` | Padding-top: `96px`
**States observed:** Static

#### Footer
**Role:** Global site map and legal
**Pages observed:** Homepage
**Spec:** Background: `#000000` | Text: `#757575` | Border-top: `1px solid #333333`
**States observed:** Static

## Layout
Table: | Property | Value |
|----------|-------|
| Max-width | 1200px |
| Column Grid | 12-column |
| Gutter | 30px |

## Responsive
Table: | Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | <768px | Hamburger menu active, Hero text scales to 36px, 1-column stack |
| Desktop | >1024px | Full horizontal nav, 2-column feature splits |

## Imagery & decoration
The brand uses high-contrast photography often featuring industrial or abstract data-themed overlays. It avoids "playful" illustrations or rounded, soft-edged graphics.

## Do's
- Use pure black `#000000` for primary section backgrounds.
- Use `#fc6815` for all primary interactive elements.
- Maintain sharp 0px corners on all primary buttons.
- Ensure all headers are weight 700.
- Use `#716d74` for long-form body text to maintain readability.

## Don'ts
- **Wrong:** Using `#007cba` (Admin Blue) as a primary brand color. **Right:** Use `#fc6815`. **Reason:** Blue is a legacy/system token, not the 1010data brand primary.
- Do not use rounded corners on primary CTA buttons.
- Do not place dark text on dark backgrounds; use `#ffffff` for all text on obsidian canvases.
- Do not use serif fonts for UI or headers.
- Do not use gradients on buttons; keep fills solid.

## Similar brands
- Palantir
- Splunk
- Snowflake
- Databricks

## Quick start

```css
:root {
  --color-canvas: #000000;
  --color-primary: #fc6815;
  --color-text-main: #ffffff;
  --color-text-muted: #716d74;
  --font-main: sans-serif;
  --radius-button: 0px;
}
```

## Agent prompt examples
- "Create a hero section with an obsidian background, a 64px bold white header, and a sharp-cornered orange button using #fc6815."
- "Design a resource card with an 8px border radius and a subtle hover elevation against a #000000 canvas."
- "Generate a secondary 'Explore' link with a 2px orange underline and no background fill."

## Known gaps
- Hover states for secondary links were not fully captured in the static analysis.
- Specific font family names (beyond generic sans-serif) were not declared in the token set.

## Provenance
Table: | Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://1010data.com | 1440px / 390px | 2026-06-06 |