# Relesys Design System

> High-contrast industrial utility on a warm cotton canvas, punctuated by aggressive signal red and brutalist display type.

**Source:** https://relesys.ai | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
Relesys utilizes a high-contrast palette of Slate (#101d1c) and Cotton (#f4efeb) to create a sophisticated, industrial aesthetic. The primary brand voltage is delivered through "Signal Red" (#f8452c), which acts as the exclusive color for high-priority CTAs and error states. Typography is a dual-font system pairing the brutalist, condensed **Cofokak** for massive display headlines with the clean, geometric **Tt Commons Classic** for UI and body text. Layouts are sharp and flat, eschewing shadows in favor of 1px borders and stark color blocks. The system relies on generous vertical spacing and a strict 0px radius for primary components, reinforcing a sense of structural rigidity.

## Signature DNA
1. **Brutalist Display Typography** (Massive 120px/80px Cofokak headlines in all-caps or condensed styles create a high-impact, editorial hierarchy across the homepage and pricing sections).
2. **Signal Red Punctuation** (The use of #f8452c as a singular chromatic accent against a monochrome foundation for primary actions like "Book a Demo").
3. **Sharp Edge Geometry** (A non-negotiable 0px border radius on primary buttons and surfaces creates a precise, architectural feel).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.slate-base}` | `#101d1c` | Primary text, dark surface background, primary borders | 132 | 1.0 | `--base-color-brand--slate-base` |
| `{colors.cotton-base}` | `#f4efeb` | Page background, secondary text, light borders | 81 | 1.0 | `--base-color-brand--cotton-base` |
| `{colors.slate-50}` | `#31302f` | Tertiary surface backgrounds, mid-tone text | 6 | 1.0 | `--base-color-brand--slate-50` |
| `{colors.off-white}` | `#ffffff` | Pure white for specific UI highlights or card surfaces | 5 | 1.0 | `--base-color-brand--off-white` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.red-base}` | `#f8452c` | Primary CTA background, focus states, error text | 11 | 1.0 | `--base-color-brand--red-base` |
| `{colors.lilac-base}` | `#d9bbff` | Decorative accent, alternate section backgrounds | 5 | 1.0 | `--base-color-brand--lilac-base` |

### Semantic
| Token | Hex | Role |
|------|-----|------|
| `{colors.success}` | `#114e0b` | Success text (captured in tokens) |
| `{colors.error}` | `#f8452c` | Validation errors and critical alerts |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Cofokak | 500 | Display Headlines | Archivo Narrow | Proprietary |
| Tt Commons Classic | 500, 600, 700 | Body, UI, Subheadings | Inter | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 120px | 90px | -2.4px | 500 | Hero Statement | `h1.heading-statement-small` |
| `{type.display-lg}` | 80px | 60px | -1.6px | 500 | Section Display | `h2.heading-statement-xsmall` |
| `{type.display-md}` | 72px | 61.2px | -0.72px | 500 | Standard H2 | `h2` |
| `{type.heading-md}` | 32px | 35.2px | normal | 500 | Slide/Feature Text | `div.slide_text` |
| `{type.heading-sm}` | 24px | 28.8px | -0.24px | 600 | H3 Subheadings | `h3.heading-style-h6` |
| `{type.body-lg}` | 19px | 28.8px | normal | 500 | Intro Paragraphs | `p` |
| `{type.body-md}` | 16px | 19.2px | normal | 500 | Default Body | `div.background-color-secondary` |
| `{type.button}` | 14px | 19.2px | 0.56px | 600 | CTA Labels | `a.button.w-button` |
| `{type.caption}` | 12px | 14.4px | normal | 500 | Legal/Footer | `a.footer_legal-link` |

### Principles
1. **Negative Tracking on Display:** Display sizes above 72px must use negative letter-spacing (-0.72px to -2.4px) to maintain industrial density.
2. **Semi-Bold UI:** Interactive elements (buttons, nav links) default to 600 weight for clarity.
3. **Tight Line Heights:** Display typography uses leading significantly smaller than the font size (e.g., 90px leading for 120px type) to stack words tightly.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 6px | 12 |
| `{space.sm}` | 12px | 11 |
| `{space.md}` | 16px | 17 |
| `{space.lg}` | 32px | 10 |
| `{space.xl}` | 40px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Primary Buttons, Cards, Sections | 182 occurrences |
| `{radius.md}` | 8px | Secondary Feature Cards | 9 occurrences |
| `{radius.pill}` | 100px | Specialized UI toggles | 5 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| Flat | none | Universal standard | No box-shadows observed in primary components |

## Components

### Tier 1: Foundational

