Design tokens and conventions for RivianTrackr projects. All values sourced from the Rivian Tire Guide plugin (v1.49.0, "ink & brass" theme).
| Field | Value |
|---|---|
| Product | Rivian Tire Guide |
| Author | RivianTrackr |
| Description | Interactive tire guide for Rivian vehicles with filtering, comparison, and ratings |
CSS custom properties prefixed with --rtg-. This is the user-facing theme.
"Ink & brass": near-neutral charcoal surfaces with a faint cool cast, warm-neutral text like ink on paper, and gold as the only saturated accent. Display titles (24px+) are weight 700 with negative tracking (-0.5px).
| Token | CSS Variable | Value | Usage |
|---|---|---|---|
| Primary Accent | --rtg-accent |
#fba919 |
Buttons, links, active states |
| Accent Hover | --rtg-accent-hover |
#fba919 |
Hover state for accent items |
| Background (Primary) | --rtg-bg-primary |
#16191e |
Page / section background |
| Background (Card) | --rtg-bg-card |
#16191e |
Card surfaces |
| Background (Input) | --rtg-bg-input |
#3a3e45 |
Form inputs, select fields |
| Background (Deep) | --rtg-bg-deep |
#121418 |
Deeper containers, footers |
| Text (Primary) | --rtg-text-primary |
#ece9e4 |
Body text |
| Text (Light) | --rtg-text-light |
#ece9e4 |
Emphasized text |
| Text (Muted) | --rtg-text-muted |
#ece9e4 |
Secondary / helper text |
| Text (Heading) | --rtg-text-heading |
#ece9e4 |
Headings, titles |
| Border / Divider | --rtg-border |
#3a3e45 |
Card borders, dividers, rules |
| Stars (Filled) | --rtg-star-filled |
#fba919 |
Filled rating stars |
| Stars (Your Rating) | --rtg-star-user |
#4ade80 |
User's own rating stars |
| Stars (Empty) | --rtg-star-empty |
#2c2f34 |
Empty / unfilled stars |
Used in the WordPress admin settings screens.
| Token | CSS Variable | Value |
|---|---|---|
| Action Primary | --rtg-action-primary |
#0071e3 |
| Action Hover | --rtg-action-hover |
#0077ed |
| Text Primary | --rtg-text-primary |
#1d1d1f |
| Text Secondary | --rtg-text-secondary |
#6e6e73 |
| Text Muted | --rtg-text-muted |
#86868b |
| Success | --rtg-success |
#34c759 |
| Success Light | --rtg-success-light |
#d1f4e0 |
| Error | --rtg-error |
#ff3b30 |
| Error Light | --rtg-error-light |
#ffe5e5 |
| Warning Background | --rtg-warning-bg |
#fff3cd |
| Info Background | --rtg-info-bg |
#dbeafe |
| Border | --rtg-border |
#d2d2d7 |
| Background Light | --rtg-bg-light |
#f5f5f7 |
| Background Hover | --rtg-bg-hover |
#e8e8ed |
| White | --rtg-white |
#ffffff |
Used for tire performance ratings (A–F letter grades).
| Grade | Color | Meaning |
|---|---|---|
| A | #34c759 |
Excellent |
| B | #7dc734 |
Good |
| C | #facc15 |
Fair |
| D | #f97316 |
Poor |
| F | #b91c1c |
Failing |
Note: Grade C text is overridden to #1d1d1f for contrast on the yellow background.
| Purpose | Stack |
|---|---|
| Primary | -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif |
| Monospace | 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace |
| Use Case | Size | Weight |
|---|---|---|
| Page title | 32px | 600 |
| Card header | 20px | 600 |
| Body | 14–15px | 400 |
| Small | 12–13px | 400 |
| Labels | 12px | 600 |
| Badges | 9–11px | 700 |
Font Awesome 6 Free (solid + regular weights).
| Token | Value | Usage |
|---|---|---|
--rtg-radius-card |
12px |
Cards, containers |
--rtg-radius-input |
8px |
Inputs, standard buttons |
--rtg-radius-badge |
6px |
Badges, small components |
--rtg-radius-pill |
4px |
Chips, label pills |
--rtg-radius-toggle |
34px |
Toggle switches |
| Full round | 9999px |
Pill buttons, fully rounded |
| Level | Value | Usage |
|---|---|---|
| Subtle | 0 1px 3px rgba(0,0,0,0.2) |
Small elements |
| Light | 0 2px 8px rgba(0,0,0,0.15) |
Hover cards |
| Medium | 0 4px 12px rgba(0,0,0,0.4) |
Elevated cards |
| Large | 0 8px 24px rgba(0,0,0,0.3) |
Modals, drawers |
| Overlay | 0 25px 60px rgba(0,0,0,0.5) |
Full-page overlays |
| Focus | 0 0 0 2px var(--rtg-accent) |
Keyboard focus ring |
| Speed | Duration | Easing | Usage |
|---|---|---|---|
| Instant | 0.1s | ease | Scale, active press |
| Fast | 0.15s | ease | Color, border, opacity |
| Standard | 0.2s | ease | Buttons, backgrounds |
| Smooth | 0.3s | ease | Slide, transform, drawers |
Reduced motion: all transitions and animations are disabled when prefers-reduced-motion: reduce is active.
- Buttons with
background: var(--rtg-accent)(#fba919) use dark text#15130e, not white. - Secondary / outline buttons use
color: var(--rtg-accent)with transparent or border-only backgrounds. - Destructive buttons (delete, dismiss) use red (
#ef4444/#ee383a). - Review/special-action buttons use purple (
#7c3aed).
A multi-color signature gradient used for special decorative elements:
linear-gradient(135deg, #fba919, #d2de24, #86c440, #5ec095, #34c5ec, #2b96d2, #3571b8, #534da0, #d11d55, #ef3d6c, #ed1a36, #ee383a)- Focus rings:
2px solid var(--rtg-accent)with2pxoffset - Reduced motion:
@media (prefers-reduced-motion: reduce)— disables all transitions and animations - Color contrast: Accent buttons use dark text (
#15130e) on gold (#fba919) for WCAG compliance