Design System

01ACCESSIBLE COLOR PALETTE

The key change — dual accent colors

Accent colors (sage, rust, gold) now have two text variants: one for dark backgrounds, one for light. The original hex values are preserved for background fills, borders, and decorative use — only the text-on-background colors change.

Sage — section labels, tags, accents

SAGE ON DARK BACKGROUNDS

SELL YOUR RIG IN ONE CLICK

ICON STAGE 3 CORE TOOL

#78A68E · 4.79:1 min

Tailwind: text-sage-on-dark

SAGE ON LIGHT BACKGROUNDS

SHOP BY CATEGORY

ICON STAGE 3 CORE TOOL

#3D6B4F · 5.80:1 min

Tailwind: text-sage-on-light

Rust — primary accent, CTAs, emphasis

RUST ON DARK BACKGROUNDS

GEAR MARKETPLACE

FOR SALE SPONSOR

#E0854E · 4.78:1 min

Tailwind: text-rust-on-dark · bg-rust for button fills

RUST ON LIGHT BACKGROUNDS

GEAR MARKETPLACE

48 THIS MONTH FOR SALE

#A04B1C · 5.63:1 min

Tailwind: text-rust-on-light

Gold & text hierarchy

GOLD + TEXT HIERARCHY ON DARK

Primary — #F2F0EA 15.65:1

Secondary — #B8B5AD 8.71:1

Tertiary — #8A877F 4.97:1

Muted — #9A9893 6.19:1 ← was #5E5C56 (2.67)

GOLD #B89430 · 4.58:1

GOLD + TEXT HIERARCHY ON LIGHT

Primary — #1C2B1F 13.99:1

Secondary — #6E6B65 5.01:1 ← was #8A877F (3.38)

Muted — #5E5C56 6.30:1

GOLD #7A640B · 5.42:1

Background fills (unchanged)

These are used for button backgrounds, card fills, section backgrounds, and borders. They don't need contrast ratios because they're not text.

#0F1A13

Dark

bg-dark

#1C2B1F

Forest

bg-forest

#243428

Forest 2

bg-forest-2

#3D6B4F

Sage Fill

bg-sage

#C45B28

Rust Fill

bg-rust

#D4682F

Rust Hover

hover:bg-rust-hover

#FAF8F4

Cream

bg-cream

#F4F1EB

Sand

bg-sand

02TYPOGRAPHY

Bebas Neue — display / font-display

HERO & SECTION TITLES

BUILD IT. PLAN IT.
RIDE IT. SELL IT.

CLASSIFIEDS THAT BUILD THEMSELVES

180+

Hero: clamp(44px,6vw,76px) · Section: clamp(32px,4.5vw,52px) · Stats: 26–34px · Always uppercase

Barlow Condensed — headings, buttons, nav / font-heading

CARD TITLES · NAV LINKS · BUTTONS

2021 Toyota 4Runner TRD Pro

RECOVERY GEAR

CLASSIFIEDS GEAR TRIPS FORUMS GARAGE

CREATE FREE ACCOUNT →

Card title: 700, 17px · Category: 700, 14px · Nav: 600, 13px · Button: 700, 13px · Always uppercase, tracking 0.5–1.5px

Barlow — body text / font-body

BODY ON DARK

The platform built for the trail, not the timeline.

One place to research every mod for your build.

78K mi · 24 mods · 3 trip journals

BODY ON LIGHT

The platform built for the trail, not the timeline.

One place to research every mod for your build.

78K mi · 24 mods · 3 trip journals

JetBrains Mono — metadata, tags, labels / font-mono

MONO ON DARK

SELL YOUR RIG IN ONE CLICK

78K MI · MAGNETIC GRAY · 24 MODS

ICON STAGE 3 FOR SALE PREMIUM

MONO ON LIGHT

SHOP BY CATEGORY

180+ BRANDS · 3,200+ PRODUCTS

CORE TOOL 48 THIS MONTH PREMIUM

03BUTTONS

BUTTONS ON DARK

Create Free Account →v-btn color="rust"

See What's Insideoutlined

+ List Rigsize="small"

BUTTONS ON LIGHT

Browse Classifieds

Add a Listing

Forest Solid Sage Solid

All buttons: Barlow Condensed 700 · 13–14px · tracking 0.1em · uppercase · rounded-sm (6px) · Padding: 14px 28px default, 8px 16px small · Hover: translateY(-1px) · White text on all filled buttons passes AA.

