# Design Reference - Rox
> Analytical Blueprint on Pure White. An interface that feels like a meticulously charted course on a pristine, well-lit canvas.

## Source
- Original site: https://rox.com
- Captured: 2026-04-11T18:37:21.679Z

## Tags
- data-driven
- minimalist
- formal
- high-contrast
- clean
- editorial
- blue-accent
- subtle-shadows
- serif-headline
- polished

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Page Canvas | `#f5f5f4` | neutral | Primary background for pages and major sections, providing a clean, bright foundation. |
| Surface White | `#ffffff` | neutral | Used for cards, panels, and elements needing to stand out slightly from the main background, often appearing as content containers. |
| Blueprint Blue | `#0b64e9` | brand | Primary brand accent, used for all calls-to-action, interactive states, and key navigational elements to draw attention without being overwhelming. |
| Text Primary | `#0c0a09` | neutral | Main body text, headlines, and critical information for maximum readability against light backgrounds. |
| Text Secondary | `#1c1917` | neutral | Subheadings, supporting text, and less emphasized information, a subtle step lighter than primary text but still high contrast. |
| Text Muted | `#a6a09b` | neutral | Placeholder text, minor labels, and supplementary details, providing a softer visual presence. |
| Text Subtle | `#57534d` | neutral | Less prominent text like captions or descriptions, visually receding while remaining legible. |
| Subtle Gray | `#ececea` | neutral | Backgrounds for subtle containers like badges or minor card elements, offering a hint of differentiation. |
| Border Light | `#f0efef` | neutral | Distinguishes UI elements with a subtle border, especially for form fields and interactive elements. |
| Disabled Gray | `#d4d2d1` | neutral | Used for disabled states of interactive components, indicating non-interactability. |
| Status Red | `#f24149` | semantic | Indicator for errors or important alerts, drawing quick attention. |
| Status Orange | `#f97006` | semantic | Highlighting warnings or moderate priority information. |
| Status Yellow | `#f9b703` | semantic | For informational highlights or less critical status indicators. |
| Status Violet | `#6b4aff` | semantic | Likely for specific status tags or categories, providing visual distinction. |

## Typography
- role: Hero and display headings — the signature typeface for brand impact, creating an elegant, authoritative presence with extreme size and tight line height.; sizes: 106px, 183px; family: FH Total Display Regular; weight: 400; lineHeight: 0.80; substitute: Playfair Display
- role: Primary body and subheadings — a modern, geometric sans-serif that balances the classic display font with clarity and digital readability.; sizes: 14px, 16px, 18px, 20px, 24px, 28px; family: Geist; weight: 400, 500; lineHeight: 1.20, 1.30, 1.40; substitute: Inter; letterSpacing: -0.02; fontFeatureSettings: "blwf" on, "cv03" on, "cv04" on, "cv09" on, "cv11" on
- role: Secondary body text and utility content — ensures broad compatibility and performance for smaller text blocks, leveraging system fonts for efficiency.; sizes: 10px, 12px, 14px; family: system-ui; weight: 400, 500; lineHeight: 1.30; letterSpacing: -0.03
- role: Smallest UI text, labels, and metadata — a fallback simple sans-serif for minimal text elements where space is constrained.; sizes: 12px; family: sans-serif; weight: 400; lineHeight: 1.20

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "pill": "100px",
      "large": "12px",
      "buttons": "8px",
      "default": "6px"
    },
    "elementGap": "4-16px",
    "sectionGap": "",
    "cardPadding": "16px"
  },
  "radius": {
    "pill": "100px",
    "large": "12px",
    "buttons": "8px",
    "default": "6px"
  }
}
```

## Component Patterns
- name: Workflow Tab Bar
- name: Outbound Agent Dashboard Card
- name: CTA Button Group with Announcement Badge
- name: Primary Filled Button; role: Interactive element
- name: Secondary Outlined Button; role: Interactive element
- name: Text Link; role: Navigation/Interactive text
- name: Header Navigation Item; role: Global Navigation
- name: Display Headline - 'The Grand Statement'; role: Hero content
- name: Card Container; role: Content grouping
- name: Status Tag; role: Categorization/Label

## Do
- Use 'FH Total Display Regular' solely for hero-level headlines (106px, 183px) to establish brand gravitas; reserve serif usage for maximum impact.
- Apply 'Blueprint Blue' (#0b64e9) exclusively for primary calls-to-action and active states to maintain clear visual hierarchy.
- Employ the '#f5f5f4' 'Page Canvas' for all primary page backgrounds to ensure an expansive, clean aesthetic.
- Utilize Geist font with a -0.02em letter-spacing for all body text and subheadings to maintain the distinct digital typography.
- Standardize on 6px default radii for all general elements and 8px for buttons, except for pill shapes which use 100px.
- Always use 'Text Primary' (#0c0a09) for main body copy and 'Text Secondary' (#1c1917) for sub-content on light backgrounds for optimal contrast.

## Don't
- Do not use multiple saturated colors for primary interactive elements; Blueprint Blue (#0b64e9) serves as the singular brand identifier.
- Avoid strong, heavy drop shadows; instead, use subtle shadows like rgba(0, 0, 0, 0.06) 0px 2px 4px 0px for minimal elevation.
- Do not use generic system fonts for prominent headings; FH Total Display Regular is reserved for brand distinction.
- Refrain from using color to signify hierarchy on text elements; instead, rely on font weights, sizes, and the specified neutral color scale (Text Primary, Secondary, Muted).
- Do not introduce new border radii beyond 1px, 6px, 8px, 12px, 16px, 20px, 30px, 36px, and 100px to maintain consistent geometric rhythm.