# Kyrosdigital Design System

> High-contrast technical canvas where deep obsidian surfaces meet vibrant teal accents and bold, tight-tracked sans-serif headlines.

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

## TL;DR
Kyrosdigital utilizes a high-contrast monochrome foundation, alternating between pure white `#ffffff` and deep charcoal `#0a0a0a` surfaces. The primary brand voltage is carried by Teal `#14b8a6`, used for primary CTAs, borders, and high-visibility badges. Typography is strictly `ui-sans-serif`, leaning on heavy weights (700) and negative letter-spacing (-2.4px) for display headlines to create a dense, modern software aesthetic. Interactive elements are defined by generous pill-shaped geometry (`9999px`) and subtle elevation shadows against flat backgrounds.

## Signature DNA
1. **The Teal Pulse** (Teal `#14b8a6` acts as the singular functional color, appearing as a solid fill for primary buttons and a high-contrast accent against dark backgrounds on the Home and About pages.)
2. **Dense Display Type** (Massive 96px headlines with -2.4px letter-spacing create a "wall of type" effect that anchors the hero sections.)
3. **Pill-on-Flat Geometry** (Interactive elements use a `9999px` radius and sit on flat surfaces with minimal `0px` borders, relying on color blocks for hierarchy.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Primary page background | 32 | 1.0 | Computed style |
| `{color.ink}` | `#0a0a0a` | Primary text and dark section backgrounds | 53 | 0.8 | Computed style |
| `{color.surface-dark}` | `#0a0a0f` | Deep surface for hero/footer sections | 4 | 0.6 | Computed style |
| `{color.border-light}` | `#f3f4f6` | Subtle divider lines | 4 | 0.6 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#14b8a6` | Primary CTA background, badges, and active text | 21 | 0.8 | Computed style |
| `{color.action-blue}` | `#3b82f6` | Secondary accent / Focus ring color | 4 | 1.0 | `--tw-ring-color` |
| `{color.text-muted}` | `#6b7280` | Secondary body text | 15 | 0.8 | Computed style |
| `{color.text-dim}` | `#9ca3af` | Tertiary metadata and footer text | 19 | 0.8 | Computed style |

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

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display-2xl}` | 96px | 96px | -2.4px | 700 | Main Hero Headline | `h1.text-5xl.sm:text-6xl` |
| `{text.display-xl}` | 60px | 60px | -1.5px | 700 | Secondary Hero Headline | `h1.text-4xl.sm:text-5xl` |
| `{text.display-lg}` | 48px | 48px | -1.2px | 700 | Section Headers | `h2.text-4xl.sm:text-5xl` |
| `{text.heading-md}` | 24px | 32px | normal | 700 | Feature Titles | `h3.text-2xl.font-bold` |
| `{text.heading-sm}` | 20px | 28px | normal | 700 | Card Titles | `h3.text-xl.font-bold` |
| `{text.body-lg}` | 18px | 28px | normal | 400 | Lead Paragraphs | `p.text-gray-400.text-lg` |
| `{text.body-base}` | 16px | 24px | normal | 400 | Default Body Copy | `section.relative` |
| `{text.label-sm}` | 14px | 20px | 1.4px | 600 | Overlines / Badges | `p.text-sm.font-semibold` |

### Principles
1. **Display Tightness:** Headlines above 48px must use negative letter-spacing (at least -1.2px) to maintain visual density.
2. **Weight Contrast:** UI labels and headers skip "medium" and jump directly to 600 or 700 weight for immediate hierarchy.
3. **Leading Parity:** Display sizes use 1:1 line-height (e.g., 96px size / 96px height) to stack tightly.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 19 |
| `{space.sm}` | 12px | 23 |
| `{space.md}` | 24px | 18 |
| `{space.lg}` | 40px | 8 |
| `{space.section}` | 128px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers, sharp UI | 131 occurrences |
| `{radius.md}` | 12px | Form inputs, small controls | Computed style |
| `{radius.lg}` | 16px | Content cards | Computed style |
| `{radius.pill}` | 9999px | Buttons, badges, decorative tags | 21 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.sm}` | `0 1px 3px 0 rgba(0,0,0,0.1)` | Primary buttons, small cards | 8 occurrences |
| `{shadow.lg}` | `0 10px 15px -3px rgba(0,0,0,0.1)` | Hovered feature cards | 5 occurrences |

## Components
### Tier 1: Foundational
#### Pill Button
**Role:** Primary call to action
**Pages observed:** Home, About
**Spec:** Background `{color.primary}` (#14b8a6) / Text `#000000` / Radius `{radius.pill}` (9999px) / Padding 24px 40px / Typography `{text.body-base}` (16px/600)
**States observed:** Default | Hover: captured

### Tier 2: Patterns
#### Feature Card
**Role:** Service and value proposition display
**Pages observed:** About
**Spec:** Background `transparent` / Border `0px` / Radius `{radius.lg}` (16px) / Shadow `{shadow.lg}`
**States observed:** Default | Hover: captured

#### Status Badge
**Role:** Section overlines and AI tags
**Pages observed:** Home
**Spec:** Background `rgba(20, 184, 166, 0.1)` / Text `{color.primary}` (#14b8a6) / Radius `{radius.pill}` / Typography `{text.label-sm}`

### Tier 3: Surface-specific
#### Dark Section Surface
**Role:** High-impact hero and footer bands
**Pages observed:** Home, About
**Spec:** Background `{color.ink}` (#0a0a0a) / Text `#ffffff` / Padding `{space.section}` (128px)

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1280px |
| Section Vertical Padding | 128px |
| Grid Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Headlines scale down (e.g., 96px to 48px); Nav becomes hamburger menu. |
| Desktop | 1440px | 128px section padding; horizontal menu visible. |

## Imagery & decoration
Kyrosdigital uses technical "node-and-line" network graphics and dark atmospheric gradients. It avoids illustrative or photographic clutter, preferring abstract data-driven motifs.

## Do's
- Use Teal `#14b8a6` for all primary interactive triggers.
- Apply negative letter-spacing to any headline over 36px.
- Use `{space.section}` (128px) to separate major content blocks.
- Pair dark surfaces with white text and teal accents.
- Ensure all buttons use the `9999px` pill radius.

## Don'ts
- **Wrong:** Using `#3b82f6` (Blue) as a primary button background. **Right:** Use Teal `#14b8a6`. **Reason:** Blue is reserved for focus rings and secondary system signals.
- Do not use border-radius on section containers; keep the canvas sharp (`0px`).
- Do not use weights below 400 for body text.
- Do not use centered text for long-form body copy; keep it left-aligned.

## Similar brands
- Vercel (monochrome foundation, high-contrast type)
- Linear (technical dark mode, precise geometry)
- Stripe (heavy sans-serif display type)

## Quick start
```css
/* CSS Variables */
:root {
  --color-primary: #14b8a6;
  --color-ink: #0a0a0a;
  --color-canvas: #ffffff;
  --text-display: 96px;
  --tracking-tight: -2.4px;
  --radius-pill: 9999px;
}
```

## Agent prompt examples
- "Create a hero section with a `#0a0a0a` background, a 96px headline in `ui-sans-serif` weight 700 with -2.4px letter-spacing, and a teal `#14b8a6` pill button."
- "Generate a 3-column grid of cards using a 16px border radius and the `{shadow.lg}` elevation style."

## Known gaps
- Hover states for secondary "Explore" buttons were not fully captured in the computed evidence.
- Mobile-specific typography tokens for mid-range headings (h3-h4) were not explicitly declared.

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