XDS — Design System

@xds/theme-chocolate0.0.14

Warm chocolate theme for XDS — rich brown palette with Fraunces headings, Albert Sans body, and Lucide icons

Little joys,
everywhere you goWe believe the smallest details are the ones that matter most. Turn an ordinary day into something worth remembering.

Get started Learn more

New

Minimalist Watch

Clean design meets everyday durability.Learn more

Popular

Wireless Headphones

Immersive sound, all-day comfort.Learn more

Limited

Leather Wallet

Handcrafted from full-grain leather.Learn more

Name	Description	Price	Stock
Minimalist Watch	Stainless steel, sapphire crystal	$189	42
Wireless Headphones	ANC, 30hr battery	$249	128
Leather Wallet	Full-grain, RFID blocking	$79	15
Canvas Backpack	Water-resistant, 25L	$119	63

Colors

Fonts

AaBody

AaCode

Components

Primary Secondary Ghost

BadgeInfoSuccessWarningError

Label

Options

Option A

Option B

Option C

List Header

Notifications
Privacy
Security

Card Title

A flexible surface for grouping related content and actions.Action

Example

Progress

Toggle

Warm chocolate theme with rich brown tones and cozy beige backgrounds. Uses Fraunces for headings, Albert Sans for body text, and Lucide icons.

Install

bash
npm install @xds/theme-chocolate

Usage

Wrap your app with XDSTheme and pass the theme:

tsx
import {XDSTheme} from '@xds/core/theme';
import {chocolateTheme} from '@xds/theme-chocolate/built';
function App() {
  return <XDSTheme theme={chocolateTheme}>{/* your app */}</XDSTheme>;
}

Import paths

Path	Use case
`@xds/theme-chocolate`	Source build (StyleX compilation via `@xds/build`)
`@xds/theme-chocolate/built`	Pre-built dist (Tailwind, plain CSS, or no build step)
`@xds/theme-chocolate/theme.css`	Pre-built CSS file (import in your stylesheet)

If you're using @xds/build for StyleX source compilation, import from the bare path. Otherwise, use /built.

CSS import

Add the theme CSS to your stylesheet:

css
@import '@xds/theme-chocolate/theme.css';

Fonts

This theme uses custom typefaces:

Role	Font
Body	Albert Sans
Heading	Fraunces
Code	JetBrains Mono

These fonts must be loaded separately. The theme references them by name but does not bundle the font files.

Add this to your HTML <head>:

html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Albert+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" />

Without this, the theme falls back to system fonts.