# Rigrex Design System

> High-contrast monochrome utility punctuated by high-voltage red accents and heavy Satoshi typography.

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

## TL;DR
Rigrex operates on a high-contrast foundation of deep obsidian `#0a0a0a` and pure white `#ffffff`, utilizing a monochrome palette to signal engineering precision. The system's "voltage" is provided by a single primary accent color, a vibrant red `#f81b1d`, used for critical CTAs and status indicators. Typography is dominated by the **Satoshi** family, frequently deployed at a maximum weight of 900 for display headings to create a "heavy" engineering aesthetic. Layouts use a mix of soft-radius cards (16px to 20px) and pill-shaped interactive elements (50px to 80px), often featuring subtle inset shadows to simulate depth on flat surfaces.

## Signature DNA
1. **The Heavy Heading** (Satoshi at weight 900, often reaching 75px on desktop, creating an industrial, high-authority typographic anchor. Observed on Hero and Section titles.)
2. **Achromatic Canvas with Red Punctuation** (A strictly monochrome environment where `#f81b1d` is the only chromatic signal allowed for interaction. Observed on primary buttons and "Live" indicators.)
3. **Soft-Grid Containers** (The use of 16px and 20px border radii on cards to soften the harshness of the high-contrast black/white palette. Observed in "Product & Engineering Solutions" and "Client Results" sections.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.black}` | `#0a0a0a` | Primary text, heading color, brand anchor | 146 | 1 | `css_variable:--black` |
| `{colors.white}` | `#ffffff` | Page background, primary surface, button text | 136 | 1 | `css_variable:--color--background` |
| `{colors.dark}` | `#212331` | Secondary text, footer background elements | 228 | 1 | `css_variable:--color--dark` |
| `{colors.matt-black}` | `#28282b` | Dark section backgrounds (Questions? section) | 39 | 1 | `css_variable:--matt-black` |
| `{colors.gray-100}` | `#f7f9fd` | Subtle surface backgrounds for feature cards | 27 | 1 | `css_variable:--flowui-component-library--gray-100` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.accent}` | `#f81b1d` | Primary CTA background, active links, accents | 53 | 1 | `css_variable:--color--accent` |
| `{colors.lightblue}` | `#dce4f0` | Decorative borders, secondary card outlines | 53 | 1 | `css_variable:--lightblue` |
| `{colors.gray-400}` | `#b6b9ce` | Component borders and dividers | 48 | 1 | `css_variable:--flowui-component-library--gray-400` |
| `{colors.light-red}` | `#ffdede` | Decorative only: background for red-themed tags | 1 | 1 | `css_variable:--light-red` |

### Semantic
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.success}` | `#006638` | Success indicators, checkmarks in lists | 48 | 1 | `css_variable:--flowui-component-library--success-darker` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|-------|------|-------------|------------|
| Satoshi | 400, 500, 700, 900 | All headings, body, and UI | Inter (for body), Cabinet Grotesk (for display) | Proprietary (Fontshare) |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display-mega}` | 75px | 90px | normal | 900 | Homepage hero | `h1.hero_heading` |
| `{text.display-lg}` | 60px | 60px | normal | 700 | Section headers | `div#w-node-_10b46a6b...` |
| `{text.display-md}` | 46px | 46px | normal | 500 | Statistics numbers | `h1.stats_no` |
| `{text.heading-lg}` | 36px | 43.2px | normal | 900 | Section titles | `h2.section-title-center` |
| `{text.heading-md}` | 32px | 32px | normal | 700 | Card titles | `h3.timw_heading` |
| `{text.heading-sm}` | 26px | 33.8px | normal | 700 | Service labels | `p.headings-service` |
| `{text.body-lg}` | 20px | 30px | normal | 400 | Hero paragraph | `p.hero-para` |
| `{text.body-md}` | 18px | 23.4px | normal | 400 | Process descriptions | `div.process_step-para` |
| `{text.body-sm}` | 16px | 24px | normal | 400 | Default card body | `p.service_card_para` |
| `{text.caption}` | 12px | 18px | normal | 400 | Tags and labels | `p.hero-para.tags` |

### Principles
1. **Weight as Hierarchy:** Rigrex uses extreme weight (900) for primary display and drops significantly (400) for body text to create immediate visual separation without color.
2. **Tight Display Leading:** Large display sizes (75px) use a 1.2 leading ratio, while smaller headings (36px) tighten to 1.0 or 1.1 for a "stacked" look.
3. **Satoshi-Only:** No secondary font family is used; the system relies entirely on Satoshi's weight range to handle all UI and editorial needs.

