# Kaiostech Design System

> High-contrast monochrome foundation punctuated by a singular, vibrant digital purple.

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

## TL;DR
Kaiostech utilizes a "monochrome plus one" system where a stark black (`#000000`) and white (`#ffffff`) canvas is energized by a signature KaiOS Purple (`#851dd6`). Typography is dominated by a clean, geometric sans-serif (likely Montserrat or similar) used in heavy weights for headlines to establish authority. The interface relies on generous white space and thin gray dividers to organize content, while primary actions and brand moments are reserved for the purple accent. Component geometry is strictly pill-shaped for buttons and cookie banners, creating a friendly but modern mobile-first aesthetic.

## Signature DNA
1. **The Purple Pivot** (The use of `#851dd6` as the exclusive brand voltage against a grayscale UI, seen on the hero CTA and cookie banner).
2. **Pill-Shaped Interactivity** (All high-priority interactive elements, from the "Watch video" button to the "OK" cookie consent, use a max-radius pill shape).
3. **Geometric Headline Weight** (Headlines use bold, tightly tracked sans-serif type to anchor the page sections against the illustrative background).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--wp--preset--color--white` | `#ffffff` | Primary page background | High | 100% | Declared Token |
| `--wp--preset--color--black` | `#000000` | Primary text, footer background | High | 100% | Declared Token |
| `--wp--preset--color--cyan-bluish-gray` | `#abb8c3` | Secondary text, subtle borders | Medium | 90% | Declared Token |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--wp--preset--color--kai-os` | `#851dd6` | Primary brand accent, CTAs, Hero backgrounds | High | 100% | Declared Token |
| `--wp-bound-block-color` | `#7a00df` | Hover states / alternative purple | Low | 80% | Declared Token |

### Semantic
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--wp--preset--color--vivid-red` | `#cf2e2e` | Error / destructive (not captured in UI) | Low | 70% | Declared Token |
| `--wp--preset--color--vivid-green-cyan` | `#00d084` | Success / confirmation (not captured in UI) | Low | 70% | Declared Token |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|-------|------|-------------|------------|
| Sans-Serif (Geometric) | 400, 700 | All headlines and body | Montserrat | Proprietary/Web |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|-------|-------------|----------------|--------|-----|-------------------|
| `{typography.h1}` | 48px | 1.1 | -0.02em | 700 | Hero Headline | `h1` |
| `{typography.h2}` | 36px | 1.2 | -0.01em | 700 | Section Headers | `h2` |
| `{typography.h3}` | 24px | 1.3 | 0 | 700 | Card Titles | `h3` |
| `{typography.body-lg}` | 18px | 1.5 | 0 | 400 | Intro Text | `.intro-text` |
| `{typography.body}` | 16px | 1.6 | 0 | 400 | Standard Prose | `p` |
| `{typography.nav}` | 14px | 1.0 | 0.05em | 700 | Top Navigation | `.nav-link` |
| `{typography.button}` | 14px | 1.0 | 0 | 700 | CTA Labels | `.button` |
| `{typography.caption}` | 12px | 1.4 | 0 | 400 | Footer Links | `footer a` |

### Principles
1. **Bold for Impact:** All section headings must be weight 700 to compete with colorful illustrations.
2. **Tight Tracking on Headlines:** Large type uses negative letter spacing (-0.01em to -0.02em) for a more "locked-in" feel.
3. **Generous Body Leading:** Paragraph text uses 1.6 line height to ensure legibility on mobile viewports.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{spacing.xs}` | 8px | Button internal padding (vertical) |
| `{spacing.md}` | 24px | Card internal padding |
| `{spacing.lg}` | 48px | Section vertical rhythm (mobile) |
| `{spacing.xl}` | 80px | Section vertical rhythm (desktop) |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.pill}` | 9999px | Buttons, Cookie Banner Actions | Hero CTA |
| `{radius.md}` | 12px | Content Cards | About Page Cards |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `flat` | none | Default state | Most sections |
| `raised` | 0 4px 20px rgba(0,0,0,0.08) | Hovered cards | Feature Grid |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** Homepage, About
**Spec:** Background: `#851dd6` | Text: `#ffffff` | Radius: `9999px` | Padding: `12px 32px` | Typography: `700 14px`
**States observed:** Default | Hover: Not captured

