# Identos Design System

> High-contrast utility meets institutional trust through deep navy foundations and high-visibility yellow punctuation.

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

## TL;DR
Identos utilizes a high-contrast "Dark Navy and Gold" palette to establish a secure, professional atmosphere for healthcare and public sector identity services. The system relies on a white base canvas (`#ffffff`) anchored by a primary navy (`#192d41`) for text and structural elements, while a vibrant yellow (`#ffcb05`) serves as the exclusive signal for primary actions and highlights. Typography is strictly **Open Sans**, utilizing weights from 300 to 700 to create hierarchy without switching families. Components feature generous 30px pill-shaped radii for buttons, contrasted against sharp 0px corners for large section containers and 10px radii for content cards.

## Signature DNA
1. **The High-Visibility Pill** (Primary CTAs use a `#ffcb05` background with `#192d41` text and a `30px` radius, creating a "safety vest" level of prominence against white or navy backgrounds.)
2. **Institutional Navy Anchoring** (The use of `--dnavy` `#192d41` for both primary headings and the footer background creates a bookended structure that signals security and stability.)
3. **Open Sans Weight Layering** (The brand avoids font-pairing, instead using Open Sans at 600 for display, 700 for subheaders, and 400 for body to maintain a clean, utilitarian aesthetic.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--white` | `#ffffff` | Page background, primary surface | 58 | 1 | `computed_style` |
| `--black` | `#060b12` | Dark section backgrounds, footer | 3 | 1 | `--_new-site-vars---black` |
| `--dgrey` | `#6d6d6d` | Secondary body text, descriptions | 14 | 1 | `--_new-site-vars---colors--primary-grey` |
| `--charcoal` | `#222222` | High-contrast text on light surfaces | 16 | 0.8 | `computed_style` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--yellow` | `#ffcb05` | Primary CTA background, active states | 30 | 1 | `--_new-site-vars---colors--primary-yellow` |
| `--dnavy` | `#192d41` | Primary text, button text, logo | 108 | 1 | `--_new-site-vars---colors--secondary-dark-navy` |
| `--lnavy` | `#1c4b79` | Secondary headings | 4 | 1 | `--_new-site-vars---colors--primary-navy` |
| `--lblue` | `#e6f2f9` | Decorative section background (decorative_only) | 2 | 1 | `--accent-light-blue` |
| `--lyellow` | `#fffae1` | Soft highlight background (decorative_only) | 1 | 1 | `--_new-site-vars---colors--secondary-light-yellow` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Open Sans | 300, 400, 600, 700 | All roles (Display, Body, UI) | Native | Google Fonts |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display}` | 40px | 44px | normal | 600 | Hero/Section Heads | `h2.heading-15` |
| `{text.h3}` | 24px | 26.4px | normal | 700 | Sub-section headings | `h3.heading-16` |
| `{text.h3-alt}` | 20px | 30px | normal | 700 | Feature titles | `h3.identos-h3-lblue` |
| `{text.h4}` | 20px | 22px | normal | 700 | Small headings | `h4.heading-17` |
| `{text.cta}` | 20px | 22px | -0.5px | 700 | Primary button text | `a.new_btn.cta` |
| `{text.body}` | 16px | normal | normal | 400 | Default paragraph | `section.new_section` |
| `{text.body-bold}` | 16px | normal | normal | 700 | Emphasized body | `p.paragraph-52` |
| `{text.footer-head}` | 16px | 20.8px | normal | 700 | Footer column labels | `h6.footer_heading` |
| `{text.body-sm}` | 14px | normal | normal | 400 | Small descriptors | `p.paragraph-7` |

### Principles
1. **Tight Display Leading:** Large headings (`40px`) use a tight `1.1` line-height ratio (`44px`) to maintain visual density.
2. **Negative Tracking on CTAs:** Interactive elements at `20px` or `16px` use `-0.5px` letter spacing to increase "punch" and readability.
3. **Weight as Hierarchy:** The system differentiates content types by jumping from `400` (body) directly to `700` (headings) rather than using intermediate weights.

## Spacing
**Base unit:** 4px (approximate)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 51 |
| `{space.sm}` | 10px | 27 |
| `{space.md}` | 20px | 25 |
| `{space.lg}` | 32px | 13 |
| `{space.xl}` | 40px | 19 |
| `{space.section}` | 80px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Section containers, full-width bands | 181 occurrences |
| `{radius.md}` | 10px | Content cards, blog thumbnails | 14 occurrences |
| `{radius.lg}` | 24px | Feature cards | 3 occurrences |
| `{radius.pill}` | 30px | Buttons, tags | 6 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgba(34, 63, 85, 0.5) 0px 2px 6px 0px` | Floating content cards | 6 occurrences |
| `{shadow.soft}` | `rgba(20, 20, 43, 0.06) 0px 2px 7px 0px` | Subtle feature containers | 3 occurrences |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary site-wide CTA
**Pages observed:** https://identos.com, https://identos.com/about
**Spec:** Background `#ffcb05` / Text `#192d41` / Border `#ffcb05` (2px) / Radius `30px` / Padding `14px 32px` / Typography `Open Sans 16px Bold`
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Footer
**Role:** Global navigation and site info
**Pages observed:** https://identos.com, https://identos.com/about
**Spec:** Background `#060b12` / Text `#ffffff` / Border `None` / Radius `0px` / Padding `80px 40px 48px`
**States observed:** Default captured.

