# Kri8it Design System

> High-contrast geometric professional services aesthetic pairing deep obsidian navy with vibrant teal accents on a stark white canvas.

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

## TL;DR
Kri8it utilizes a high-contrast "monochrome+" system where a deep navy-slate `#2c2d3f` provides the structural weight against a pure white `#ffffff` background. The brand's energy is derived from a single teal accent `#0ba9b5` used for secondary actions and high-visibility headings. Typography is exclusively **Montserrat**, leaning heavily on bold (700) and extra-bold (800) weights to create a sense of digital authority. Layouts are spaced with generous 100px vertical rhythms, and interactive elements utilize a distinct 29px (pill-style) border radius.

## Signature DNA
1. **The Obsidian Pill** (Primary CTAs use `#2c2d3f` with a `28.8px` radius and white text, creating a heavy, grounded anchor for user actions.)
2. **Montserrat Bold Stacking** (Headings frequently use weight 700 with tight line heights—approx 1.1x—to create dense, impactful blocks of text.)
3. **Teal Punctuation** (The color `#0ba9b5` is reserved for secondary buttons and specific semantic highlights, contrasting sharply against the navy/white foundation.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.brand.primary}` | `#2c2d3f` | Primary button BG, Headings, Footer BG | 74 | 1.0 | Computed Style |
| `{color.brand.white}` | `#ffffff` | Page canvas, Button text, Surface BG | 71 | 1.0 | CSS Variable |
| `{color.text.main}` | `#212529` | Default body text | 67 | 0.8 | Computed Style |
| `{color.surface.soft}` | `#f8f9fa` | Subtle section backgrounds | 3 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.brand.accent}` | `#0ba9b5` | Secondary buttons, Active links, Icons | 26 | 0.8 | Computed Style |
| `{color.text.muted}` | `#949494` | Metadata, breadcrumbs | 3 | 0.6 | Computed Style |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{color.system.info}` | `#0693e3` | Inherited WP Cyan Blue |
| `{color.system.error}` | `#cf2e2e` | Inherited WP Vivid Red |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Montserrat | 300, 400, 500, 600, 700, 800 | All headlines, UI, and body | Montserrat (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.xl}` | 61px | 66.88px | normal | 700 | Hero H1 | `h1.heading` |
| `{type.display.lg}` | 58px | 63.36px | normal | 700 | Section H2 | `h2` |
| `{type.display.md}` | 45px | 49.28px | normal | 700 | Section H3 | `h3` |
| `{type.heading.md}` | 35px | 38.72px | normal | 700 | Sub-section head | `h3` |
| `{type.heading.sm}` | 26px | 28.16px | normal | 700 | Card titles | `h4` |
| `{type.nav.item}` | 22px | 33.00px | normal | 500 | Main navigation | `li.nav-item` |
| `{type.button.lg}` | 20px | 24.40px | normal | 600 | CTA Labels | `a.btn` |
| `{type.body.bold}` | 18px | 26.88px | normal | 800 | Strong emphasis | `strong` |
| `{type.body.md}` | 18px | 26.88px | normal | 400 | Standard body | `p` |

### Principles
1. **Bold by Default**: Headlines never drop below weight 700.
2. **Tight Leading**: Display type uses a line-height ratio of ~1.1 to maintain visual density.
3. **Weight as Hierarchy**: Body text uses weight 300 or 400, while emphasis jumps immediately to 800.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|---|---|---|
| `{space.sm}` | 14px | 28 |
| `{space.md}` | 25px | 17 |
| `{space.lg}` | 50px | 11 |
| `{space.section}` | 100px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Image containers, sections | 153 occurrences |
| `{radius.pill}` | 29px | Buttons, input fields | 28 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | All buttons and cards | Component evidence |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** 2
**Spec:** Background `#2c2d3f` | Text `#ffffff` | Radius `28.8px` | Padding `14.4px 33.6px` | Typography `20px/600`
**States observed:** Default | Hover: captured (lightens)

#### Secondary Button
**Role:** Alternative actions
**Pages observed:** 2
**Spec:** Background `#0ba9b5` | Text `#ffffff` | Radius `28.8px` | Padding `14.4px 33.6px` | Typography `20px/600`
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Ghost Button (Teal)
**Role:** Tertiary actions or "Read More"
**Pages observed:** 1
**Spec:** Background `transparent` | Text `#ffffff` | Border `2px solid #0ba9b5` | Radius `28.8px`
**States observed:** Default | Hover: captured

### Tier 3: Surface-specific

#### Content Surface (White)
**Role:** Standard page section
**Pages observed:** 2
**Spec:** Background `#ffffff` | Text `#212529` | Padding `100px 0px`
**States observed:** Default

#### Content Surface (Soft Gray)
**Role:** Alternating section background
**Pages observed:** 1
**Spec:** Background `#f8f9fa` | Text `#212529` | Padding `100px 0px`
**States observed:** Default

#### Navigation Bar
**Role:** Global header
**Pages observed:** 2
**Spec:** Background `#ffffff` | Text `#2c2d3f` | Font `Montserrat 500` | Height `~80px`
**States observed:** Default | Active: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1140px |
| Section Vertical Padding | 100px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Stacked columns, centered headings, Hamburger menu |
| Desktop | 1440px | 12-column grid, horizontal nav |

## Imagery & decoration
- **Geometric Overlays**: Uses low-poly 3D geometric shapes (e.g., the teal/navy faceted sphere) as brand motifs.
- **World Map Watermark**: Light gray `#f8f9fa` map used as background decoration in contact sections.
- **Photography**: High-key, professional studio photography with white backgrounds.

## Do's
- Use `#2c2d3f` for all primary headlines.
- Apply `29px` border radius to all interactive elements.
- Maintain `100px` vertical padding between major content blocks.
- Use Montserrat weight 700 for all H1-H3 elements.
- Ensure buttons have at least `33px` horizontal padding.

## Don'ts
- **Wrong:** Using `#0ba9b5` (Teal) as the primary background for a hero section. **Right:** Use `#ffffff` or `#2c2d3f`. **Reason:** Teal is an accent color, not a foundational surface.
- Do not use drop shadows on buttons or cards; the brand is strictly flat.
- Do not use serif fonts; Montserrat is the exclusive typeface.
- Do not use sharp corners on buttons.

## Similar brands
- Digital Ocean (geometric, blue-centric)
- Toptal (professional, high-contrast)
- Zendesk (clean, bold typography)

## Quick start

```css
/* CSS Variables */
:root {
  --kri8it-navy: #2c2d3f;
  --kri8it-teal: #0ba9b5;
  --kri8it-white: #ffffff;
  --kri8it-gray-light: #f8f9fa;
  --kri8it-text: #212529;
  --kri8it-radius-pill: 29px;
  --kri8it-font: 'Montserrat', sans-serif;
}
```

## Agent prompt examples
- "Generate a primary CTA button using the Kri8it style: Montserrat 600, 20px text, #ffffff on #2c2d3f background with a 29px border radius."
- "Create a section header using Kri8it DNA: Montserrat 700, 45px size, #2c2d3f color, with 100px top padding."
- "Design a feature card with a white background, no shadow, and a 2px teal border (#0ba9b5) button inside."

## Known gaps
- Hover state hex values were not explicitly captured in the token list, though visual lightening was observed.
- Form input validation states (success/error) were not present on the analyzed pages.

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