# Rrtusa Design System

> High-contrast information architecture anchored by Roboto headers and a strict slate-and-ink monochrome palette.

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

## TL;DR
Rrtusa utilizes a "monochrome-plus" system where a pure white canvas (`#ffffff`) supports high-density information layouts. The visual hierarchy is driven by **Roboto** (600 weight) for structured headings and **Arial** for utility text, creating a functional, editorial atmosphere. The palette is dominated by deep slates (`#1e293b`) and pure blacks (`#000000`), with secondary content rendered in neutral grays (`#7a7a7a`). Layouts are characterized by sharp edges (`0px` radii) and a lack of elevation depth, relying on whitespace and typographic scale rather than shadows to define sections.

## Signature DNA
1. **Roboto-Arial Hybrid** (The system uses Roboto for semantic structure/headings and Arial for legacy utility/body spans, creating a distinct "functional-modern" contrast.)
2. **Sharp-Edge Utility** (A universal border-radius of `0px` across all elements, rejecting the rounded-corner trends of modern SaaS for a more architectural, rigid feel.)
3. **Slate-Ink Contrast** (Primary text isn't just black; it uses `--ast-global-color-2` (#1e293b) to provide a softer, high-readability contrast against the white canvas compared to pure black.)

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--wp--preset--color--white` | `#ffffff` | Primary Page Background | 100+ | 1.0 | computed_style |
| `--wp--preset--color--black` | `#000000` | Primary Text / Logo | 106 | 1.0 | computed_style |
| `--ast-global-color-2` | `#1e293b` | Primary Heading Text | 34 | 1.0 | css_variable |
| `n/a` | `#7a7a7a` | Muted Body / Secondary Text | 34 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--ast-global-color-3` | `#334155` | Decorative Accent / Deemphasized Text | 1 | 1.0 | decorative_only |
| `--ast-global-color-0` | `#046bd2` | Link / Brand Blue (Declared) | 0* | 0.7 | declared_token |

### Semantic
*Not captured in source.*

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Roboto | 400, 600 | Headings / Primary Body | Roboto (Google Fonts) | Apache 2.0 |
| Arial | 400, 700 | Utility / Body Spans | Arimo | Standard |
| -apple-system | 400 | System Fallback | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.h2}` | 30px | 41.4px | normal | 600 | Section Headings | `h2:nth-of-type(2)` |
| `{type.h3}` | 24px | 33.12px | normal | 600 | Sub-section Headings | `h3:nth-of-type(1)` |
| `{type.utility-lg}` | 23px | 31.28px | normal | 700 | Bold Utility Spans | `span` |
| `{type.body-bold}` | 17px | 23.92px | normal | 700 | Emphasized Body | `span` |
| `{type.body-md}` | 16px | 22.08px | normal | 400 | Standard Paragraph | `p:nth-of-type(1)` |
| `{type.body-loose}` | 16px | 26.4px | normal | 400 | High-readability Body | `p:nth-of-type(3)` |
| `{type.body-sm}` | 15px | 20.24px | normal | 400 | List Items / Captions | `li:nth-of-type(1)` |
| `{type.body-sm-bold}` | 15px | 20.24px | normal | 700 | Small Emphasis | `span:nth-of-type(1)` |

### Principles
1. **Heading Dominance:** Roboto at 600 weight is the primary driver of page structure.
2. **Tight Tracking:** All typographic tokens utilize `normal` letter spacing; no custom tracking is applied to display or body text.
3. **Vertical Rhythm:** Line heights are strictly calculated (e.g., 1.38x for headings, 1.65x for loose body) to maintain readability on long-form content.

## Spacing
**Base unit:** 4px (Inferred)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 33 |
| `{space.md}` | 16px | 40 |
| `{space.lg}` | 19px | 21 |
| `{space.xl}` | 24px | 12 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Universal (Cards, Images, Inputs) | 175 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `flat` | none | All surfaces | No shadows captured in computed styles |

## Components
### Tier 1: Foundational
#### Global Header
**Role:** Navigation and Brand Identity
**Pages observed:** All
**Spec:** Background `#ffffff` / Text `#000000` / Height `auto` / Typography `Roboto 600`
**States observed:** Default | Hover: Not captured

