# Kyso Design System

> A clean, high-contrast research canvas defined by deep indigo accents and sharp geometric layouts.

**Source:** [https://kyso.io](https://kyso.io) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Kyso utilizes a high-contrast monochrome foundation, pairing a pure white background (#ffffff) with deep slate and black typography. The brand's "voltage" is concentrated in a single functional accent: a vibrant indigo (#4338ca) used for primary actions and key surface highlights. Layouts are characterized by generous whitespace and a distinctive diagonal background split that creates a sense of forward momentum. Typography is strictly sans-serif, favoring tight tracking on large display headers (-1.5px) and comfortable leading on long-form body text (28px).

## Signature DNA
1. **The Indigo Pivot** (The use of #4338ca as the sole high-saturation color for primary CTAs and card backgrounds, creating a singular focal point against an otherwise achromatic canvas).
2. **Diagonal Sectioning** (A recurring background motif that splits the viewport diagonally, moving from top-right to bottom-left, observed on the homepage and 404 pages).
3. **Tight Display Tracking** (Large 60px headers use a significant -1.5px letter spacing to create a compact, authoritative "editorial" feel for technical announcements).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, primary surface | 6 | 1.0 | Computed |
| `{color.black}` | `#000000` | Primary display text | 15 | 0.8 | Computed |
| `{color.slate-900}` | `#111827` | Secondary display text, headings | 6 | 0.6 | Computed |
| `{color.zinc-800}` | `#27272a` | Footer text, secondary labels | 7 | 0.6 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.indigo-700}` | `#4338ca` | Primary CTA background, feature card surface | 3 | 0.6 | Computed |
| `{color.indigo-100}` | `#e0e7ff` | Text on indigo surfaces, subtle highlights | 4 | 0.6 | Computed |
| `{color.gray-700}` | `#374151` | Default body text | 12 | 0.8 | Computed |
| `{color.gray-600}` | `#4b5563` | Muted body text, metadata | 3 | 0.6 | Computed |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `{color.blue-500}` | `#3b82f6` | Focus ring color (`--tw-ring-color`) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| ui-sans-serif | 400, 500, 600, 700 | All roles (Display, Body, UI) | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 60px | 60px | -1.5px | 700 | Hero headlines | `h1.mt-10.text-4xl` |
| `{type.heading-lg}` | 32px | 32px | normal | 700 | Section titles | `h2.text-3xl` |
| `{type.body-lg}` | 18px | 32px | normal | 400 | Intro/Lead paragraphs | `p.mt-6.text-lg` |
| `{type.body-md}` | 16px | 28px | normal | 400 | Standard body copy | `p.mt-6` |
| `{type.body-md-bold}` | 16px | 28px | normal | 600 | Emphasized body | `p.text-base.font-semibold` |
| `{type.ui-md}` | 16px | 24px | normal | 400 | General UI elements | `div.bg-white` |
| `{type.ui-sm-bold}` | 14px | 24px | normal | 600 | Badges, inline links | `span.inline-flex` |
| `{type.ui-sm-medium}` | 14px | 20px | normal | 500 | Navigation, list items | `ul.flex.items-center` |

### Principles
1. **Vertical Rhythm:** Body text uses a generous 1.75x line-height (28px on 16px font) to ensure legibility in long-form "Team Notes."
2. **Display Compression:** As font size increases, letter spacing decreases, reaching -1.5px at the 60px tier.
3. **Weight Hierarchy:** Bold (700) is reserved for structural headings; Semi-bold (600) is used for interactive triggers and inline emphasis.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.0.5}` | 4px | 4 |
| `{space.1}` | 8px | 6 |
| `{space.1.5}` | 12px | 6 |
| `{space.3}` | 24px | 4 |
| `{space.4}` | 32px | 7 |
| `{space.5}` | 40px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Main layout containers, page sections | `div.bg-white` |
| `{radius.md}` | 6px | Buttons, cards, input fields | `a.inline-flex` |
| `{radius.pill}` | 9999px | Avatars, specific status tags | `role: pill` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.surface}` | `rgba(79, 70, 229, 0.1) 0px 20px 25px -5px` | Floating cards, featured content | Pricing/About pages |
| `{shadow.inset}` | `rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset` | Button borders, subtle container definition | Global components |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call-to-action (e.g., "Github", "Go back home")
**Pages observed:** [https://kyso.io](https://kyso.io), [https://kyso.io/404](https://kyso.io/404)
**Spec:** Background: `{color.indigo-700}` (#4338ca) / Text: `{color.white}` (#ffffff) / Radius: `{radius.md}` (6px) / Padding: 8px 12px / Typography: `{type.ui-sm-bold}`
**States observed:** Default | Hover: Not captured | Active: Not captured

### Tier 2: Patterns
#### Navigation Bar
**Role:** Global header
**Pages observed:** [https://kyso.io](https://kyso.io), [https://kyso.io/about](https://kyso.io/about)
**Spec:** Background: `{color.white}` (#ffffff) / Height: 64px / Text: `{color.zinc-800}` (#27272a) / Typography: `{type.ui-sm-medium}`
**States observed:** Default | Active: Not captured

### Tier 3: Surface-specific
#### Feature Card
**Role:** Highlighting specific research or product features
**Pages observed:** [https://kyso.io](https://kyso.io), [https://kyso.io/pricing](https://kyso.io/pricing)
**Spec:** Background: `{color.indigo-700}` (#4338ca) / Text: `{color.indigo-100}` (#e0e7ff) / Radius: `{radius.md}` (6px) / Shadow: `{shadow.surface}`
**States observed:** Default | Hover: Not captured

#### Content Surface
**Role:** Standard white container for text blocks
**Pages observed:** [https://kyso.io](https://kyso.io), [https://kyso.io/about](https://kyso.io/about)
**Spec:** Background: `{color.white}` (#ffffff) / Text: `{color.black}` (#000000) / Border: 1px inset `{color.gray-200}` / Radius: `{radius.none}`
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1280px |
| Section Padding | 40px (vertical) |
| Content Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to "Menu" dropdown; H1 font-size reduces. |
| Desktop | 1440px | Diagonal background split active; side-by-side hero layout. |

## Imagery & decoration
Kyso uses technical screenshots and video embeds (Loom) to demonstrate product value. Decoration is limited to the indigo diagonal background split and simple grayscale iconography (Github logo). It avoids photography and illustrative gradients.

## Do's
- Use `#4338ca` (Indigo 700) for all primary interaction points.
- Maintain a 28px line-height for body text to preserve the "Team Note" readability.
- Apply `-1.5px` letter spacing to headlines exceeding 48px.
- Use `{radius.md}` (6px) for all interactive elements like buttons and cards.
- Keep the background primarily white (`#ffffff`) to maintain high contrast.

## Don'ts
- Do not use rounded corners on main section containers; keep the layout sharp (`0px`).
- Do not introduce secondary accent colors; the system is strictly monochrome + indigo.
- **Wrong:** Using a generic blue (#3b82f6) for buttons. **Right:** Use Indigo (#4338ca). **Reason:** #3b82f6 is reserved for focus rings and browser-level semantics only.
- Do not use serif fonts; the brand is strictly sans-serif.

## Similar brands
- Linear (High contrast, monochrome with singular accent)
- Vercel (Geometric, type-heavy, sharp corners)
- Stripe (Diagonal sectioning, clean typography)

## Quick start
```css
/* CSS Custom Properties */
:root {
  --kyso-primary: #4338ca;
  --kyso-bg: #ffffff;
  --kyso-text-main: #111827;
  --kyso-text-body: #374151;
  --kyso-radius-md: 6px;
  --kyso-shadow-surface: 0 20px 25px -5px rgba(79, 70, 229, 0.1);
}
```

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Mobile menu transition animations were not sampled.
- Form validation states (Success/Error) were not present on the analyzed pages.

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