#### Button Primary
**Role:** Main call to action (e.g., "Book a Demo")
**Pages observed:** Home, Pricing
**Spec:** Background `{colors.red-base}` (#f8452c) / Text `{colors.slate-base}` (#101d1c) / Border none / Radius 0px / Padding 11px 32px 12px / Typography `{type.button}`
**States observed:** Default | Hover: `{colors.red-base}` | Focus: captured | Active: not captured

#### Button Outline
**Role:** Secondary actions on dark backgrounds
**Pages observed:** Home, Pricing
**Spec:** Background transparent / Text `{colors.cotton-base}` (#f4efeb) / Border 1px `{colors.cotton-base}` / Radius 0px / Padding 11px 32px 12px / Typography `{type.button}`
**States observed:** Default | Hover: captured | Focus: not captured

### Tier 2: Patterns

#### Surface Dark
**Role:** High-contrast content sections
**Pages observed:** Home, Pricing
**Spec:** Background `{colors.slate-base}` (#101d1c) / Text `{colors.cotton-base}` (#f4efeb) / Radius 0px / Padding 0px
**States observed:** Default

#### Surface Light
**Role:** Standard page sections
**Pages observed:** Home, Pricing
**Spec:** Background `{colors.cotton-base}` (#f4efeb) / Text `{colors.slate-base}` (#101d1c) / Radius 0px / Padding 0px
**States observed:** Default

### Tier 3: Surface-specific

#### Pricing Card
**Role:** Tiered pricing display
**Pages observed:** Pricing
**Spec:** Background transparent / Border 1px `{colors.slate-base}` (#101d1c) / Radius 0px / Padding 20px 0px
**States observed:** Default

#### Feature Card (Rounded)
**Role:** Secondary content highlights
**Pages observed:** Home
**Spec:** Background `{colors.slate-50}` (#31302f) / Radius 8px / Padding 6.4px 16px 5.6px
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1440px |
| Section Vertical Padding | 80px - 120px |
| Column Gap | 32px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Desktop | 1440px | Full Cofokak display scale (120px) |
| Mobile | 390px | Stacked layouts, navigation becomes hamburger menu |

## Imagery & decoration
Relesys uses high-contrast photography and line-art illustrations. Decorative elements include the use of Lilac (#d9bbff) as a background block to break monochrome sections. The brand avoids gradients, soft shadows, and rounded corners on primary structural elements.

## Do's
- Use **Cofokak** at 120px for primary hero headlines.
- Apply **0px border radius** to all primary buttons and section containers.
- Use **Signal Red (#f8452c)** exclusively for the most important user action on the page.
- Pair **Slate (#101d1c)** text with **Cotton (#f4efeb)** backgrounds for maximum readability.
- Maintain tight letter-spacing on display type to preserve the industrial feel.

## Don'ts
- **Don't** use Signal Red (#f8452c) for secondary or tertiary buttons; use the outline style instead.
- **Don't** apply shadows to cards or buttons; the system is strictly flat.
- **Don't** use Lilac (#d9bbff) for text; it is a background-only decorative token.
- **Don't** substitute Cofokak with a standard sans-serif for headlines; the condensed width is a brand requirement.
- **Don't** mix Signal Red with other saturated colors; it must remain the sole chromatic focus.

## Similar brands
- Volvo (Industrial precision, high-contrast typography)
- Polestar (Minimalist, grid-heavy, monochrome with single accent)
- Framer (Modern brutalist UI, sharp edges)

## Quick start

### CSS Custom Properties
```css
:root {
  --relesys-slate: #101d1c;
  --relesys-cotton: #f4efeb;
  --relesys-red: #f8452c;
  --relesys-lilac: #d9bbff;
  --font-display: 'Cofokak', sans-serif;
  --font-body: 'Tt Commons Classic', sans-serif;
  --radius-sharp: 0px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-slate: #101d1c;
  --color-cotton: #f4efeb;
  --color-signal-red: #f8452c;
  --color-lilac: #d9bbff;
  --font-display: "Cofokak";
  --font-body: "Tt Commons Classic";
  --radius-sharp: 0px;
}
```

## Agent prompt examples
- "Create a hero section for Relesys using a #f4efeb background, a 120px Cofokak headline in #101d1c with -2.4px letter spacing, and a primary button in #f8452c with 0px radius."
- "Design a feature grid with 1px #101d1c borders, 0px border radius, and Tt Commons Classic body text at 16px."
- "Generate a dark mode section using #101d1c background and #f4efeb outline buttons with 11px 32px padding."

## Known gaps
- Hover and Active states for secondary buttons were not fully captured in the automated crawl.
- Complex animation tokens (durations, easings) were not present in the source evidence.
- Specific mobile-only typography scale for Cofokak was not explicitly defined in the tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://relesys.ai | 1440px | 2026-06-06 |
| Pricing | https://relesys.ai/pricing | 1440px | 2026-06-06 |