# Datatron Design System

> A technical, high-contrast interface pairing deep slate blues with sharp geometric outlines and generous functional whitespace.

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

## TL;DR
Datatron utilizes a "monochrome-plus" system where a foundation of pure white (#ffffff) and pale blue-tinted grays (#eff8ff) is punctuated by a primary slate blue (#445765). The identity relies on heavy-weight Inter (700-800) for technical authority in headings, contrasted against light-weight Roboto (300) for explanatory prose. UI elements are characterized by large border radii (up to 100px for pills) and subtle 2px borders, often using a secondary sky blue (#66add9) or a distinctive purple accent (#b145bf) for interactive states.

## Signature DNA
1. **The Technical Contrast** (The pairing of Inter 700 for bold titles and Roboto 300 for light body text creates a "lab-grade" documentation feel, observed on the homepage and about page.)
2. **Slate & Sky Palette** (The use of #445765 for primary surfaces and #66add9 for borders establishes a professional, non-neon AI aesthetic, visible in the MLOps platform section.)
3. **Pill-Panel Geometry** (Large 44px to 100px radii on buttons and cards soften the otherwise rigid grid, seen in the "Contact Us" and "Get Whitepaper" CTAs.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.canvas}` | `#ffffff` | Primary page background | 22 | 1.0 | `--stickybg` |
| `{colors.surface-soft}` | `#eff8ff` | Card backgrounds, FAQ sections | 12 | 1.0 | `--color4` |
| `{colors.surface-neutral}` | `#f5f5f5` | Navigation background | 5 | 0.8 | `--nav-bg` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.primary}` | `#445765` | Primary text, nav links, dark surfaces | 98 | 1.0 | `--color1` |
| `{colors.secondary}` | `#859099` | Secondary text, button labels | 104 | 1.0 | `--color` |
| `{colors.action}` | `#66add9` | Borders, active surface backgrounds | 25 | 1.0 | `--color2` |
| `{colors.highlight}` | `#b145bf` | Hover states, distinctive borders | 21 | 1.0 | `--color3` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Inter | 400, 500, 600, 700, 800 | Headings, UI, Buttons | Inter (Google) | SIL Open Font |
| Roboto | 300 | Body prose, descriptions | Roboto (Google) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 36px | 41.4px | normal | 700 | Section headers | `h3.dtitle` |
| `{type.title-lg}` | 33px | 40px | normal | 700 | Secondary titles | `h5.dtitle.title-2` |
| `{type.title-md}` | 24px | 29px | normal | 700 | Card titles | `h4.ititle` |
| `{type.body-prose}` | 24px | 36px | normal | 300 | Hero subtext | `p` (Roboto) |
| `{type.title-sm}` | 20px | 21px | normal | 600 | Feature labels | `h4.btitle` |
| `{type.button}` | 17px | 25.5px | normal | 700 | Primary CTAs | `a.btn.btn-d` |
| `{type.body-md}` | 16px | 24px | normal | 400 | General body | `section.element` |
| `{type.caption}` | 13px | 18.2px | normal | 400 | Footer links | `li` |

### Principles
1. **Bold Technicality:** Headings never drop below 600 weight, emphasizing structural hierarchy.
2. **Prose Lightness:** Explanatory text uses Roboto 300 to prevent the page from feeling visually "heavy" despite the bold headers.
3. **Functional Color:** Color is used for categorization (e.g., Press vs. Blog tags) rather than just decoration.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 13 |
| `{space.sm}` | 16px | 23 |
| `{space.md}` | 20px | 37 |
| `{space.lg}` | 30px | 9 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Sharp sections | 192 occurrences |
| `{radius.sm}` | 5px | Input fields, small cards | 19 occurrences |
| `{radius.md}` | 8px | UI controls | 15 occurrences |
| `{radius.lg}` | 30px | Feature cards | 5 occurrences |
| `{radius.pill}` | 44px | Primary buttons | 9 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.flat}` | none | Default state | 192 occurrences |
| `{shadow.soft}` | `rgba(0, 0, 0, 0.06) 0px 4px 20px 10px` | Floating cards / Avatars | 5 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** https://datatron.com
**Spec:** Background transparent / Text `{colors.primary}` (#445765) / Border 2px `{colors.highlight}` (#b145bf) / Radius 44px / Padding 9px 18px / Typography `{type.button}`
**States observed:** Default | Hover: captured (purple border)

#### Nav Link
**Role:** Top-level navigation
**Pages observed:** https://datatron.com, https://datatron.com/about
**Spec:** Background transparent / Text `{colors.primary}` (#445765) / Typography 16px Inter 500
**States observed:** Default | Hover: captured (#e5e5e5 background)

### Tier 2: Patterns

#### FAQ Accordion
**Role:** Information disclosure
**Pages observed:** https://datatron.com
**Spec:** Background `{colors.surface-soft}` (#eff8ff) / Text `{colors.primary}` (#445765) / Radius 5px / Padding 20px
**States observed:** Default | Active: captured (expands content)

#### Category Badge
**Role:** Content tagging (Press, Blog, Webinar)
**Pages observed:** https://datatron.com
**Spec:** Background `{colors.action}` (#66add9) / Text #ffffff / Radius 5px / Padding 4px 20px / Typography 16px Inter 600
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Feature Card
**Role:** Value proposition display
**Pages observed:** https://datatron.com
**Spec:** Background `{colors.surface-soft}` (#eff8ff) / Text `{colors.primary}` (#445765) / Radius 30px / Padding 19.6px 26px
**States observed:** Default: captured

#### Whitepaper Card
**Role:** Content download CTA
**Pages observed:** https://datatron.com
**Spec:** Background #ffffff / Border 1px #eeeeee / Radius 8px / Shadow `{shadow.soft}`
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max-width | 1200px (estimated) |
| Section Padding | 41px (top) |
| Grid Gutter | 20px |

## Imagery & decoration
- **Geometric Patterns:** Uses light gray hexagonal/grid patterns in hero backgrounds.
- **Isometric Illustrations:** Technical concepts (MLOps, Monitoring) are represented by clean, isometric 3D illustrations.
- **Logo Grid:** Grayscale treatment for partner logos (Ford, Domino's, etc.) to maintain brand neutrality.

## Do's
- Use **Inter 700** for all section titles to maintain authority.
- Apply **Roboto 300** for long-form body text to ensure legibility.
- Use the **#b145bf purple** accent sparingly, reserved for high-intent interactive borders.
- Maintain **20px gutters** between grid items.
- Use **#eff8ff** as the default background for secondary content blocks.

## Don'ts
- **Wrong:** Using pure black #000000 for text. **Right:** Use Slate Blue #445765. **Reason:** Pure black breaks the technical "monochrome-plus" palette.
- **Wrong:** Applying sharp corners to primary buttons. **Right:** Use 44px radius. **Reason:** Datatron uses rounded geometry for all interactive triggers.
- **Wrong:** Mixing Inter and Roboto within the same text block. **Right:** Keep Inter for headers and Roboto for prose.
- Do not use #66add9 (Sky Blue) for primary text; it is reserved for borders and badges.

## Similar brands
- Scale AI
- Weights & Biases
- Domino Data Lab
- Fiddler AI

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #445765;
  --color-secondary: #859099;
  --color-action: #66add9;
  --color-highlight: #b145bf;
  --color-surface-soft: #eff8ff;
  --radius-pill: 44px;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Roboto', sans-serif;
}
```

## Agent prompt examples
- "Generate a feature card using a background of #eff8ff, a 30px border radius, and a title in Inter 700 #445765."
- "Create a primary CTA button with a 2px border of #b145bf, 44px border radius, and text in Inter 700."
- "Layout a section with a header in 36px Inter 700 and subtext in 24px Roboto 300."

## Known gaps
- Hover states for the main navigation dropdowns were not fully captured in the static evidence.
- Mobile-specific menu transition animations were not recorded.
- Dark mode variants for the platform UI were not present in the source pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://datatron.com | Desktop 1440px | 2026-06-06 |
| About Page | https://datatron.com/about | Desktop 1440px | 2026-06-06 |
| Homepage Mobile | https://datatron.com | Mobile 390px | 2026-06-06 |