# Datama Design System

> High-contrast analytical interface pairing deep forest greens with vibrant cyan accents on a clean white canvas.

**Source:** [https://datama.io](https://datama.io) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Datama utilizes a "monochrome-plus" system where a foundational palette of white (#ffffff) and deep teal (#00484a) is energized by a primary cyan accent (#16d0b4). The typography is dominated by **Montserrat** for structural clarity, supported by the high-impact display face **Blimone** for hero moments. Components favor high-radius "pill" geometry (60px to 999px) for interactive elements, creating a friendly, accessible layer over complex data-driven content. Sectioning relies on large vertical spacing (120px) and subtle background shifts to light mint (#ebf5f3) or pale gray (#f3f5f8).

## Signature DNA
1. **The Display Punch** (Blimone at 80px+ weight 500/700 used for primary hero headlines to create an "editorial tech" feel, observed on homepage and about pages).
2. **Cyan Voltage** (#16d0b4 used as a high-contrast functional accent for cookie consents, secondary CTAs, and "better insights" text highlights).
3. **Pill-Form Interaction** (Buttons and tags consistently use 60px+ radii, contrasting against the sharp 0px edges of structural layout containers).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Page background, card surfaces | 46 | 1.0 | Computed Style |
| `{color.ink.primary}` | `#00484a` | Primary text, footer background, dark section surfaces | 102 | 0.8 | Computed Style |
| `{color.ink.secondary}` | `#586f70` | Secondary body text, subheadings | 86 | 0.8 | Computed Style |
| `{color.border.default}` | `#d7dcdd` | Subtle dividers, canvas outlines | 5 | 1.0 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.accent.cyan}` | `#16d0b4` | Primary brand accent, text highlights, consent buttons | 11 | 1.0 | `--cmplz_slider_active_color` |
| `{color.accent.blue}` | `#206eee` | Primary CTA background | 10 | 0.6 | Computed Style |
| `{color.accent.orange}` | `#f8663c` | Use-case badges, decorative highlights | 6 | 0.6 | Computed Style |
| `{color.accent.pink}` | `#cc3366` | Decorative text moments (low frequency) | 4 | 0.6 | decorative_only |

### Semantic
| Token | Hex | Role |
|------|-------|------|
| `{color.success}` | `#00d084` | Success states (declared) |
| `{color.error}` | `#cf2e2e` | Error states (declared) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|-------|------|------|------|
| **Blimone** | 500, 700, 800 | Display, Hero Headlines | Montserrat ExtraBold (approx) | Custom/Licensed |
| **Montserrat** | 400, 500, 600, 700 | Body, Subheadings, Buttons | Montserrat (Google) | SIL Open Font |
| **Poppins** | 300, 400, 600 | Supplemental UI | Poppins (Google) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 88px | 82px | normal | 500 | Hero H1 | `h1.elementor-heading-title` |
| `{type.display.lg}` | 68px | 68px | normal | 500 | Section Display | `div.elementor-heading-title` |
| `{type.heading.lg}` | 36px | 49px | 1.1px | 600 | Section Headers | `h2.elementor-heading-title` |
| `{type.heading.md}` | 30px | 30px | normal | 600 | Sub-section Headers | `h3.elementor-heading-title` |
| `{type.body.lg}` | 16px | 26px | normal | 400 | Primary Body | `div.elementor-element` |
| `{type.body.bold}` | 16px | 26px | normal | 700 | Inline Emphasis | `a` |
| `{type.button}` | 16px | 26px | normal | 500 | CTA Labels | `a.elementor-button` |
| `{type.caption}` | 12px | 15.6px | normal | 400 | Meta Data/Badges | `div.post__meta-data` |

### Principles
1. **Display Tightness:** Large Blimone headers use line-heights smaller than the font size (e.g., 82px LH for 88px Size) to maintain visual density.
2. **Letter Spacing on Headers:** Montserrat H2 headers utilize 1.1px tracking to improve readability at 36px.
3. **Body Clarity:** Standard body text maintains a generous 1.625x line-height (26px LH for 16px Size).

## Spacing
**Base unit:** 4px (approximated)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 10px | 33 |
| `{space.sm}` | 20px | 4 |
| `{space.md}` | 40px | 13 |
| `{space.lg}` | 60px | 4 |
| `{space.section}` | 120px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Section containers, cards | 182 occurrences |
| `{radius.sm}` | 4px | Form inputs, small buttons | 5 occurrences |
| `{radius.lg}` | 10px | Feature blocks | 8 occurrences |
| `{radius.pill}` | 60px | Primary/Secondary Buttons | 8 occurrences |
| `{radius.full}` | 999px | Badges, Avatars | 4 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.card}` | `rgba(0, 0, 0, 0.15) 0px 0px 10px 0px` | Hover states on white cards | Card component (homepage) |

## Components
### Tier 1: Foundational
#### Rounded Button (Primary)
**Role:** Primary site actions (Get Started, Book Demo)
**Pages observed:** homepage, about
**Spec:** Background `#206eee` | Text `#ffffff` | Radius `60px` | Padding `12px 24px` | Type `Montserrat 16px/500`
**States observed:** Default: captured | Hover: not captured

