# Strigo Design System

> High-contrast technical canvas anchored by deep sea-blue actions and generous geometric whitespace.

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

## TL;DR
Strigo utilizes a high-contrast "monochrome-plus" system where a specific deep blue `#0077a2` serves as the singular engine for brand voltage. The interface is built on a foundation of pure white `#ffffff` and a soft mint-tinted gray `#e5f4f2` used for borders and subtle backgrounds. Typography is strictly **Inter** and **Inter Tight**, favoring a semi-bold weight (600) for large display headings and a light weight (300) for descriptive body prose. Components are characterized by large corner radii (20px for cards, 48px for buttons) and a signature soft blue shadow that gives the UI a floating, airy depth.

## Signature DNA
1. **The Floating Sea-Blue Shadow** (A specific `rgba(0, 119, 162, 0.05)` shadow with a large 84px blur that anchors white cards against the canvas, observed on Homepage and Pricing.)
2. **Inter Tight Display** (Headlines use the "Tight" variant of Inter at weights 500-600, creating a compact, engineered feel for technical marketing copy.)
3. **Hyper-Rounded Geometry** (Pill-shaped buttons at 48px radius paired with 20px radius cards create a soft, approachable container for technical lab content.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--base-color-brand--black` | `#333333` | Primary text, secondary links | 137 | 1 | Computed style |
| `--border-color--border-primary` | `#e5f4f2` | Default card borders, section dividers | 24 | 1 | Computed style |
| `surface-white` | `#ffffff` | Primary page canvas, card backgrounds | 47 | 0.8 | Computed style |
| `--text-color--text-tertiary` | `#868687` | Muted captions, de-emphasized labels | 4 | 1 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--base-color-brand--blue` | `#0077a2` | Primary CTAs, brand links, active states | 37 | 1 | Computed style |
| `--base-color-brand--dark-blue` | `#272e3e` | Decorative section backgrounds (About page) | 1 | 1 | Decorative only |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `--text-color--text-success` | `#93ba45` | Success indicators |
| `--text-color--text-error` | `#ef4c3b` | Error states, validation |
| `--base-color-brand--yellow` | `#ffc616` | Warning/Highlight accents |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Inter Tight | 500, 600 | Display and section headings | Inter Tight (Google) | SIL Open Font |
| Inter | 300, 400, 500, 600, 700 | Body, UI labels, buttons, quotes | Inter (Google) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-h1` | 80px | 96px | normal | 600 | Main Hero | `h1.heading-style-h1` |
| `display-h2` | 56px | 67.2px | normal | 500 | Section Heads | `h2.heading-style-h2` |
| `display-stats` | 56px | 67.2px | normal | 600 | Numerical highlights | `div.stats_number` |
| `heading-quote` | 28px | 42px | normal | 400 | Testimonials | `p.testimonial-quote` |
| `heading-h4` | 24px | 33.6px | normal | 600 | Card Titles | `h3.heading-style-h4` |
| `body-lg` | 20px | 30px | normal | 600 | Lead paragraphs | `div.text-size-large` |
| `body-md` | 18px | 27px | normal | 300 | Default running text | `p.text-size-medium` |
| `body-sm` | 16px | 24px | normal | 300 | Footer/Secondary text | `header.section_home-hero` |
| `button-label` | 16px | 16px | normal | 600 | CTA text | `div.button.is-link` |

### Principles
1. **Light Body Weight:** Standard prose uses Inter at weight 300, creating a sophisticated, airy feel.
2. **Tight Heading Tracking:** Display headings use Inter Tight to maintain high density even at large scales (80px).
3. **Semantic Boldness:** Weight 700 is reserved strictly for `strong` emphasis within prose.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `--spacing-xs` | 4px | 4 |
| `--spacing-base` | 16px | 20 |
| `--spacing-lg` | 24px | 17 |
| `--spacing-xl` | 32px | 10 |
| `--spacing-xxl` | 40px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-sharp` | 0px | Section containers | 126 occurrences |
| `radius-card` | 20px | Feature cards, pricing tiers | `Card` component |
| `radius-pill` | 48px | Primary and secondary buttons | `Rounded Button` component |
| `radius-panel` | 100px | Decorative background elements | 4 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `brand-float` | `rgba(0, 119, 162, 0.05) 60.73px 51.62px 84.23px 0px` | Feature cards on white canvas | Card component |
| `subtle-float` | `rgba(51, 102, 255, 0.05) 34.85px 29.63px 48.34px 0px` | Secondary hover states | Observed once |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** https://strigo.io, https://strigo.io/pricing
**Spec:** Background `#0077a2` (Primary) or `transparent` (Secondary) / Text `#ffffff` or `#0077a2` / Border `#0077a2` / Radius `48px` / Padding `16px 24px` / Typography `Inter 600 16px`
**States observed:** Default | Hover | Active: captured

#### Surface
**Role:** Structural layout containers
**Pages observed:** https://strigo.io, https://strigo.io/pricing
**Spec:** Background `#ffffff` / Text `#333333` / Border `0px` / Radius `0px` / Padding `32px`
**States observed:** Default: captured

### Tier 2: Patterns

#### Card
**Role:** Feature highlights and pricing tiers
**Pages observed:** https://strigo.io, https://strigo.io/pricing
**Spec:** Background `#ffffff` / Text `#333333` / Border `1px #e5f4f2` / Radius `20px` / Shadow `rgba(0, 119, 162, 0.05) 60.73px 51.62px 84.23px 0px`
**States observed:** Default: captured

#### Testimonial Block
**Role:** Customer social proof
**Pages observed:** https://strigo.io
**Spec:** Background `transparent` / Text `#333333` / Typography `Inter 400 28px` (Quote) / Radius `20px`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Lab Stats Plate
**Role:** High-impact data visualization
**Pages observed:** https://strigo.io
**Spec:** Background `#ffffff` / Text `#0077a2` (Numbers) / Typography `Inter 600 56px` / Shadow `brand-float`
**States observed:** Default: captured

#### Navigation Bar
**Role:** Global site header
**Pages observed:** https://strigo.io, https://strigo.io/about
**Spec:** Background `#ffffff` / Text `#333333` / Height `80px` / Border-bottom `1px #e5f4f2`
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Padding (Vertical) | 80px - 120px |
| Column Gap | 32px |

## Do's
- Use **Inter 300** for all multi-line body descriptions to maintain brand airiness.
- Apply the **sea-blue shadow** (`#0077a2` at 5% alpha) to all white cards on white backgrounds.
- Ensure all primary buttons use the **48px pill radius**.
- Use `#e5f4f2` for subtle borders to avoid the harshness of pure gray.
- Anchor display headings in **Inter Tight** at weight 600.

## Don'ts
- **Wrong:** Using pure black `#000000` for text. **Right:** Use `#333333`. **Reason:** Maintains the softer, technical-editorial contrast.
- **Wrong:** Using a standard 4px or 8px radius for cards. **Right:** Use `20px`. **Reason:** Strigo's identity relies on exaggerated geometric softness.
- **Wrong:** Using `#0077a2` for large background surfaces. **Right:** Use it for actions and accents only. **Reason:** The brand is "monochrome-plus," not a fully chromatic blue brand.

## Quick start

```css
/* Strigo Design Tokens */
:root {
  --strigo-blue: #0077a2;
  --strigo-black: #333333;
  --strigo-mint-gray: #e5f4f2;
  --strigo-white: #ffffff;
  
  --font-display: 'Inter Tight', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  --radius-card: 20px;
  --radius-pill: 48px;
  
  --shadow-brand: 60.73px 51.62px 84.23px 0px rgba(0, 119, 162, 0.05);
}
```

## Known gaps
- Hover state transitions for the sea-blue shadow were not captured in the static evidence.
- The specific mobile menu transition logic was not detailed in the analyzed pages.
- Dark mode variants for the primary blue were not observed.