Skip to content
Plinth

Accent

Open the theme customizer →
Plinth

Getting started

Design tokens

Every color, type style, corner and shadow in Plinth comes from a small set of tokens. They are CSS variables in app/globals.css, exposed as Tailwind utilities.

On this page

Colors

Colors are semantic: they describe a role, not a hue. Each token has a light and a dark value. The live swatch on the left uses the variable itself, so it shows the current mode and accent.

Surfaces

  • bg-canvasPage backgroundLight#fbfbfaDark#0c0c0e
  • bg-surfaceCards, inputs, popoversLight#ffffffDark#141417
  • bg-raisedHover rows, tracks, wellsLight#f4f4f2Dark#1b1b1f
  • bg-sunkenSegmented tracks, insetsLight#ececeaDark#09090b
  • border-lineHairline borders, dividersLightrgb(24 24 27 / 0.09)Darkrgb(244 244 245 / 0.08)
  • border-line-strongInputs, emphasized bordersLightrgb(24 24 27 / 0.16)Darkrgb(244 244 245 / 0.15)

Text

  • text-fgPrimary text and iconsLight#18181bDark#f4f4f5
  • text-mutedSecondary text, descriptionsLight#5b5b63Dark#a1a1aa
  • text-subtlePlaceholders, eyebrows, metaLight#8d8d95Dark#6f6f78

Accent

  • bg-accentPrimary actions, selectionLight#18181bDark#f4f4f5
  • hover:bg-accent-hoverHover state of accent fillsLight#2f2f35Dark#ffffff
  • text-accent-fgText and icons on accentLight#ffffffDark#18181b
  • bg-accent-softSelected rows, soft badgesLightrgb(24 24 27 / 0.07)Darkrgb(244 244 245 / 0.1)
  • ring-ringFocus ringsLightrgb(24 24 27 / 0.35)Darkrgb(244 244 245 / 0.4)

Status

  • text-successPositive states, paid, onlineLight#138a52Dark#34d399
  • text-warningAttention, pendingLight#b46a00Dark#fbbf4a
  • text-dangerErrors, destructive actionsLight#d63a32Dark#f87171
  • text-infoNeutral information, chart-2Light#2563d9Dark#7aa7ff

Chart series

Charts use four series colors in a fixed order. The first is always the accent, the others are status hues that work in both modes.

chart-1The accent
chart-2Info blue
chart-3Success green
chart-4Warning amber

Code colors

Code blocks stay dark in both modes. They use bg-code, bg-code-raised, border-code-line, text-code-fg and text-code-muted, plus six syntax colors.

tok-keyKeywords
tok-strStrings
tok-numNumbers
tok-fnFunctions
tok-propProperties
tok-comComments

Typography

Instrument Sans for interface text, DM Mono for code, keys and figures. Body text is 15px; component internals are usually 14px or 13px. Use tabular for numbers that line up in columns.

  • text-display44 / 48 · 600 · −0.035emComponents you ownPage heroes
  • text-title30 / 36 · 600 · −0.025emBilling settingsPage titles
  • text-heading15 / 22 · 600 · −0.01emTeam membersCard and section titles
  • text-[15px]15 / 24 · 400Invoices are sent on the first of the month.Body text
  • text-[13px]13 / 20 · 400Last edited 2 hours agoComponent internals, descriptions
  • text-label13 / 18 · 500 · mutedEmail addressForm labels, stat labels
  • text-eyebrow11 / 16 · DM Mono · uppercaseGetting startedEyebrows, table heads
  • font-mono text-[13px]DM Mono 13 / 22INV-0412 · $1,280.00Code, keys, IDs, figures

Radius

Four steps derived from one variable, --pl-radius. The boxes below use the current preset; switch it in the theme customizer and watch them change. rounded-full is reserved for pills, avatars, switches and dots.

rounded-ui-smradius × 0.6Menu items, chips, small controls
rounded-uiradiusButtons, inputs, selects
rounded-ui-lgradius × 1.4Cards, popovers, previews
rounded-ui-xlradius × 2Dialogs, sheets, large panels

Shadows

Flat by default: most surfaces use a hairline border and no shadow. Shadows are only for things that lift or float. In dark mode they turn into a faint outline plus a deep shadow, so edges stay visible.

noneCards in a page, inputs
shadow-uiCards that lift, selected tabs
shadow-popMenus, popovers, dialogs, toasts

Spacing

Plinth uses Tailwind's 4px spacing scale without changes. These are the steps the components rely on most.

  • 14pxIcon to label in badges
  • 28pxGaps inside controls
  • 312pxControl padding, list gaps
  • 416pxPage gutter on phones, card gaps
  • 520pxCard padding
  • 624pxDialog padding, gutters
  • 832pxBetween groups
  • 1248pxBetween page sections

Layers and motion

  • Layers. Page content sits at the default level. The sticky top bar uses z-40; menus, popovers, dialogs, sheets, toasts and the command palette use z-50 and render last in the DOM, so a higher number is never needed.
  • Motion. Color and border changes use Tailwind's default 150ms transition. Overlays fade and move a few pixels; nothing bounces.
  • Reduced motion. A global rule shortens every animation and transition to near zero when the visitor asks for reduced motion, so components need no extra code.
  • Focus. Every focusable element gets a 2px outline in --pl-ring with a 2px offset. Components may use focus-visible:ring-2 ring-ring instead.

Tokens as JSON

The same values ship as tokens/plinth.tokens.json in your download, the source for the Figma variables and for tools like Style Dictionary.

tokens/plinth.tokens.json (excerpt)
{  "color": {    "light": { "canvas": "#fbfbfa", "surface": "#ffffff", "fg": "#18181b" },    "dark": { "canvas": "#0c0c0e", "surface": "#141417", "fg": "#f4f4f5" }  },  "accent": {    "violet": {      "light": { "accent": "#6d4aff", "accent-fg": "#ffffff" },      "dark": { "accent": "#a48dff", "accent-fg": "#170b3d" }    }  },  "radius": {    "base": { "none": "0rem", "medium": "0.625rem", "full": "1.25rem" },    "scale": { "ui-sm": "base × 0.6", "ui": "base", "ui-lg": "base × 1.4", "ui-xl": "base × 2" }  }}

Suggested