#### Rounded Button (Secondary)
**Role:** Ghost/Outline actions
**Pages observed:** homepage
**Spec:** Background `transparent` | Text `#00484a` | Border `1px #d7dcdd` | Radius `60px` | Padding `12px 24px`

### Tier 2: Patterns
#### Use Case Badge
**Role:** Categorization labels on cards
**Pages observed:** homepage
**Spec:** Background `#f8663c` | Text `#ffffff` | Radius `999px` | Padding `7.2px 14.4px` | Type `Montserrat 12px`

#### Feature Card
**Role:** Benefit and service highlights
**Pages observed:** homepage
**Spec:** Background `#ffffff` | Text `#586f70` | Radius `3px` | Shadow `0 0 10px rgba(0,0,0,0.15)` | Padding `40px 0px`

### Tier 3: Surface-specific
#### Dark Section Surface
**Role:** High-contrast content bands
**Pages observed:** homepage, about
**Spec:** Background `#00484a` | Text `#ffffff` (headings) / `#586f70` (body) | Radius `0px` | Padding `0px 120px`

#### Consent Banner
**Role:** Legal compliance
**Pages observed:** all
**Spec:** Background `#ffffff` | Primary Button `#16d0b4` | Text `#222222` | Radius `10px` (container)

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1140px |
| Section Vertical Padding | 120px |
| Column Gap | 20px |

## Do's
- Use **Blimone** only for H1 and display-level headers.
- Pair `#206eee` buttons with `#ffffff` text for primary CTAs.
- Maintain **120px** vertical spacing between major homepage sections.
- Use **60px** border radius for all interactive pill-shaped buttons.
- Apply `#ebf5f3` as a background for light-tinted feature sections.

## Don'ts
- Do not use `#16d0b4` (Cyan) for primary body text; reserve for highlights and specific UI controls.
- Do not apply border-radius to main section containers; keep them **0px (sharp)**.
- Do not use **Blimone** for body copy or long-form text.
- Avoid using `#f8663c` (Orange) for primary buttons; it is reserved for badges and accents.
- Do not mix multiple shadow styles; use only the `10px` soft blur for cards.

## Similar brands
- **Fivetran** (Data-centric, clean typography, high-contrast teals)
- **Segment** (Technical but accessible, bold display type)
- **Mixpanel** (Analytical UI, structured grid, vibrant accent colors)

## Quick start
```css
/* CSS Variables */
:root {
  --datama-primary: #206eee;
  --datama-accent: #16d0b4;
  --datama-ink: #00484a;
  --datama-text-muted: #586f70;
  --datama-canvas: #ffffff;
  --datama-radius-pill: 60px;
  --font-display: 'Blimone', sans-serif;
  --font-body: 'Montserrat', sans-serif;
}
```

## Known gaps
- **Hover/Active States:** Detailed transition values for buttons were not captured in the static trace.
- **Mobile Navigation:** The specific transition and background blur of the mobile menu overlay were not fully evidenced.
- **Form Validation:** Error state UI (icons/borders) for inputs was not captured in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-------|------|-------------|
| Homepage | `https://datama.io` | 1440px | 2026-06-06 |
| About | `https://datama.io/about` | 1440px | 2026-06-06 |
| Pricing | `https://datama.io/pricing` | 1440px | 2026-06-06 |