---
version: alpha
name: Doubloon Directory
description: Dense CRM interface with brass-gold actions, cool grey-blue structure, 1px borders and tabular figures for fast record scanning.
colors:
  background: "#f6f8fb"
  foreground: "#131823"
  card: "#ffffff"
  card-foreground: "#131823"
  popover: "#ffffff"
  popover-foreground: "#131823"
  primary: "#735a00"
  primary-foreground: "#ffffff"
  secondary: "#eceff4"
  secondary-foreground: "#222937"
  muted: "#eceff4"
  muted-foreground: "#556275"
  accent: "#fff3c6"
  accent-foreground: "#413300"
  destructive: "#b8244a"
  destructive-foreground: "#ffffff"
  success: "#086638"
  success-foreground: "#ffffff"
  warning: "#fdd6a2"
  warning-foreground: "#562c0b"
  border: "#dde2ea"
  input: "#c3cbd7"
  ring: "#735a00"
  dark-background: "#131823"
  dark-foreground: "#f6f8fb"
  dark-card: "#222937"
  dark-card-foreground: "#f6f8fb"
  dark-popover: "#222937"
  dark-popover-foreground: "#f6f8fb"
  dark-primary: "#d6af24"
  dark-primary-foreground: "#2a2100"
  dark-secondary: "#333c4c"
  dark-secondary-foreground: "#eceff4"
  dark-muted: "#333c4c"
  dark-muted-foreground: "#c3cbd7"
  dark-accent: "#413300"
  dark-accent-foreground: "#fff3c6"
  dark-destructive: "#f0607a"
  dark-destructive-foreground: "#37000f"
  dark-success: "#3fbd72"
  dark-success-foreground: "#032816"
  dark-warning: "#ef9a38"
  dark-warning-foreground: "#381b05"
  dark-border: "#333c4c"
  dark-input: "#445063"
  dark-ring: "#d6af24"
typography:
  display-lg:
    fontFamily: Instrument Serif
    fontSize: 38px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: -0.02em
  display-md:
    fontFamily: Instrument Serif
    fontSize: 30px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: -0.015em
  heading-lg:
    fontFamily: Instrument Serif
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.01em
  heading-md:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.01em
  heading-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: -0.003em
  body-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
  body-sm:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.45
  label:
    fontFamily: Inter
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: 0.003em
  caption:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.01em
  code:
    fontFamily: Geist Mono
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 3px
  md: 6px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 32px
  button-secondary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 32px
  button-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 32px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 8px
    height: 32px
  card:
    backgroundColor: "{colors.card}"
    textColor: "{colors.card-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  popover:
    backgroundColor: "{colors.popover}"
    textColor: "{colors.popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text:
    backgroundColor: "{colors.background}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt:
    backgroundColor: "{colors.muted}"
    textColor: "{colors.muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 6px
    height: 18px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 6px
    height: 18px
  badge-warning:
    backgroundColor: "{colors.warning}"
    textColor: "{colors.warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 6px
    height: 18px
  badge-destructive:
    backgroundColor: "{colors.destructive}"
    textColor: "{colors.destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 6px
    height: 18px
  button-primary-dark:
    backgroundColor: "{colors.dark-primary}"
    textColor: "{colors.dark-primary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 32px
  button-secondary-dark:
    backgroundColor: "{colors.dark-secondary}"
    textColor: "{colors.dark-secondary-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 32px
  button-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 0 12px
    height: 32px
  input-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-foreground}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.md}"
    padding: 0 8px
    height: 32px
  card-dark:
    backgroundColor: "{colors.dark-card}"
    textColor: "{colors.dark-card-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  popover-dark:
    backgroundColor: "{colors.dark-popover}"
    textColor: "{colors.dark-popover-foreground}"
    rounded: "{rounded.lg}"
    padding: 12px
  helper-text-dark:
    backgroundColor: "{colors.dark-background}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
  table-row-alt-dark:
    backgroundColor: "{colors.dark-muted}"
    textColor: "{colors.dark-muted-foreground}"
    typography: "{typography.body-sm}"
    height: 44px
  badge-dark:
    backgroundColor: "{colors.dark-accent}"
    textColor: "{colors.dark-accent-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 6px
    height: 18px
  badge-success-dark:
    backgroundColor: "{colors.dark-success}"
    textColor: "{colors.dark-success-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 6px
    height: 18px
  badge-warning-dark:
    backgroundColor: "{colors.dark-warning}"
    textColor: "{colors.dark-warning-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 6px
    height: 18px
  badge-destructive-dark:
    backgroundColor: "{colors.dark-destructive}"
    textColor: "{colors.dark-destructive-foreground}"
    typography: "{typography.caption}"
    rounded: "{rounded.full}"
    padding: 0 6px
    height: 18px