#### Footer
**Role:** Copyright and Legal
**Pages observed:** All
**Spec:** Background `#eeeeee` (via `--ast-title-layout-bg`) / Text `#7a7a7a` / Typography `Arial 15px`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns
#### Article Header
**Role:** Content Introduction
**Pages observed:** https://rrtusa.com
**Spec:** Typography `Roboto 30px` / Color `#1e293b` / Margin-bottom `16px`
**States observed:** Default

#### Content Image
**Role:** Visual Illustration
**Pages observed:** https://rrtusa.com
**Spec:** Border-radius `0px` / Width `100%` / Display `block`
**States observed:** Default

### Tier 3: Surface-specific
#### List Item (Unordered)
**Role:** Information Grouping
**Pages observed:** https://rrtusa.com
**Spec:** Typography `Arial 15px` / Line-height `24.2px` / Color `#000000`
**States observed:** Default

#### Bold Span Accent
**Role:** Inline Emphasis
**Pages observed:** https://rrtusa.com
**Spec:** Typography `Arial 17px` / Weight `700` / Color `#000000`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (Inferred from desktop screenshot) |
| Gutter | 20px |
| Section Padding | 40px - 60px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Header navigation collapses to hamburger menu; typography scales to viewport. |
| Desktop | 1440px | Full horizontal navigation; multi-column text flow. |

## Imagery & decoration
- **Photography:** High-saturation, literal imagery (e.g., casino chips, roulette wheels) used to anchor abstract topics.
- **Iconography:** Minimal use of semantic icons (Checkmarks/Crosses) for Pros/Cons lists.
- **Avoids:** Gradients, rounded corners, and decorative shadows.

## Do's
- Use `#1e293b` for all primary section headings.
- Maintain a strict `0px` border radius on all images and containers.
- Use Roboto 600 for any element that defines a new content section.
- Ensure all body text has at least a 1.4x line-height for readability.
- Use pure white `#ffffff` as the only background for content areas.

## Don'ts
- **Wrong:** Using `#046bd2` (Brand Blue) for heading text. **Right:** Use `#1e293b`. **Reason:** Blue is a declared token but not used for primary typography in the parent brand.
- Do not apply `border-radius` to any component; the brand is strictly sharp-edged.
- Do not use Arial for H1 or H2 level headings.
- Do not use drop shadows to create depth; use whitespace.
- Do not use pure black `#000000` for long-form body paragraphs; use `#1e293b` or `#7a7a7a`.

## Similar brands
- Reuters (Editorial, high-density, serif-sans mix)
- NYT (Typographic hierarchy, monochrome foundation)
- Associated Press (Functional, information-first, rigid grid)

## Quick start

```css
/* CSS Variables */
:root {
  --primary-heading: #1e293b;
  --primary-text: #000000;
  --secondary-text: #7a7a7a;
  --background: #ffffff;
  --font-heading: 'Roboto', sans-serif;
  --font-body: 'Arial', sans-serif;
  --radius-none: 0px;
}
```

## Agent prompt examples
- "Generate a blog post layout using Roboto 600 for headings in #1e293b and Arial 16px for body text, with no rounded corners on any images."
- "Create a high-contrast data table with a #ffffff background and 1px #d1d5db borders, using sharp 0px corners."
- "Design a footer section with a #eeeeee background and 15px Arial text in #7a7a7a."

## Known gaps
- Hover and Active states for navigation links were not captured in the static analysis.
- Form input components were not present on the analyzed pages.
- The specific usage of the declared "Vivid Purple" and "Vivid Green" tokens was not observed in the parent brand's primary layout.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Main Page | https://rrtusa.com | 1440x900 | 2026-06-06 |
| Mobile View | https://rrtusa.com | 390x844 | 2026-06-06 |