Doubloon Directory

About 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.

Color

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.

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.

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.

Elevation

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.

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.

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.
• Set numeric table columns in Inter with font-feature-settings: 'tnum' and align them right.
• Keep table rows and buttons at 32px. Use space.1 to space.3 for in-row and in-cell padding.
• Separate table rows and outline inputs with 1px border and input tokens, not shadows or background tints alone.
• Show focus on every interactive element with a 2px ring token outline at 2px offset (brand.700 light, brand.400 dark).
• Pair every success, warning and destructive badge with a text label or icon so state is never conveyed by color alone.
• 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 set Instrument Serif below 24px (heading-lg) or on table headers, labels, buttons or form text.
• Don't use weights other than 400 for Instrument Serif, 400 to 600 for Inter, or 400 and 500 for Geist Mono.
• 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 use the warning token for highlights or selection. Use accent (brand.100 light, brand.900 dark) for selected rows instead.
• Don't use pure black, pure grey or warm greys. Draw every surface, border and text color from color.neutral.