### Tier 2: Patterns

#### Content Card
**Role:** Blog posts and news items
**Pages observed:** https://identos.com
**Spec:** Background `#ffffff` / Text `#192d41` / Border `None` / Radius `10px` / Padding `41px 41px 31px` / Shadow `rgba(34, 63, 85, 0.5) 0px 2px 6px 0px`
**States observed:** Default captured.

#### Feature Surface (Yellow)
**Role:** High-impact promotional sections
**Pages observed:** https://identos.com, https://identos.com/about
**Spec:** Background `#ffcb05` / Text `#192d41` / Border `None` / Radius `0px` / Padding `30px 40px`
**States observed:** Default captured.

### Tier 3: Surface-specific

#### Light Blue Section
**Role:** Alternating content bands
**Pages observed:** https://identos.com, https://identos.com/about
**Spec:** Background `#e6f2f9` / Text `#192d41` / Border `None` / Radius `0px` / Padding `40px`
**States observed:** Default captured.

#### Outline Surface
**Role:** Secondary content grouping
**Pages observed:** https://identos.com, https://identos.com/about
**Spec:** Background `transparent` / Text `#192d41` / Border `#ffcb05` (1px) / Radius `0px` / Padding `15px 0px 0px`
**States observed:** Default captured.

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px (estimated) |
| Section Padding | 80px (vertical) |
| Card Grid Gap | 20px - 32px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 16px; buttons become full-width. |

## Imagery & decoration
Identos uses photographic overlays of diverse professionals and healthcare scenarios, often framed within circular masks or overlaid with vector "node and line" graphics to represent connectivity. The brand avoids complex gradients, preferring solid color blocks of `#ffcb05` or `#e6f2f9` to separate content.

## Do's
- Use `#ffcb05` exclusively for primary user actions.
- Pair `#192d41` text with `#ffffff` backgrounds for maximum accessibility (14.1:1 contrast).
- Apply a `30px` radius to all interactive buttons.
- Use Open Sans 600 for all section headers.
- Maintain `80px` vertical spacing between major content sections.

## Don'ts
- **Wrong:** Using a light blue button background. **Right:** Use `#ffcb05`. **Reason:** Light blue `#e6f2f9` is a decorative surface token, not an action token.
- **Wrong:** Applying rounded corners to full-width section backgrounds. **Right:** Use `0px` radius. **Reason:** The brand uses sharp containers for structural layout.
- **Wrong:** Mixing serif fonts with Open Sans. **Right:** Stay within the Open Sans family. **Reason:** Identos is a single-family system.
- **Wrong:** Using `#ffcb05` for body text. **Right:** Use `#192d41` or `#6d6d6d`. **Reason:** Yellow text on white fails legibility standards.

## Similar brands
- Okta (Security-focused, navy/white foundations)
- Telus Health (Healthcare utility, clean sans-serif, color-blocked sections)
- Microsoft Security (Institutional blue, high-contrast action colors)

## Quick start

### CSS Variables
```css
:root {
  --id-navy: #192d41;
  --id-yellow: #ffcb05;
  --id-grey: #6d6d6d;
  --id-white: #ffffff;
  --id-black: #060b12;
  --id-radius-pill: 30px;
  --id-radius-card: 10px;
  --id-shadow-card: 0px 2px 6px 0px rgba(34, 63, 85, 0.5);
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #ffcb05;
  --color-navy: #192d41;
  --color-surface: #ffffff;
  --font-sans: "Open Sans", sans-serif;
  --radius-pill: 30px;
  --radius-card: 10px;
}
```

## Agent prompt examples
- "Generate a hero section for Identos using a #ffffff background, a 40px Open Sans SemiBold heading in #192d41, and a pill-shaped button with #ffcb05 background."
- "Create a feature card with a 10px border radius, a white background, and the Identos card shadow (rgba(34, 63, 85, 0.5) 0px 2px 6px)."
- "Design a footer using #060b12 background and white Open Sans text, following the Identos 80px top padding convention."

## Known gaps
- Hover and Active states for buttons were not captured in the static analysis.
- Success and Error semantic tokens were not present on the analyzed marketing pages.
- Mobile-specific font scaling was inferred from viewport shifts but not explicitly tokenized.

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