# Roq.ad Design System

> High-contrast ad-tech utility defined by heavy Inter typography, sharp geometric edges, and a primary palette of deep red and industrial yellow.

**Source:** https://roq.ad | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Roq.ad utilizes a high-contrast "monochrome-plus" system where a white canvas is structured by heavy black text and punctuated by two specific brand colors: Roq Red (#a12b2a) and Roq Yellow (#fed925). The system is strictly rectilinear, eschewing border radii for sharp 0px corners on all buttons and containers. Typography is exclusively Inter, leaning heavily on Ultra-Bold (900) and Bold (700) weights for display and section headers to create a sense of industrial authority. Layouts use a mix of full-width color bands (Teal #005677 and Dark Green #153e35) to segment technical content.

## Signature DNA
1. **The Sharp Edge** (All interactive elements, including primary CTAs and form inputs, use a strict `{radius.sharp}` (0px) treatment, creating a technical, non-consumerist aesthetic.)
2. **Ultra-Heavy Hierarchy** (Display type uses Inter at weight 900 with tight line heights, often paired with yellow accent text against dark backgrounds for maximum legibility.)
3. **Geometric Color Blocking** (The brand segments information using saturated, full-width background bands in Teal #005677 and Dark Green #153e35, often decorated with diagonal geometric "ribbon" graphics.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{colors.black}` | `#000000` | Primary text, borders, shadows | 86 | 1 | `--wp--preset--color--black` |
| `{colors.roq-black}` | `#101820` | Surface backgrounds, secondary text | 62 | 1 | `--roq-black` |
| `{colors.white}` | `#ffffff` | Page canvas, button text, borders | 26 | 1 | `--wp--preset--color--white` |
| `{colors.roq-grey}` | `#d6d1ca` | Tertiary text, disabled states | 3 | 1 | `--roq-grey` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{colors.roq-red}` | `#a12b2a` | Primary CTA background | 5 | 1 | `--roq-red` |
| `{colors.roq-yellow}` | `#fed925` | Accent text, button text, surface bg | 18 | 1 | `--roq-yellow` |
| `{colors.roq-teal}` | `#005677` | Section background, accent text | 7 | 1 | `--roq-teal` |
| `{colors.roq-green}` | `#153e35` | Decorative section background | 1 | 0.8 | `--roq-green` (decorative_only) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Inter | 400, 500, 700, 900 | All roles (Display, Body, UI) | Inter (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 45px | 49.5px | normal | 900 | Hero headlines | `div.x-text-content-text-primary` |
| `{type.h2-bold}` | 35px | 38.5px | normal | 700 | Section headers | `h2.x-text-content-text-primary` |
| `{type.h2-medium}` | 28px | 33.6px | normal | 500 | Sub-section headers | `h2.x-text-content-text-primary` |
| `{type.h3-bold}` | 20px | 24px | normal | 700 | Card titles | `h3.x-text-content-text-primary` |
| `{type.body-lg}` | 18px | 19.8px | normal | 500 | Lead paragraphs | `h4.x-text-content-text-primary` |
| `{type.body}` | 16px | 25.6px | normal | 400 | Standard running text | `p:nth-of-type(1)` |
| `{type.ui-label}` | 14px | 14px | normal | 700 | Navigation, Buttons | `span.x-anchor-text-primary` |
| `{type.caption}` | 12px | 16.8px | normal | 400 | Small annotations | `div.x-text.x-content` |

### Principles
1. **Weight as Hierarchy.** Use weight 900 for primary impact and weight 400 for utility; avoid mid-weights (600) in favor of stark contrast.
2. **Tight Display Leading.** Display sizes (45px) use a tight 1.1x line height to maintain blocky, architectural density.
3. **No Letter Spacing.** Standard text maintains "normal" tracking; only specific anchor text uses 1px tracking for UI clarity.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 79 |
| `{space.sm}` | 10px | 30 |
| `{space.md}` | 15px | 18 |
| `{space.lg}` | 20px | 9 |
| `{space.xl}` | 24px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Universal (Buttons, Cards, Inputs) | 257 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{elev.flat}` | none | All components | Components array |

## Components
### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Let's Chat", "Talk to an Expert")
**Pages observed:** https://roq.ad
**Spec:** Background `{colors.roq-red}` (#a12b2a) / Text `{colors.roq-yellow}` (#fed925) / Border none / Radius 0px / Padding 1px 20px / Typography `{type.ui-label}`
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Secondary Button
**Role:** Inline or secondary actions
**Pages observed:** https://roq.ad
**Spec:** Background transparent / Text `{colors.roq-red}` (#a12b2a) / Border 1px solid `{colors.roq-red}` / Radius 0px / Typography `{type.ui-label}`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying identity solutions or industry segments
**Pages observed:** https://roq.ad
**Spec:** Background transparent / Text `{colors.roq-black}` / Radius 0px / Padding `{space.lg}` / Typography `{type.h3-bold}`
**States observed:** Default

#### Section Divider
**Role:** Visual break between content blocks
**Pages observed:** https://roq.ad
**Spec:** Background `{colors.roq-teal}` (#005677) or `{colors.roq-black}` (#101820) / Full-width / Padding 65px vertical
**States observed:** Default

### Tier 3: Surface-specific

#### Footer
**Role:** Site-wide navigation and contact info
**Pages observed:** https://roq.ad
**Spec:** Background `{colors.white}` / Text `{colors.roq-black}` / Top Border 1px solid `{colors.roq-grey}` / Typography `{type.body-sm}`
**States observed:** Default

#### Form Input
**Role:** Newsletter signup ("Stay in the Know")
**Pages observed:** https://roq.ad
**Spec:** Background `{colors.white}` / Border 1px solid `{colors.roq-black}` / Radius 0px / Height 38px
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Gutter | 65px |
| Column Gap | 24px |

## Imagery & decoration
- **Geometric Ribbons:** Diagonal multi-colored stripes (Teal, Red, Yellow, Black) used as section transitions.
- **Isometric Illustrations:** Clean, thin-line isometric 3D illustrations for technical concepts (laptops, servers).
- **Logo Grid:** Grayscale partner logos used in a standard grid with high transparency.

## Do's
- Use weight 900 for all primary section headlines.
- Apply `#a12b2a` (Roq Red) for the primary "Let's Chat" CTA background.
- Ensure all buttons have a strict 0px border radius.
- Use `#fed925` (Roq Yellow) for text emphasis within dark background bands.
- Maintain a 5px base unit for all internal component padding.

## Don'ts
- **Wrong:** Using a border-radius on buttons. **Right:** Always 0px. **Reason:** Brand identity is strictly geometric and industrial.
- **Wrong:** Using `#ff2a13` (Saturated Red) as a primary button background. **Right:** Use `#a12b2a` (Roq Red). **Reason:** `#ff2a13` is an accent/text color, not the primary action token.
- **Wrong:** Using serif fonts for body text. **Right:** Inter 400. **Reason:** The brand is exclusively sans-serif.

## Quick start

### CSS Custom Properties
```css
:root {
  --roq-red: #a12b2a;
  --roq-yellow: #fed925;
  --roq-black: #101820;
  --roq-teal: #005677;
  --roq-grey: #d6d1ca;
  --font-main: 'Inter', sans-serif;
  --radius-sharp: 0px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #a12b2a;
  --color-accent: #fed925;
  --color-surface: #101820;
  --font-sans: 'Inter';
  --radius-none: 0px;
}
```

## Known gaps
- Hover and Active states for buttons were not captured in the initial crawl.
- Mobile-specific navigation menu (hamburger) interaction was not fully documented.
- Success/Error semantic colors for form validation were not observed.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://roq.ad | 1440px | 2026-06-06 |
| Mobile Home | https://roq.ad | 390px | 2026-06-06 |