04CARDS & SECTION HEADERS

CARD ON DARK · bg-white/[0.03] border-white/[0.06]

🚙

2021 4Runner TRD Pro

78K MI · 24 MODS · 6 TRIPS

ICON STAGE 3 35" KO2s

LIST FOR SALE

CARD ON LIGHT · bg-white border-forest/[0.06]

Mojave Road Run 2026

MAY 9–12 · MODERATE/HARD

14

Going

3

Wait

4

Days

12

Points

JT

Jake T. 4Runner LEAD

05BORDER RADIUS

6pxsm

10pxDEFAULT

14pxlg

20pxxl

fullpill

sm (6px): buttons, inputs, tags · DEFAULT (10px): cards, panels · lg (14px): feature cards, mock windows · xl (20px): hero, partner visual · full: avatars, pills, badges

06BORDERS

Subtle darkwhite/[0.06]

Hover darkwhite/10

Subtle lightforest/[0.06]

Hover lightforest/[0.15]

Rustrust/[0.12]

Sagesage/[0.15]

07SPACING

Section pad

60–100px

Feature gap

56px

Sub → content

40px

Card gap

12–16px

Title → sub

12px

Label → title

8px

Max width: 1200px · Nav: 64px · Section padding: clamp(60px,10vw,100px) vertical, clamp(16px,4vw,48px) horizontal

08BACKGROUND ALTERNATION

Herobg-dark

Built for the Trailbg-cream

Five Pillarsbg-forest

Rig Garagebg-dark

Trip Planningbg-cream

Classifiedsbg-forest-2

Gearbg-cream

Brandsbg-dark

Sponsoredbg-forest-2

Communitybg-forest

Mod CTAbg-sage

Partnersgradient

Newsletterbg-rust

Footerbg-dark

09LOGO

ON DARK

OVERLANDER CLASSIFIEDS

ON LIGHT

OVERLANDER CLASSIFIEDS

10CONFIGURATION — COPY & PASTE

tailwind.config.js

export default { content: ['./src/**/*.{vue,js,ts}'], theme: { extend: { colors: { dark: '#0F1A13', forest: { DEFAULT: '#1C2B1F', 2: '#243428', 3: '#2E4233' }, sage: { DEFAULT: '#3D6B4F', light: '#4A7D5E', 'on-dark': '#78A68E', 'on-light': '#3D6B4F' }, rust: { DEFAULT: '#C45B28', hover: '#D4682F', 'on-dark': '#E0854E', 'on-light': '#A04B1C' }, gold: { DEFAULT: '#9A7B10', 'on-dark': '#B89430', 'on-light': '#7A640B' }, cream: '#FAF8F4', sand: { DEFAULT: '#F4F1EB', 2: '#E8E4DC' }, 'oc-text': { DEFAULT: '#F2F0EA', 2: '#B8B5AD', 3: '#8A877F', 4: '#9A9893' }, 'oc-body': { DEFAULT: '#6E6B65', muted: '#5E5C56' }, }, fontFamily: { display: ['Bebas Neue', 'sans-serif'], heading: ['Barlow Condensed', 'sans-serif'], body: ['Barlow', 'sans-serif'], mono: ['JetBrains Mono', 'monospace'], }, borderRadius: { sm: '6px', DEFAULT: '10px', lg: '14px', xl: '20px' }, letterSpacing: { label: '0.15em', btn: '0.1em', brand: '0.2em' }, }, }, }

Vuetify theme — plugins/vuetify.js

const ocTheme = { dark: true, colors: { background: '#0F1A13', surface: '#1C2B1F', 'surface-variant': '#243428', primary: '#C45B28', secondary: '#3D6B4F', accent: '#4A7D5E', warning: '#9A7B10', 'on-background': '#F2F0EA', 'on-surface': '#F2F0EA', rust: '#C45B28', sage: '#3D6B4F', forest: '#1C2B1F', gold: '#9A7B10', cream: '#FAF8F4', sand: '#F4F1EB', }, } // Component defaults defaults: { VBtn: { rounded: 'sm', variant: 'flat', class: 'font-heading tracking-btn uppercase font-bold' }, VCard: { rounded: 'lg', variant: 'outlined' }, VChip: { rounded: 'sm', size: 'small', class: 'font-mono' }, VTextField: { variant: 'outlined', density: 'comfortable', rounded: 'sm' }, }

Google Fonts