Philosophy

Design Philosophy

The principles that guide every design and engineering decision at Roam.

Stack

Tech Stack

The technologies that power curbo-web. Know the stack before you ship.

Components

Component Approach

How we choose, build, and organise components. shadcn/ui is the default — custom components are the exception.

Decision Flow

Directory Structure

components/
├── ui/                  # shadcn/ui — do not modify unless necessary
├── Common/              # Shared utility components
├── Layouts/             # Page layout wrappers
├── Navbar/              # Site navigation
├── Footer/              # Site footer
├── CarCards/            # Vehicle listing cards
├── Checkout/            # Checkout flow components
├── Dashboard/           # Customer dashboard
├── Filters/             # Browse/filter UI
├── FormInput/           # Form field components
└── ...                  # Other feature-specific components

The ui/ directory is managed by shadcn — avoid editing these files directly. Domain-specific components live in their own directories (CarCards, Checkout, etc.).

Styling

Styling Rules

The order of preference for styling and the hard rules that apply to all code.

Order of Preference

Hard Rules

Correct Pattern

// Good — Tailwind tokens only
<Button className="bg-primary text-primary-foreground">
  Subscribe
</Button>

// Bad — inline style with raw hex
<button style={{ backgroundColor: '#0A0A0A', color: '#fff' }}>
  Subscribe
</button>

// Bad — new library import
import { Button } from '@chakra-ui/react';

Colour

Colour in UI

How colour is applied in the interface. The UI is neutral-first — brand colours are accents, not foundations.

Primary CTA: Black

Use black (zinc-950 / #0A0A0A) as the primary CTA background. A neutral black CTA creates the clearest action hierarchy, works on any background, and avoids colour conflicts with brand accents or destructive states.

Fuchsia: Accent Only

Links

Links use neutral colours, not brand colours. They should feel part of the typographic system, not compete with accents.

Functional / Utility Colours

For non-brand UI states, use Tailwind’s built-in palette:

Theming

Dark Mode

Dark mode is supported and must be considered for all new components.

How It Works

Guidelines

• Do not hardcode light-mode colours. Always use shadcn tokens or Tailwind’s dark: variant.
• Light mode: White/near-white backgrounds, dark blue and fuchsia accents.
• Dark mode: Deep dark backgrounds (near #13013F), fuchsia and lighter purple as accents, white/light text.
• Test both modes before shipping every new component.
• shadcn components handle dark mode automatically when CSS variables are set correctly.

Pattern

// Good — uses shadcn token, adapts automatically
<div className="bg-background text-foreground">

// Good — explicit dark variant
<div className="bg-white dark:bg-zinc-900">

// Bad — hardcoded light colour, breaks in dark mode
<div className="bg-white text-black">

Iconography

Icons

Consistent iconography across the site. One source, one style.

Sources

Rules

• Consistency is mandatory — do not mix icon styles (line vs filled) or icons from incompatible libraries.
• Size with Tailwind: w-4 h-4 (16px), w-5 h-5 (20px), w-6 h-6 (24px).
• Use currentColor so icons inherit text colour and adapt to dark mode automatically.
• Brand accent icons can use fuchsia or dark blue explicitly where appropriate.
• Do not use Heroicons or Lucide directly for new work unless the icon truly doesn’t exist in the shadcn set.

Sizing Reference