# Zluri Design System

> A high-contrast enterprise interface pairing warm parchment foundations with a technical royal blue signal.

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

## TL;DR
Zluri utilizes a "Warm Monochrome" system where the interface is grounded in a parchment-like off-white (`#fbf9f6`) rather than sterile white. This base is punctuated by a high-voltage Royal Blue (`#366ecf`) used for primary actions and technical emphasis. Typography relies on the geometric precision of **Satoshi** for display headers and **Inter** for functional UI and body text. The system uses generous spacing (base 4px, often seen in 20px/40px increments) and soft, large-radius geometry (8px to 100px) to balance its technical enterprise capabilities with an accessible, modern aesthetic.

## Signature DNA
1. **The Parchment Canvas** (The use of `{colors.warm-white-1}` (#fbf9f6) as the primary background across all pages creates a distinct, non-clinical atmosphere compared to standard SaaS white.)
2. **Royal Signal** (Primary actions and key brand moments use `{colors.primary-blue-2}` (#366ecf), providing a 4.7:1 contrast ratio against the warm canvas for high legibility and "technical" energy.)
3. **Geometric Softness** (A consistent application of `{radii.control}` (8px) for cards and `{radii.pill}` (100px) for primary buttons softens the enterprise-grade data density.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.warm-white-1}` | `#fbf9f6` | Page background, primary surface | 163 | 1.0 | `--warm--white-1` |
| `{colors.warm-black-3}` | `#161411` | Primary text, dark surface backgrounds | 155 | 1.0 | `--warm--black-3` |
| `{colors.warm-black-1}` | `#474640` | Secondary text, borders, button text | 179 | 1.0 | `--warm--black-1` |
| `{colors.warm-white-3}` | `#e2ded7` | Dividers, card outlines, subtle surfaces | 65 | 1.0 | `--warm--white-3` |
| `{colors.white}` | `#ffffff` | Card surfaces, button text | 43 | 0.8 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.primary-blue-2}` | `#366ecf` | Primary button BG, brand text | 7 | 1.0 | `--primary--blue-2` |
| `{colors.primary-blue-3}` | `#1d4ba6` | Hover states, secondary button text | 5 | 1.0 | `--primary--blue-3` |
| `{colors.orange-accent}` | `#e5704e` | Decorative text, secondary accents | 6 | 0.6 | Computed |
| `{colors.dark-green}` | `#1b9464` | Decorative text only | 3 | 1.0 | `--dark-green` |
| `{colors.red-decorative}` | `#8e1c00` | Decorative only (hiring banner) | 2 | 1.0 | `--red` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Satoshi | 500 | Display, Headings | Plus Jakarta Sans | Proprietary (Fontshare) |
| Inter | 400, 500, 600, 700 | Body, UI, Navigation | Inter (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display-lg}` | 56px | 67.2px | normal | 500 | Hero H1 | `h1.access-requests-page-main-heading-1` |
| `{text.display-md}` | 40px | 48px | normal | 500 | Section Headers | `h2.home_problem_title` |
| `{text.heading-lg}` | 32px | 38.4px | normal | 500 | Sub-section titles | `h3.ring_info_title` |
| `{text.heading-md}` | 28px | 33.6px | normal | 500 | Resource headings | `div.rsrc_heading` |
| `{text.heading-sm}` | 24px | 28.8px | normal | 500 | Card titles | `h3.home_problem_card_title` |
| `{text.body-lg}` | 20px | 30px | normal | 400 | Hero subtext, CTAs | `a.cta_button` |
| `{text.body-md}` | 16px | 24px | normal | 400 | Default body copy | `a.banner_wrap` |
| `{text.body-sm}` | 14px | 21.84px | normal | 400 | Footer, Copyright | `div.copyright-text` |
| `{text.eyebrow}` | 12px | 18px | 1.2px | 600 | Section labels | `div.home_hero_eyebrow` |

### Principles
1. **Display weight is locked at 500.** Satoshi is never used at heavy weights; the geometry provides the authority.
2. **High-contrast functional text.** Inter 600 is used for navigational labels to ensure legibility against the warm canvas.
3. **Wide-tracked eyebrows.** Small labels (12px) use 1.2px letter spacing to maintain clarity in all-caps or bold treatments.

## Spacing
**Base unit:** 4px
Table: | Token | Value | Occurrences |
|---|---|---|---|
| `{space.xs}` | 8px | 11 |
| `{space.sm}` | 12px | 20 |
| `{space.md}` | 16px | 20 |
| `{space.lg}` | 20px | 28 |
| `{space.xl}` | 32px | 6 |
| `{space.section}` | 40px | 11 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Section containers | 494 occurrences |
| `{radius.control}` | 8px | Standard cards, inputs | 45 occurrences |
| `{radius.card-lg}` | 16px | Feature cards | 10 occurrences |
| `{radius.pill}` | 100px | Primary CTA buttons | 7 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.flat}` | none | Default card state | Observed across 18 cards |
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.1) 0px 0px 10px 0px` | Floating pricing/feature cards | 2 occurrences |
| `{shadow.heavy}` | `rgba(0, 0, 0, 0.03) 0px 55px...` | Modals / Overlays | 2 occurrences |

## Components
### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Book a demo")
**Pages observed:** 2
**Spec:** Background `{colors.primary-blue-2}` (#366ecf) / Text `{colors.white}` (#ffffff) / Radius `{radius.pill}` (100px) / Padding 8px 20px / Typography `{text.body-md}`
**States observed:** Default: Captured | Hover: Not captured

#### Secondary Button
**Role:** Ghost/Outline actions
**Pages observed:** 2
**Spec:** Background transparent / Text `{colors.primary-blue-3}` (#1d4ba6) / Border 1px `{colors.primary-blue-3}` / Radius `{radius.sharp}` (0px) / Padding 0px
**States observed:** Default: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Content grouping for product capabilities
**Pages observed:** 2
**Spec:** Background `{colors.white}` (#ffffff) / Border 1px `{colors.warm-white-3}` (#e2ded7) / Radius `{radius.control}` (8px) / Padding 16px
**States observed:** Default: Captured

#### Dark Surface Section
**Role:** High-impact brand messaging or footer
**Pages observed:** 2
**Spec:** Background `{colors.warm-black-3}` (#161411) / Text `{colors.white}` (#ffffff) / Radius `{radius.sharp}` (0px) / Padding 48px 32px
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Pricing Tier Card
**Role:** Pricing plan display
**Pages observed:** 1 (Pricing page)
**Spec:** Background `{colors.white}` (#ffffff) / Radius `{radius.card-lg}` (16px) / Shadow `{shadow.subtle}` / Padding 0px 44px
**States observed:** Default: Captured

#### Product Tab Link
**Role:** Navigation within product menus
**Pages observed:** 1
**Spec:** Text `{colors.warm-black-1}` (#474640) / Typography `{text.body-sm}` / Letter-spacing 1.4px / Weight 500
**States observed:** Default: Captured

## Layout
| Property | Value |
|---|---|
| Page Max-Width | 1440px |
| Container Padding | 32px (Desktop) |
| Section Gap | 80px |

## Imagery & decoration
Zluri uses technical, abstract diagrams (Venn diagrams, network nodes) to illustrate identity security concepts. It avoids generic stock photography in favor of high-fidelity product screenshots and stylized iconography.

## Do's
- Use `#fbf9f6` for the primary background to maintain brand warmth.
- Apply `{radius.pill}` (100px) only to primary "Royal Blue" buttons.
- Use Satoshi 500 for all headlines above 24px.
- Maintain 4.7:1 contrast by placing `#366ecf` text only on `#fbf9f6` or `#ffffff`.
- Use 1.2px letter spacing for all uppercase eyebrow labels.

## Don'ts
- **Wrong:** Using `#366ecf` as a background for sub-brand specific sections. **Right:** Use the parent primary only for global CTAs. **Reason:** Sub-brand colors like the hiring red (`#8e1c00`) are decorative and should not be confused with primary action tokens.
- Do not use Satoshi at weights heavier than 500 for headlines.
- Do not use pure black (`#000000`) for body text; use `{colors.warm-black-1}` (#474640).
- Do not apply shadows to standard feature cards; keep them flat with a 1px border.

## Similar brands
- Vanta (Enterprise security, clean typography)
- Okta (Identity focus, blue primary)
- Stripe (High-fidelity documentation and clean surfaces)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-canvas: #fbf9f6;
  --color-ink: #161411;
  --color-primary: #366ecf;
  --color-border: #e2ded7;
  --font-display: 'Satoshi', sans-serif;
  --font-body: 'Inter', sans-serif;
  --radius-control: 8px;
  --radius-pill: 100px;
}
```

## Known gaps
- Hover and Active states for primary buttons were not explicitly captured in the computed style evidence.
- Mobile-specific breakpoint transitions for the 56px display type were not fully mapped.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://zluri.com | 1440px | 2026-06-06 |
| Pricing | https://zluri.com/pricing | 1440px | 2026-06-06 |