# Kyos Design System

> Earth-toned analytical precision: deep mahogany type anchored by high-contrast amber and vermillion actions on a warm parchment canvas.

**Source:** [https://kyos.com](https://kyos.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Kyos utilizes a sophisticated "monochrome-plus" palette where the primary structural color is a deep mahogany brown `#461400` used for text, borders, and tertiary actions. This dark foundation is punctuated by high-visibility functional colors: Amber `#ffcb00` for primary conversions and Vermillion `#dc3300` for secondary emphasis. The system avoids pure grays, opting instead for warm neutrals like `#fdf7f2` and `#f8dfcc` for section backgrounds. Typography is exclusively **Figtree**, utilizing a range of weights from 300 to 700 to create a clear information hierarchy for complex analytical data.

## Signature DNA
1. **The Mahogany Anchor** (The use of `#461400` instead of black for all primary text and UI borders creates a warm, professional "ink on paper" feel across all pages.)
2. **Functional Color Split** (Primary CTAs are consistently Amber `#ffcb00`, while secondary "Software" actions use Vermillion `#dc3300`, creating a clear hierarchy of intent.)
3. **Pill Geometry** (Interactive elements, from buttons to tags, utilize a consistent `999px` radius, contrasting against the sharp `0px` or soft `40px` container corners.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background | 41 | 1 | `--wp--preset--color--pages-primary-background` |
| `{color.ink}` | `#461400` | Primary text, borders, focus states | 352 | 1 | `--wp--preset--color--text-text-primary` |
| `{color.surface.soft}` | `#fdf7f2` | Secondary section background | 6 | 1 | `--wp--preset--color--pages-secondary-background` |
| `{color.surface.warm}` | `#f8dfcc` | Card and highlighted section backgrounds | 13 | 1 | `--wp--preset--color--cards-secondary-background` |
| `{color.border.muted}` | `#ad9f9f` | Disabled borders, secondary lines | 2 | 1 | `--wp--preset--color--lines-secondary` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#ffcb00` | Primary CTA background (Request Demo) | 4 | 1 | `--wp--preset--color--button-primary-initial-background` |
| `{color.secondary}` | `#dc3300` | Secondary CTA background (Software) | 4 | 1 | `--wp--preset--color--general-tertiary` |
| `{color.brand.orange}` | `#ff6f00` | Icons and tertiary text accents | 29 | 1 | `--wp--preset--color--icons-primary` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Figtree | 300, 400, 500, 600, 700 | All UI, Headings, Body | Figtree (Google Fonts) | SIL Open Font |
| icomoon | 400 | UI Icons | N/A | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.lg}` | 64px | 48px | normal | 500 | Hero Headlines | `h2.wp-block-heading` |
| `{type.display.md}` | 40px | 48px | normal | 500 | Section Headlines | `h2.wp-block-heading` |
| `{type.heading.sm}` | 24px | 25px | normal | 500 | Sub-section titles | `h3.wp-block-heading` |
| `{type.heading.xs}` | 20px | 25px | normal | 600 | Card titles | `h4.wp-block-sturdy-news__post-title` |
| `{type.body.md}` | 17px | 24px | normal | 400 | Default body text | `p` |
| `{type.body.bold}` | 17px | 24px | normal | 700 | Emphasized labels | `div.wp-block-sturdy-team-members__function` |
| `{type.body.sm}` | 14px | 24px | normal | 400 | Excerpts, metadata | `div.wp-block-sturdy-card-download__excerpt` |
| `{type.caption}` | 10px | 24px | normal | 400 | Button pre-labels | `span.wp-block-sturdy-button__pre` |

### Principles
1. **Mahogany as Black:** Never use pure `#000000` for text; use `{color.ink}` (#461400) to maintain brand warmth.
2. **Medium Weight Display:** Large headlines favor weight 500 over heavy bolds to maintain an analytical, precise feel.
3. **Tight Line Heights on Display:** Large type uses line-heights smaller than the font size (e.g., 48px height for 64px size) for compact, impactful stacking.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 28 |
| `{space.sm}` | 16px | 35 |
| `{space.md}` | 24px | 71 |
| `{space.lg}` | 32px | 9 |
| `{space.xl}` | 40px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Default containers, some cards | 313 occurrences |
| `{radius.md}` | 10px | Feature cards | `Card` component |
| `{radius.xl}` | 40px | Large section containers | `Surface` component |
| `{radius.pill}` | 999px | Buttons, tags, inputs | `Pill Button` component |

## Components

### Tier 1: Foundational

#### Pill Button (Primary)
**Role:** Main conversion actions (Request Demo, Contact)
**Pages observed:** [kyos.com](https://kyos.com)
**Spec:** Background `{color.primary}` (#ffcb00) / Text `{color.ink}` (#461400) / Border 1px `{color.primary}` / Radius 999px / Padding 16px 32px
**States observed:** Default | Hover: `#ffdb4e` | Focus: Captured | Active: Captured | Disabled: Not captured

#### Pill Button (Outline)
**Role:** Secondary navigation and tertiary actions
**Pages observed:** [kyos.com](https://kyos.com), [about](https://kyos.com/about)
**Spec:** Background transparent / Text `{color.ink}` (#461400) / Border 1px `{color.ink}` (#461400) / Radius 999px / Padding 16px 24px
**States observed:** Default | Hover: Background `{color.ink}`, Text `#ffffff` | Focus: Captured | Active: Captured | Disabled: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** News and report summaries
**Pages observed:** [kyos.com](https://kyos.com)
**Spec:** Background `{color.canvas}` (#ffffff) / Text `{color.ink}` (#461400) / Border 1px `{color.brand.orange}` (#ff6f00) / Radius 10px / Padding 24px
**States observed:** Default | Hover: Not captured

#### Download Card
**Role:** Whitepaper and resource links
**Pages observed:** [kyos.com](https://kyos.com)
**Spec:** Background `{color.surface.soft}` (#fdf7f2) / Text `{color.ink}` (#461400) / Border 0px / Radius 0px / Padding 24px
**States observed:** Default | Hover: Not captured

### Tier 3: Surface-specific

#### Rounded Section Surface
**Role:** Large layout containers for "Smart Solutions" or "About" blocks
**Pages observed:** [kyos.com](https://kyos.com), [about](https://kyos.com/about)
**Spec:** Background transparent or `{color.surface.warm}` (#f8dfcc) / Radius 40px / Padding 0px
**States observed:** Default

#### Team Member Card
**Role:** Profile display on About page
**Pages observed:** [about](https://kyos.com/about)
**Spec:** Background `{color.surface.warm}` (#f8dfcc) / Text `{color.ink}` (#461400) / Radius 0px / Padding 24px
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1440px |
| Section Gap | 40px - 80px |
| Column Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; buttons stack vertically; padding reduces to 16px. |

## Do's
- Use `{color.ink}` (#461400) for all body text to maintain contrast and brand warmth.
- Apply `{radius.pill}` (999px) to all interactive elements including buttons and form inputs.
- Use Figtree 500 for headlines to ensure legibility without excessive visual weight.
- Reserve Amber `#ffcb00` strictly for primary "Contact" or "Demo" conversions.
- Use Vermillion `#dc3300` for product-specific actions (e.g., "Software solutions").

## Don'ts
- **Wrong:** Using `#000000` for text. **Right:** Use `#461400`. **Reason:** Pure black breaks the warm, organic mahogany brand palette.
- **Wrong:** Using Amber `#ffcb00` for informational badges. **Right:** Use Mahogany or Orange. **Reason:** Amber is reserved for high-priority conversion CTAs.
- **Wrong:** Applying sharp corners to buttons. **Right:** Use 999px radius. **Reason:** Interactive elements must follow the pill-shape signature DNA.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --kyos-ink: #461400;
  --kyos-primary: #ffcb00;
  --kyos-secondary: #dc3300;
  --kyos-canvas: #ffffff;
  --kyos-surface-warm: #f8dfcc;
  --kyos-font-main: 'Figtree', sans-serif;
}
```

## Agent prompt examples
- "Create a primary CTA button using the Kyos style: Figtree 17px text in #461400 on a #ffcb00 pill-shaped background with 16px 32px padding."
- "Design a feature card with a 1px border in #ff6f00, 10px border radius, and #ffffff background, using Figtree 20px weight 600 for the title."
- "Generate a section background using the Kyos secondary surface color #fdf7f2 with 40px rounded corners."

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