---

# Doubloon Directory

## Overview

Doubloon Directory is for people who work in contact, pipeline and activity records for hours: account executives, RevOps analysts and customer success leads. Spacing stays on space.0.5 to space.3 inside rows. Every container has a 1px border token. Numeric columns use tabular figures so values align without effort. Decoration is limited to one serif title per page and one gold primary action per view.

Moods: technical, precise, calm. Built for: crm, sales-ops, b2b-saas. Density: compact.

Every color has a light value and a dark value. Tokens named `dark-*` are the dark-mode counterparts of the token with the same role name.

## Colors

Tally Gold (brand, a brass in the 80 to 99 OKLCH hue band) carries primary, ring and selected states. It is brand.700 #735a00 in light mode, about 6.2:1 on background, and brand.400 #d6af24 in dark mode, about 8.5:1 on background. The neutral ramp is tinted cool blue (hue near 255) at low chroma, so long grids stay quiet and gold reads as the only warm accent. Status scales follow the same chroma curve as brand: chroma peaks at 400 to 500, then tapers toward 50 and 950 so mid-steps stay clean. Success is a slightly warm green and warning is a burnt amber that sits clear of gold. Danger is a magenta-leaning crimson (danger.600 #b8244a light, danger.400 #f0607a dark), more than 18 ΔE from primary in both modes. Dark surfaces use neutral.950 #131823 for background and neutral.900 #222937 for card and popover, so cards sit one step above the page.

- **Primary** `#735a00` / dark `#d6af24`: the single action color. Primary buttons, links, focus ring.
- **Background / Foreground** `#f6f8fb` / dark `#131823` on `#131823` / dark `#f6f8fb`: page surface and body text.
- **Card** `#ffffff` / dark `#222937`: raised surfaces.
- **Secondary** `#eceff4` / dark `#333c4c`: secondary buttons and quiet controls.
- **Muted** `#eceff4` / dark `#333c4c` with **muted-foreground** `#556275` / dark `#c3cbd7`: helper text, table stripes, disabled-looking surfaces.
- **Accent** `#fff3c6` / dark `#413300`: highlights, selected rows, badges.
- **Destructive** `#b8244a` / dark `#f0607a`, **Success** `#086638` / dark `#3fbd72`, **Warning** `#fdd6a2` / dark `#ef9a38`: status only, always paired with an icon or label.
- **Border** `#dde2ea` / dark `#333c4c`, **Input** `#c3cbd7` / dark `#445063`, **Ring** `#735a00` / dark `#d6af24`.

All text/background pairs above pass WCAG AA (4.5:1) in both modes; this is checked automatically at build time.

## Typography

Inter (400, 500, 600) sets all interface text, tables and forms. Its tnum feature keeps numeric columns aligned. Instrument Serif at weight 400 sets only display-lg 38px, display-md 30px and heading-lg 24px. Those sizes step by a 1.25 ratio, with letterSpacing tightened from -0.01em to -0.02em as size grows. Sans text runs 11 / 13 / 14 / 16 / 18px. body-md is 14px at 1.5 line height for comfortable reading in dense views. Geist Mono (400, 500) sets code at 13px for deal IDs, API keys and record identifiers.

- Display: **Instrument Serif** (fallback Georgia, serif)
- Interface: **Inter** (fallback system-ui, sans-serif)
- Mono: **Geist Mono** (fallback ui-monospace, monospace)