#### Ghost Button
**Role:** Secondary actions (e.g., "Learn More")
**Pages observed:** Homepage
**Spec:** Background: `transparent` | Text: `#851dd6` | Border: `none` | Typography: `700 14px` | Decoration: `underline`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Cookie Consent Banner
**Role:** Legal compliance
**Pages observed:** All
**Spec:** Background: `#222222` | Text: `#ffffff` | Position: `bottom-fixed` | Button: `Pill #851dd6`
**States observed:** Default

#### Top Navigation
**Role:** Global site movement
**Pages observed:** All
**Spec:** Background: `#000000` | Text: `#ffffff` | Height: `60px` | Logo: `White SVG`
**States observed:** Default

### Tier 3: Surface-specific

#### Feature Card
**Role:** Highlighting blog or support categories
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` | Border: `1px solid #eeeeee` | Radius: `12px` | Padding: `24px`
**States observed:** Default | Hover: `raised`

#### Search Bar (Help Center)
**Role:** Documentation entry point
**Pages observed:** Help Center
**Spec:** Background: `#ffffff` | Border: `1px solid #abb8c3` | Radius: `4px` | Icon: `Magnifying Glass`
**States observed:** Default

## Layout
| Property | Value |
|------|-------|
| Max-width | 1200px |
| Gutter | 24px |
| Section Gap | 100px (Desktop) |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | < 768px | Navigation collapses to hamburger; Hero text aligns center |
| Desktop | > 1024px | 2-column hero layouts; horizontal nav visible |

## Imagery & decoration
Kaiostech uses **stylized isometric illustrations** featuring hands holding mobile devices. These illustrations use a broader palette (pinks, blues, greens) than the UI, but always feature the signature purple to tie back to the brand.

## Do's
- Use `#851dd6` for the primary action on every page.
- Ensure headlines are weight 700 and `#000000`.
- Use pill-shaped buttons for all contained CTAs.
- Maintain a minimum of 80px vertical spacing between homepage sections.
- Use white backgrounds for content cards to maintain high contrast.

## Don'ts
- **Wrong:** Using `#0693e3` (Vivid Cyan Blue) for a primary button. **Right:** Use `#851dd6`. **Reason:** Saturated blues/oranges in the tokens are for sub-brands or illustrations, not parent brand UI.
- Do not use square corners on buttons.
- Do not use purple text for long-form body copy; keep body text `#000000` or dark gray.
- Do not place purple buttons directly on top of busy illustrations without a clear margin.

## Similar brands
- **Logitech** (Bold geometric type, high-contrast monochrome)
- **Roku** (Purple accent, clean white surfaces)
- **Firefox** (Shared heritage, focus on open-source accessibility)

## Quick start

```css
/* CSS Variables */
:root {
  --kai-purple: #851dd6;
  --kai-black: #000000;
  --kai-white: #ffffff;
  --kai-gray: #abb8c3;
  --radius-pill: 9999px;
}
```

```javascript
// Tailwind v4
@theme {
  --color-primary: #851dd6;
  --color-surface: #ffffff;
  --font-display: "Montserrat", sans-serif;
  --radius-pill: 9999px;
}
```

## Agent prompt examples
- "Create a primary CTA button using the Kaiostech pill shape and signature purple `#851dd6` with white bold text."
- "Design a feature card with a 12px border radius, white background, and a 'Learn More' link in purple with an underline."
- "Generate a hero section with a bold `#000000` H1 at 48px and a pill-shaped purple button."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static source.
- Exact font files were not identified; geometric sans-serif is used as a high-confidence proxy.

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