# Kyrus-tech Design System

> High-contrast technical precision anchored by sharp-edged monochrome surfaces and serif display typography.

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

## TL;DR
Kyrus-tech utilizes a strict monochrome foundation where pure black (#000000) and white (#ffffff) define the structural boundaries. The system is characterized by a "sharp" aesthetic, eschewing border radii for 0px corners on all interactive and container elements. Typography creates a deliberate tension between the technical, geometric sans-serif **Effra** and the high-contrast, editorial serif **Freight Big Pro**, which is reserved for major display moments. Layouts rely on heavy black overlays and high-density information blocks, often set against photographic backgrounds of server infrastructure.

## Signature DNA
1. **The Zero-Radius Rule** (Every container, button, and surface uses a strict 0px border radius, creating a rigid, architectural feel across all viewports.)
2. **Serif-on-Dark Hero** (The use of Freight Big Pro at 52px weight 400 inside semi-transparent black blocks (#000000 at 87% opacity) is the primary brand anchor.)
3. **Achromatic Hierarchy** (Color is absent from the UI framework; brand "voltage" is delivered through photography while the interface remains strictly #000000 and #ffffff.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.black}` | `#000000` | Primary text, surface backgrounds, button text | 45 | 0.8 | Computed Style |
| `{color.white}` | `#ffffff` | Page background, primary surface, text on dark | 21 | 0.8 | Computed Style |
| `{color.dark-gray}` | `#242424` | Secondary body text (About page) | 4 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.overlay}` | `rgba(0, 0, 0, 0.87)` | Hero content block backgrounds | 4 | 0.7 | Observed Surface |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| **Freight Big Pro** | 400 | Display / Headlines | Playfair Display | Adobe Fonts |
| **Effra** | 400 | Headings / Navigation | Montserrat | Adobe Fonts |
| **Freight Sans Pro** | 300, 400, 700 | Body / UI Labels | Public Sans | Adobe Fonts |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display}` | 52px | 41.6px | 1.04px | 400 | Hero Headlines | `h2.Index-gallery-item-content-heading` |
| `{type.h2}` | 30px | 36px | 0.36px | 400 | Summary Titles | `a.summary-title-link` |
| `{type.h3}` | 25px | 30px | normal | 400 | Sub-headings | `p` |
| `{type.body-lg}` | 18px | 32.4px | 0.36px | 400 | Section Body | `section#gallery` |
| `{type.body}` | 18px | 25.2px | 0.72px | 300 | Default Paragraphs | `p:nth-of-type(1)` |
| `{type.body-bold}` | 18px | 25.2px | 0.72px | 700 | Emphasis | `strong` |
| `{type.ui-label}` | 18px | 0px | normal | 400 | Controls / Nav | `button.Index-gallery-control` |
| `{type.body-sm}` | 14px | 19.6px | 0.36px | 400 | Small descriptions | `p` |

### Principles
1. **Serif for Impact:** Freight Big Pro is never used for body text; it is strictly a display face for high-level messaging.
2. **Wide Tracking:** Body text (Freight Sans Pro) utilizes generous letter spacing (0.72px) to maintain legibility against dark backgrounds.
3. **Tight Display Leading:** Large display type uses a line-height ratio of ~0.8x (41.6px height for 52px size), causing ascenders and descenders to sit tightly.

## Spacing
**Base unit:** 4px (inferred)
Table: | Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 16px | 4 |
| `{space.sm}` | 17px | 4 |
| `{space.md}` | 18px | 10 |
| `{space.lg}` | 20px | 3 |
| `{space.xl}` | 35px | 4 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | All buttons, cards, and overlays | `radius: 0px` (60 occurrences) |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{elev.flat}` | none | All surfaces | `shadow: none` (observed on all analyzed pages) |

## Components

### Tier 1: Foundational

#### Hero Overlay Card
**Role:** Primary content container for hero sections.
**Pages observed:** https://kyrus-tech.com
**Spec:** Background: `rgba(0, 0, 0, 0.87)` / Text: `#ffffff` / Radius: `0px` / Padding: `35px`
**States observed:** Default: captured | Hover: not captured

#### Global Navigation
**Role:** Top-level site access.
**Pages observed:** https://kyrus-tech.com, https://kyrus-tech.com/about
**Spec:** Background: `#ffffff` / Text: `#000000` / Typography: `Effra 400` / Radius: `0px`
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns

#### Gallery Control Button
**Role:** Navigation for hero carousels.
**Pages observed:** https://kyrus-tech.com
**Spec:** Background: `transparent` / Text: `#ffffff` / Border: `none` / Radius: `0px`
**States observed:** Default: captured | Hover: not captured

#### Summary Link
**Role:** Content grouping and redirection.
**Pages observed:** https://kyrus-tech.com/pricing
**Spec:** Typography: `Effra 30px` / Text: `#000000` / Decoration: `none`
**States observed:** Default: captured | Hover: not captured

### Tier 3: Surface-specific

#### Content Block (Dark)
**Role:** High-contrast information sections.
**Pages observed:** https://kyrus-tech.com/about
**Spec:** Background: `#000000` / Text: `#ffffff` / Padding: `20px`
**States observed:** Default: captured

#### Error State Container
**Role:** 404 and system messaging.
**Pages observed:** https://kyrus-tech.com/404 (simulated)
**Spec:** Background: `#ffffff` / Text: `#000000` / Typography: `Freight Sans Pro 400`
**States observed:** Default: captured

## Layout
| Property | Value |
| :--- | :--- |
| Max Width | 1440px (Desktop) |
| Content Gutter | 35px |
| Section Gap | 18px - 35px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Navigation collapses to hamburger menu; Hero Overlay Card width expands to 100% viewport minus gutters. |

## Imagery & decoration
- **Photography:** Focuses on macro-scale server hardware, blue-tinted cabling, and data center environments.
- **Overlays:** Uses heavy black semi-transparent masks to ensure text contrast.
- **Avoids:** Rounded corners, drop shadows, and saturated UI colors (blues/reds).

## Do's
- Use **Freight Big Pro** weight 400 for all H1/Hero headlines.
- Maintain a strict **0px border radius** on all interactive elements.
- Ensure all text on dark backgrounds uses **Freight Sans Pro** with at least 0.72px letter spacing.
- Use `#000000` at 87% opacity for content overlays on photographic backgrounds.
- Keep the UI strictly monochrome (#000000, #ffffff).

## Don'ts
- **Wrong:** Using a blue primary button. **Right:** Use a black or transparent button. **Reason:** The parent brand is strictly monochrome; saturated colors are not part of the core UI.
- **Wrong:** Applying a 4px radius to cards. **Right:** Keep corners at 0px. **Reason:** Sharp geometry is a core "Signature DNA" move.
- **Wrong:** Using Freight Big Pro for body paragraphs. **Right:** Use Freight Sans Pro or Effra. **Reason:** Serif faces are reserved for display-tier hierarchy only.

## Similar brands
- Palantir (Technical, high-contrast, data-centric)
- Scale AI (Monochrome foundation, technical photography)
- Anduril (Industrial, sharp-edged, high-contrast)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-overlay: rgba(0, 0, 0, 0.87);
  --font-display: "freight-big-pro", serif;
  --font-heading: "effra", sans-serif;
  --font-body: "freight-sans-pro", sans-serif;
  --radius-sharp: 0px;
  --space-base: 18px;
}
```

## Agent prompt examples
- "Generate a hero section using a black 87% opacity overlay, 0px border radius, and a 52px headline in Freight Big Pro."
- "Create a pricing table using strictly #000000 and #ffffff with 0px corners and Effra for the titles."
- "Design a contact form where all inputs have 0px radius and labels are set in Freight Sans Pro weight 700 at 18px."

## Known gaps
- Hover and Active states for buttons were not captured in the source.
- Secondary semantic colors (Success/Error) were not observed in the analyzed pages.

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