Style Guide

Design system tokens, typography, colors, and components for California Legal Firearms.

Colors

Background — #0a0a0a
Surface — #111111
Card — #1a1a1a
Accent — #dc2626
Text Primary — #ffffff
Text Secondary — #a0a0a0
Border — #2a2a2a

Typography

ds-heading-xl — 70px / 800 / Inter

California DOJ Handgun Roster

ds-heading-lg — 48px / 700 / Inter

Featured Certified Handguns

ds-heading-md — 35px / 700 / Inter

Why Use This Resource?

This is some text inside of a div block.

Automated DOJ Sync

This is some text inside of a div block.
Filter by Manufacturer
This is some text inside of a div block.

The most comprehensive, up-to-date database of California DOJ certified handguns. Automatically synced with the official roster.

This is some text inside of a div block.

Filter by manufacturer, caliber, barrel length, type, and roster status. Find exactly what you’re looking for in seconds.

This is some text inside of a div block.
This is some text inside of a div block.

Buttons

Browse RosterLearn MoreView All →

Components

This is some text inside of a div block.

Card Component

Dark card with subtle border. Used for feature boxes, firearm listings, and content blocks.

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

Class Naming Convention

Design System Prefix: ds-

ds-heading-xl, ds-heading-lg, ds-heading-md, ds-heading-sm, ds-heading-xs — Typography scale. ds-body-lg, ds-body-md, ds-body-sm — Body text. ds-label — Uppercase accent label. ds-btn-primary, ds-btn-secondary, ds-btn-ghost — Button variants. ds-card — Standard card container. ds-tag, ds-tag-active — Inline tags/badges. ds-divider — Section separator.

Legacy Classes to Phase Out

Div Block 2–28, Paragraph 2–15, Image 2–15, Text Block 2–12 — Auto-generated names with no semantic meaning. Job Grid, Job Wrapper, Job Name, Job Type, Company Logo, Company Name — Leftover from job board template. Replace with ds- prefixed classes as sections are updated.

Style Guide

Design system tokens, typography, colors, and components for California Legal Firearms.