## Spacing
**Base unit:** 4px (inferred from common multiples)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 10px | 130 |
| `{space.sm}` | 20px | 70 |
| `{space.md}` | 30px | 42 |
| `{space.lg}` | 40px | 11 |
| `{space.xl}` | 60px | 8 |
| `{space.section}` | 100px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 339 occurrences |
| `{radius.sm}` | 2px | Form inputs | `input#Name-2` |
| `{radius.md}` | 16px | Standard feature cards | `p.service_card_para` parent |
| `{radius.lg}` | 20px | Testimonial cards | `p.testimonial_card_text` parent |
| `{radius.pill}` | 50px | Secondary buttons, tags | `p.hero-para.chip` |
| `{radius.full}` | 80px | Primary CTA buttons | `Rounded Button` component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{elevation.inset}` | `rgba(0, 0, 0, 0.1) 0px -4px 12px 0px inset` | Primary Red Buttons | `Rounded Button` |
| `{elevation.flat}` | `none` | Standard Cards | `Card` component |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary)
**Role:** Main call to action (Discovery Call, Submit)
**Pages observed:** rigrex.com
**Spec:** Background `{colors.accent}` (#f81b1d) | Text `{colors.white}` (#fcfcfc) | Radius 80px | Padding 0px 24px | Shadow `{elevation.inset}`
**States observed:** Default: Captured | Hover: Not captured | Active: Not captured

#### Surface (Section)
**Role:** Alternating section backgrounds
**Pages observed:** rigrex.com
**Spec:** Background `{colors.gray-100}` (#fafafa) | Border `{colors.lightblue}` (#dce4f0) 1px | Radius 0px | Padding 60px 0px
**States observed:** Default: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying services or solutions
**Pages observed:** rigrex.com
**Spec:** Background `{colors.white}` (#ffffff) | Border `{colors.lightblue}` (#dce4f0) 1px | Radius 16px | Padding 20px | Typography `{text.body-sm}`
**States observed:** Default: Captured

#### Testimonial Card
**Role:** Client social proof
**Pages observed:** rigrex.com
**Spec:** Background `rgba(0, 0, 0, 0)` | Border `{colors.gray-400}` (#b6b9ce) 1px | Radius 16px | Padding 30px
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Dark Content Block
**Role:** High-contrast information sections (Questions?)
**Pages observed:** rigrex.com
**Spec:** Background `{colors.matt-black}` (#28282b) | Text `{colors.white}` (#ffffff) | Radius 0px | Padding 100px 0px
**States observed:** Default: Captured

#### Success Badge
**Role:** Checklist items or status indicators
**Pages observed:** rigrex.com
**Spec:** Background `{colors.gray-100}` (#f7f9fd) | Text `{colors.success}` (#006638) | Border `{colors.success}` (#006638) 1px | Radius 50%
**States observed:** Default: Captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (approx) |
| Section Padding (Vertical) | 100px |
| Card Grid Gap | 20px |
| Horizontal Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Desktop | 1440px | 3-up and 4-up grids for services |
| Mobile | 390px | Grids collapse to 1-up; Typography scales down (Display 75px -> 48px) |

## Imagery & decoration
Rigrex uses a "Logo Cloud" motif featuring saturated third-party brand logos to provide secondary color. Decorative elements include 1px borders in `#dce4f0` and circular "tick" icons in `#006638`. The brand avoids photography in favor of high-contrast text and iconography.

## Do's
- Use Satoshi 900 for all primary section headings.
- Reserve `#f81b1d` exclusively for primary interactive elements.
- Apply 16px or 20px border radii to all content containers.
- Use `#f7f9fd` for subtle background differentiation in white sections.
- Ensure all body text maintains a 400 weight for legibility against `#0a0a0a`.

## Don'ts
- **Wrong:** Using `#f81b1d` as a background for non-interactive sections. **Right:** Use `#28282b` for dark sections. **Reason:** Red is reserved for high-voltage interaction signals.
- **Wrong:** Mixing Satoshi with other sans-serif families like Inter or Arial. **Right:** Use Satoshi for all layers. **Reason:** Brand consistency relies on Satoshi's specific geometry.
- **Wrong:** Labeling a sub-brand color (like a potential blue or green) as the parent primary. **Right:** The parent primary is strictly `#0a0a0a`. **Reason:** Rigrex is a monochrome-first parent system.
- Do not use sharp (0px) corners on interactive buttons.
- Do not use shadows on standard white cards; keep them flat with 1px borders.

## Similar brands
- Vercel (Monochrome engineering focus)
- Linear (High-contrast utility)
- Railway (Industrial typography and dark-mode surfaces)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --rigrex-black: #0a0a0a;
  --rigrex-white: #ffffff;
  --rigrex-accent: #f81b1d;
  --rigrex-dark: #212331;
  --rigrex-gray-100: #f7f9fd;
  --rigrex-success: #006638;
  --radius-card: 16px;
  --radius-pill: 80px;
  --font-main: 'Satoshi', sans-serif;
}
```

```javascript
// Tailwind v4 @theme
@theme {
  --color-primary: #0a0a0a;
  --color-accent: #f81b1d;
  --color-surface: #f7f9fd;
  --font-display: "Satoshi", sans-serif;
  --font-weight-heavy: 900;
  --radius-lg: 16px;
  --radius-full: 80px;
}
```

## Agent prompt examples
- "Generate a service card using a white background, a 1px border in #dce4f0, and a 16px border radius. Use Satoshi 700 for the title and Satoshi 400 for the body text."
- "Create a primary button component with a #f81b1d background, 80px border radius, and white text. Add a subtle inset shadow: rgba(0, 0, 0, 0.1) 0px -4px 12px 0px inset."
- "Design a dark section hero using #28282b as the background and Satoshi 900 at 75px for the main heading in white."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Mobile-specific typography tokens for sizes below 12px were not observed.
- The specific transition timing for interactive elements was not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Main Homepage | https://rigrex.com | 1440x900 | 2026-06-06T05:18:53Z |
| Mobile Homepage | https://rigrex.com | 390x844 | 2026-06-06T05:18:53Z |