# Spiradata Design System

> Industrial-strength data management anchored by deep navy foundations, high-visibility safety orange actions, and wide-tracked Open Sans body copy.

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

## TL;DR
Spiradata utilizes a high-contrast "Industrial Tech" aesthetic. The palette is dominated by a deep navy `#0f1934` used for headlines and dark-mode sections, contrasted against a clean white `#ffffff` base. Primary actions are signaled by a high-energy safety orange `#f1420a`, while secondary information uses a technical sky blue `#2b83af`. Typography pairs the geometric, wide-stanced Montserrat for authoritative headers with a highly legible, light-weight Open Sans for dense technical prose. Layouts favor vertical stacking with generous 32px-96px rhythmic gaps and 10px rounded corners on interactive elements.

## Signature DNA
1. **Safety Orange CTAs** (The use of `#f1420a` for primary buttons creates immediate visual priority against the navy and white canvas, observed on all analyzed pages).
2. **Montserrat Display Hierarchy** (Heavyweight Montserrat headers at 700 weight with negative letter-spacing (-0.608px) provide an industrial, "stamped" authority).
3. **Open Sans Technical Prose** (Body text is set in Open Sans at a light 300 weight with wide 0.38px letter-spacing, optimizing for readability in data-heavy contexts).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.foundation.canvas}` | `#ffffff` | Primary page background, button text | 28 | 0.8 | computed_style |
| `{color.foundation.ink}` | `#0f1934` | Primary text, dark section backgrounds | 75 | 0.8 | computed_style |
| `{color.foundation.neutral}` | `#222222` | Secondary text, footer copy | 13 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent.primary}` | `#f1420a` | Primary CTA background (Safety Orange) | 4 | 0.6 | computed_style |
| `{color.accent.secondary}` | `#2b83af` | Secondary buttons, links, icons | 11 | 0.8 | computed_style |
| `{color.accent.soft}` | `#99cce5` | Tinted section backgrounds (4% - 9% opacity) | 5 | 0.6 | decorative_only |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Montserrat | 500, 600, 700 | Headings, Buttons | Montserrat (Google) | OFL |
| Open Sans | 300, 400, 700 | Body, Captions | Open Sans (Google) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display.xl}` | 61px | 66.88px | -0.608px | 700 | Main Hero H1 | `h1` |
| `{text.display.lg}` | 45px | 51.52px | -0.448px | 600 | Section Headers | `h2` |
| `{text.heading.md}` | 30px | 36.48px | -0.304px | 500 | Sub-section titles | `h3` |
| `{text.body.lg}` | 23px | 41.24px | 0.229px | 400 | Large intro text | `p.sqsrte-large` |
| `{text.body.md}` | 19px | 31.13px | 0.194px | 400 | Standard body copy | `p` |
| `{text.body.light}` | 19px | 35.02px | 0.389px | 300 | Technical descriptions | `article#sections` |
| `{text.button}` | 16px | normal | normal | 500 | CTA Labels | `.sqs-button-element--primary` |

### Principles
1. **Negative Display Tracking:** Large Montserrat headers use negative tracking (up to -0.6px) to maintain visual tension.
2. **Expanded Body Tracking:** Open Sans body text uses positive tracking (0.19px to 0.38px) to prevent character crowding in technical descriptions.
3. **Weight Contrast:** Headlines are strictly 600-700 weight, while body copy defaults to 300-400 for a clear information hierarchy.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `{space.base}` | 16px | 12 |
| `{space.lg}` | 32px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers, sharp cards | 95 occurrences |
| `{radius.md}` | 10px | Buttons, interactive controls | 11 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{elev.flat}` | none | All observed components | Observed across all pages |

## Components

### Tier 1: Foundational

#### Primary Action Button
**Role:** Main conversion point (Book a Demo, See it in Action)
**Pages observed:** https://spiradata.com, https://spiradata.com/pricing
**Spec:** Background `#f1420a` / Text `#ffffff` / Border `0px` / Radius `10px` / Padding `0px 32px` / Typography `{text.button}`
**States observed:** Default: captured | Hover: not captured

