# Loginid Design System

> High-contrast enterprise security canvas utilizing deep indigo ink on a cool-white foundation with vibrant electric blue primary actions.

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

## TL;DR
Loginid employs a "monochrome-plus-one" strategy where a deep indigo palette (`#363a63`, `#232b97`) provides the structural authority required for a security platform, while a single high-voltage blue (`#006dff`) drives all primary conversions. The interface is built on a cool-white canvas (`#fafafd`) with generous 96px vertical section pacing. Typography is exclusively **Geist**, leveraging its geometric clarity across a wide scale from 64px display headers to 12px captions. Components favor a functional 8px border radius and subtle, low-blur shadows to maintain a crisp, engineering-led aesthetic.

## Signature DNA
1. **The Indigo Anchor** (Deep indigo `#363a63` and `#232b97` are used for all structural text and borders, replacing standard grays to create a distinct "security-tech" atmosphere across all pages.)
2. **Signal Blue CTAs** (The use of `#006dff` is strictly reserved for primary actions and key brand moments, creating a high-contrast focal point against the muted indigo and white background.)
3. **Geist Geometric Hierarchy** (The system relies on the Geist typeface family to bridge the gap between technical documentation and marketing, using weight 500 for all headings to maintain a consistent "medium" density.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--background-color-2` | `#fafafd` | Page background, primary surface | 13 | 1 | Computed Style |
| `--text-color-1` | `#363a63` | Primary text, headings | 36 | 1 | CSS Variable |
| `foundation-black` | `#000000` | Secondary text, footer elements | 40 | 0.8 | Computed Style |
| `foundation-white` | `#ffffff` | Button text on primary CTAs | 4 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--brand-color-2` | `#006dff` | Primary CTA background, active states | 5 | 1 | CSS Variable |
| `--text-color-2` | `#70738f` | Muted body text, secondary labels | 32 | 1 | CSS Variable |
| `--brand-color-1` | `#232b97` | Brand accents, icons, borders | 11 | 1 | CSS Variable |
| `--border-color-1` | `#4a4e77` | Card borders, dividers | 15 | 1 | CSS Variable |
| `--brand-color-3` | `#f3d8eb` | Decorative "Coming Soon" tags | 2 | 1 | Decorative Only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Geist | 400, 500, 600 | All UI, Heading, Body | Geist (Vercel) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `display-mega` | 64px | 73.6px | normal | 500 | Hero H1 | `h1` |
| `heading-lg` | 36px | 41.4px | normal | 500 | Section Headers | `h2` |
| `heading-sm` | 24px | 28.8px | normal | 500 | Card Titles | `h3` |
| `body-lg` | 19px | 30.72px | normal | 400 | Hero Subtext | `p.text-lg` |
| `body-md` | 16px | 18.4px | normal | 400 | Default Body | `section.homepage` |
| `body-md-bold` | 16px | 24px | normal | 500 | Nav Links | `a` |
| `button-label` | 14px | 21px | normal | 600 | CTA Text | `a.btn.primary` |
| `caption` | 12px | 18px | normal | 400 | Small Metadata | `span` |

### Principles
- **Heading Weight Consistency:** All headings (H1-H3) utilize weight 500; bold (600+) is reserved for small-scale button labels.
- **Indigo-Tinted Body:** Running text never uses pure gray; it is always tinted with indigo (`#363a63` or `#70738f`) to maintain brand cohesion.
- **Generous Leading:** Body text at 19px uses a 1.6x line-height (30.72px) to ensure legibility in dense technical descriptions.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `space-xs` | 8px | 6 |
| `space-md` | 16px | 33 |
| `space-lg` | 24px | 18 |
| `space-section` | 96px | 2 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `radius-none` | 0px | Section containers, decorative blocks | 101 occurrences |
| `radius-md` | 8px | Buttons, content cards, input fields | 16 occurrences |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `shadow-low` | `rgba(35, 43, 151, 0.25) 0px 1px 2px 0px` | Primary Buttons | `a.btn.primary` |
| `shadow-card` | `rgba(58, 62, 103, 0.1) 0px 2px 8px 0px` | Secondary/Hovered Buttons | `observed_once: Rounded Button` |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call-to-action (e.g., "Start Building")
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#006dff` / Text: `#ffffff` / Radius: `8px` / Padding: `0px 16px` / Typography: `14px weight 600` / Shadow: `rgba(35, 43, 151, 0.25) 0px 1px 2px 0px`
**States observed:** Default: Captured | Hover: Not captured

#### Secondary Button
**Role:** Alternative actions (e.g., "Talk to an expert")
**Pages observed:** Homepage
**Spec:** Background: `#fafafd` / Text: `#363a63` / Border: `1px solid rgba(74, 78, 119, 0.2)` / Radius: `8px` / Padding: `0px 16px` / Shadow: `rgba(58, 62, 103, 0.1) 0px 2px 8px 0px`
**States observed:** Default: Captured | Hover: Not captured

### Tier 2: Patterns

#### Content Card
**Role:** Feature highlights and solution blocks
**Pages observed:** Homepage
**Spec:** Background: `#fafafd` / Border: `1px solid rgba(74, 78, 119, 0.2)` / Radius: `8px` / Padding: `0px` / Typography: `16px Geist`
**States observed:** Default: Captured

#### Coming Soon Tag
**Role:** Feature roadmap indicator
**Pages observed:** Homepage
**Spec:** Background: `#f3d8eb` / Text: `#363a63` / Radius: `4px` (inferred) / Typography: `12px Geist`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Section Surface
**Role:** Alternating background bands for visual rhythm
**Pages observed:** Homepage, Pricing
**Spec:** Background: `rgba(30, 40, 152, 0.05)` (Indigo tint) / Padding: `96px 0px` / Radius: `0px`
**States observed:** Default: Captured

#### Demo Device Frame
**Role:** Product visualization container
**Pages observed:** Homepage
**Spec:** Background: `linear-gradient` (visual) / Border: `1px solid #4a4e77` / Radius: `24px` (visual)
**States observed:** Default: Captured

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1200px (approx) |
| Section Padding (Vertical) | 96px |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Desktop | 1440px | Horizontal nav, multi-column feature grids |
| Mobile | 390px | Stacked cards, hamburger menu, reduced padding |

## Imagery & decoration
Loginid uses technical, abstract line art (e.g., the "Spirograph" wireframe in the footer) and clean device mockups. It avoids stock photography of people, preferring isometric illustrations of hardware and security tokens to emphasize the "infrastructure" nature of the product.

## Do's
- Use `#006dff` for the primary "Start Building" or "Sign Up" actions only.
- Apply the 8px border radius to all interactive elements (buttons, cards).
- Use Geist weight 500 for all section headings to maintain consistent visual density.
- Maintain a 96px vertical gap between major content sections.
- Tint all borders and dividers with the indigo-based `--border-color-1` (`#4a4e77`).

## Don'ts
- **Wrong:** Using pure gray `#808080` for secondary text. **Right:** Use `#70738f`. **Reason:** Pure grays feel "dead" against the indigo brand palette.
- **Wrong:** Using `#006dff` for large background surfaces. **Right:** Use `rgba(30, 40, 152, 0.05)`. **Reason:** The primary blue is a high-energy signal color, not a structural surface color.
- **Wrong:** Applying heavy blurs to shadows. **Right:** Use the tight `0px 1px 2px` shadow. **Reason:** The brand identity is built on precision and sharpness.

## Similar brands
- Vercel (Typography and spacing)
- Clerk (Security-focused UI patterns)
- Stripe (Section rhythm and indigo-tinted surfaces)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --loginid-primary: #006dff;
  --loginid-indigo-deep: #363a63;
  --loginid-indigo-muted: #70738f;
  --loginid-canvas: #fafafd;
  --loginid-border: #4a4e77;
  --loginid-radius: 8px;
  --loginid-shadow: rgba(35, 43, 151, 0.25) 0px 1px 2px 0px;
}
```

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- The specific radius for the "Coming Soon" tag was not quantified in the token list.
- Mobile-specific typography scaling (fluid type) was not fully sampled.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://loginid.io | 1440px | 2026-06-06 |
| Pricing | https://loginid.io/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://loginid.io | 390px | 2026-06-06 |