Locket Design System

Temporary showcase — will be replaced by the home dashboard.

Dark Mode

Current: system (resolved: ...)

Toggle button (switches Light ↔ Dark):

Navigation Header

Authenticated (with avatar)

Admin user (with avatar image)

Unauthenticated (no user)

Footer

Locket Vault ©2026. All rights reserved.

Logo

Sizes

Small (100px)

Default (141px)

Large (200px)

Variants

Light (Chocolate wordmark)

Dark (White wordmark)

Auto (follows dark mode)

Colors

Brand

Clay
#A03800 — Primary accent, CTAs, links
Chesnut
#762700 — Hover/pressed states
Coffee
#4C1A00 — Dark accent variant
Chocolate
#280F00 — Heading text, darkest text
Wheat
#EBDBBC — Warm accent backgrounds

Neutrals

Inputs Border
#958E80 — Form input borders
Ash
#CDC6B9 — Disabled, secondary borders
Bone
#E3DACC — Card/section backgrounds
Quill
#DAD8D0 — Subtle background variant
Tile
#E6E5DE — Divider backgrounds
Merino
#EFEDE6 — Page background
White Smoke
#F9F7F4 — Lighter page areas
White
#FFFFFF — Card backgrounds, inputs

System

Error
#D32F2F — Error states, destructive
Warning
#F59E0B — Warning messages
Success
#16A34A — Success, confirmations
Info
#2563EB — Informational messages

Typography

Display — Bogue Slab Light ~36-48px

Recent Pieces

Heading 1 — Bogue Slab Light ~28-32px

Collections

Heading 2 — Bogue Slab Light ~22-24px

Basic Details

Heading 3 — DM Sans Bold ~18px

Cartier Love Bracelet

Body — DM Sans Regular ~16px

A beautiful 18k yellow gold Love bracelet, purchased at the Cartier boutique on Fifth Avenue. Features the iconic screw motif and comes with original box and certificate.

Body Small — DM Sans Regular ~14px

Acquired on December 15, 2024 from Cartier Fifth Avenue

Label — DM Sans Bold ~12px uppercase

Collection

Caption — DM Sans Regular ~12px

Locket Vault @2026. All rights reserved.

Spacing (Tailwind default)

Uses Tailwind's built-in spacing scale: p-1 (4px), p-2 (8px), p-4 (16px), p-6 (24px), p-8 (32px), p-12 (48px), p-16 (64px)

1 (4px)
2 (8px)
4 (16px)
6 (24px)
8 (32px)
12 (48px)
16 (64px)

Button

Variants

Sizes

Disabled

Full Width

Cards

Piece Cards

Cartier Love Bracelet

Cartier Love Bracelet

Rings · Jewelry

Collection Fine Jewelry

Hermes Birkin 25

Hermes Birkin 25

Handbags

Rolex Submariner Date

Rolex Submariner Date

Watches · Accessories

Collection Timepieces

New Piece

Collection Cards

Fine Jewelry

12 items

Timepieces

5 items

Handbags

0 items

New Collection

Toggle Switch

Make publicly viewable
Enable notifications
Disabled toggle
Disabled (on)

Input

Select

Autocomplete

Selected: (none) —

Search Input

Value: "Cartier"

Tag Input

GoldVintage
InheritedAppraised

Toast

Click a button to trigger a toast notification in the top-right corner.

Confirmation Dialog

Empty State

No pieces yet

Add your first piece to start building your vault.

No collections yet

Create your first collection to organize your pieces.