#### Secondary Action Button
**Role:** Informational navigation (Learn More)
**Pages observed:** https://spiradata.com
**Spec:** Background `#ffffff` / Text `#2b83af` / Border `1px solid #2b83af` / Radius `10px` / Padding `0px 32px` / Typography `{text.button}`
**States observed:** Default: captured | Active: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Grid items for service listings
**Pages observed:** https://spiradata.com
**Spec:** Background `#ffffff` / Text `#0f1934` / Border `0px` / Radius `0px` / Shadow `none`
**States observed:** Default: captured

#### Dark Hero Section
**Role:** High-impact footer or header bands
**Pages observed:** https://spiradata.com, https://spiradata.com/about
**Spec:** Background `#0f1934` / Text `#ffffff` / Padding `96px 0px`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Soft Surface Band
**Role:** Subtle section differentiation
**Pages observed:** https://spiradata.com
**Spec:** Background `rgba(153, 204, 229, 0.09)` / Text `#0f1934` / Radius `0px`
**States observed:** Default: captured

#### Pricing Card
**Role:** Tiered service display
**Pages observed:** https://spiradata.com/pricing
**Spec:** Background `#ffffff` / Text `#0f1934` / Border `1px solid #0f1934` / Radius `0px`
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Vertical Gap | 96px |
| Grid Gutter | 32px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; 3-up grids stack to 1-up. |
| Desktop | 1440px | Full horizontal navigation; multi-column feature grids. |

## Imagery & decoration
Spiradata uses technical line-art icons in `#2b83af` (Blue) and high-quality industrial photography (oil rigs, construction sites) as hero backgrounds. It avoids soft gradients, preferring solid color blocks and 0.09 opacity tints for depth.

## Do's
- Use `#f1420a` strictly for primary conversion buttons.
- Set all display headers in Montserrat with weight 600 or 700.
- Apply `{radius.md}` (10px) to all interactive button elements.
- Maintain a clear white space gap of at least 32px between grid items.
- Use Open Sans 300 for long-form technical descriptions to ensure legibility.

## Don'ts
- **Wrong:** Using `#2b83af` for the main "Book a Demo" button. **Right:** Use `#f1420a`. **Reason:** Orange is the designated high-priority action color.
- **Wrong:** Applying rounded corners to section containers. **Right:** Keep containers at `{radius.none}`. **Reason:** The brand uses sharp-edged structural blocks.
- **Wrong:** Setting body copy in Montserrat. **Right:** Use Open Sans. **Reason:** Montserrat is reserved for display and button labels.

## Similar brands
- Caterpillar (Industrial palette)
- Autodesk (Technical/Engineering focus)
- Trimble (Field service/Data aesthetics)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-navy: #0f1934;
  --color-orange: #f1420a;
  --color-blue: #2b83af;
  --color-white: #ffffff;
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --radius-control: 10px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #f1420a;
  --color-secondary: #2b83af;
  --color-surface-dark: #0f1934;
  --font-montserrat: "Montserrat";
  --font-opensans: "Open Sans";
  --radius-md: 10px;
}
```

## Agent prompt examples
- "Create a pricing section using `#ffffff` cards with 1px `#0f1934` borders and a primary button in `#f1420a`."
- "Generate a hero section with Montserrat 700 headlines in `#0f1934` and a background tint of `rgba(153, 204, 229, 0.09)`."
- "Design a feature grid where icons are `#2b83af` and descriptions use Open Sans 300 with 0.38px letter spacing."

## Known gaps
- Hover and focus states for buttons were not explicitly captured in the computed style evidence.
- Semantic colors (Success/Error) were not present on the analyzed marketing pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://spiradata.com | Desktop 1440 | 2026-06-06 |
| Pricing | https://spiradata.com/pricing | Desktop 1440 | 2026-06-06 |
| About | https://spiradata.com/about | Desktop 1440 | 2026-06-06 |