| Token | Font | Size | Line height | Weight |
|---|---|---|---|---|
| display-lg | Instrument Serif | 38px | 1.1 | 400 |
| display-md | Instrument Serif | 30px | 1.15 | 400 |
| heading-lg | Instrument Serif | 24px | 1.2 | 400 |
| heading-md | Inter | 18px | 1.3 | 600 |
| heading-sm | Inter | 14px | 1.35 | 600 |
| body-lg | Inter | 16px | 1.55 | 400 |
| body-md | Inter | 14px | 1.5 | 400 |
| body-sm | Inter | 13px | 1.45 | 400 |
| label | Inter | 13px | 1.25 | 500 |
| caption | Inter | 11px | 1.4 | 500 |
| code | Geist Mono | 13px | 1.5 | 400 |

## Layout

Compact density on a 4px grid, with space.0.5 (2px) and space.1.5 (6px) for hairline adjustments. Buttons, inputs and table rows are 32px tall. Card padding is space.3 (12px). Badges are 18px tall. Section gaps use space.4 to space.6.

Spacing uses a 4px base: xs = 4px, sm = 8px, md = 16px, lg = 24px, xl = 32px, 2xl = 48px, 3xl = 64px.

## Elevation & Depth

Mostly flat. Panels and table containers are separated by the 1px border token (neutral.200 light, neutral.800 dark). Cards use shadow.sm. Menus and popovers use shadow.md, and dialogs use shadow.lg. Shadows are tinted with neutral.950 rather than black.

- sm: `0 1px 2px rgba(19, 24, 35, 0.08)`
- md: `0 4px 10px -2px rgba(19, 24, 35, 0.14)`
- lg: `0 12px 28px -6px rgba(19, 24, 35, 0.22)`

## Shapes

radius.sm (3px) for checkboxes and inline tags, radius.md (6px) for buttons and inputs, and radius.lg (8px) for cards. radius.xl (12px) is for dialogs only. radius.full is for status badges only.

Radius scale: sm 3px, md 6px, lg 8px, xl 12px, full 9999px.

## Components

Components ending in `-dark` are the dark-mode versions. Button: 32px tall, 12px horizontal padding, label type. Input: 32px tall with a 1px input-colored border; focus shows a 2px ring in the ring color. Card: 12px padding, 1px border, sm shadow. Badge: pill, caption type.

## Do's and Don'ts

- **Do:** Use the primary token for at most one button per view, such as Save or Create deal. Set every other button to secondary (neutral.100 fill) or ghost.
- **Do:** Set numeric table columns in Inter with font-feature-settings: 'tnum' and align them right.
- **Do:** Keep table rows and buttons at 32px. Use space.1 to space.3 for in-row and in-cell padding.
- **Do:** Separate table rows and outline inputs with 1px border and input tokens, not shadows or background tints alone.
- **Do:** Show focus on every interactive element with a 2px ring token outline at 2px offset (brand.700 light, brand.400 dark).
- **Do:** Pair every success, warning and destructive badge with a text label or icon so state is never conveyed by color alone.
- **Do:** Use muted-foreground (neutral.600 light, neutral.300 dark) for secondary metadata such as timestamps and owner names. Do not go lighter than these tokens.
- **Don't:** Don't use primary, accent or any brand step for errors, overdue dates or negative deltas. Use destructive for those.
- **Don't:** Don't set Instrument Serif below 24px (heading-lg) or on table headers, labels, buttons or form text.
- **Don't:** Don't use weights other than 400 for Instrument Serif, 400 to 600 for Inter, or 400 and 500 for Geist Mono.
- **Don't:** Don't apply shadow.md or shadow.lg to table rows, list items or cards. Use shadow.md for menus and popovers and shadow.lg for dialogs.
- **Don't:** Don't use the warning token for highlights or selection. Use accent (brand.100 light, brand.900 dark) for selected rows instead.
- **Don't:** Don't use pure black, pure grey or warm greys. Draw every surface, border and text color from color.neutral.