Theming
The tokens: colour roles in light and dark, the type scale, shape, icons and motion.
Every value is in styles/tokens.css, light and dark. To theme a product, change the values there and use the names below. What each colour and font is for in the brand is in Brand › Colour and Typography.
Brand
The overzero palette as functional tokens (text-fg-*, bg-surface-*, border-line-*), with the values they take in brand material: specimens, component examples, prototypes. Periwinkle is the only accent; olive is for the team section.
bg-default / fg-defaultWhite: the page ground, with ink textbase-color-white → #ffffff · #0b0b08bg-default / fg-mutedSecondary textbase-color-white → #ffffff · #0b0b08bg-paper / fg-defaultPaper: quiet sectionsbase-color-grey-50 → #fdfdfa · #12120fbg-default / fg-accentLinks, arrows, [ + ] togglesbase-color-white → #ffffff · #0b0b08bg-default / fg-brandOlive: team headline and listsbase-color-white → #ffffff · #0b0b08bg-emphasis / fg-on-emphasisCharcoal: pricing section, the dark buttonbase-color-neutral-7 → #2b2b2b · #fdfdfabg-emphasis / fg-accent-on-emphasisLinks on charcoalbase-color-neutral-7 → #2b2b2b · #fdfdfabg-neutral-muted / fg-defaultMist: footerbase-color-lavender-3 → #d3d1d4 · #272527bg-brand-emphasis / fg-on-brandOlive surface, paper text in both themesbase-color-olive-5 → #6a6b52 · #6a6b52border-defaultHairlinesbase-color-grey-300 → #d4d4cd · #41413bborder-emphasisProcess step rulesbase-color-neutral-7 → #2b2b2b · #fdfdfaborder-brandOlive rules in the team sectionbase-color-olive-5 → #6a6b52 · #6a6b52border-inputStrong field edge, 4.8:1 on white (border-line-input, proposed)base-color-grey-500 → #73736b · #73736bInterface
The Base's own screens: shadcn/ui's scheme on pure greys, with no hue and no accent. The same tokens as above, read outside brand material. Not in Figma.
bg-app / fg-defaultThe ground, with near-black textbase-color-white → #ffffff · #212121bg-app / fg-mutedSecondary textbase-color-white → #ffffff · #212121bg-app / fg-accentLinks: the text colour, underlined in running textbase-color-white → #ffffff · #212121bg-shell / fg-defaultThe sidebar, a faint step off the groundbase-color-ui-50 → #f9f9f9 · #181818bg-raised / fg-defaultCards and popovers: the ground colour with a hairlinebase-color-white → #ffffff · #303030bg-hover / fg-defaultHoverbase-color-ui-100 → #f3f3f3 · #383838bg-selected / fg-defaultThe one selected tone: the sidebar item, tabs track and list selectionsbase-color-ui-150 → #ececec · #404040bg-subtle / fg-defaultQuiet surfaces: muted, secondary, bannersbase-color-ui-100 → #f3f3f3 · #2a2a2abg-subtle / fg-mutedSecondary text on a quiet surfacebase-color-ui-100 → #f3f3f3 · #2a2a2abg-emphasis / fg-on-emphasisThe primary buttonbase-color-ui-975 → #0d0d0d · #ecececborder-appHairlines and card edgesbase-color-ui-200 → #ebebeb · #383838Surfaces
What the page and its containers are painted in.
background / foregroundPage ground and body textbg-app → #ffffff · #212121card / card-foregroundCards and panelsbg-raised → #ffffff · #303030popover / popover-foregroundMenus, tooltips, dialogsbg-raised → #ffffff · #303030Actions and states
shadcn's accent is the hover surface, not a brand colour. A brand's own accent gets added when it arrives.
primary / primary-foregroundMain action, one per viewbg-emphasis → #0d0d0d · #ecececsecondary / secondary-foregroundSecondary actionsbg-subtle → #f3f3f3 · #2a2a2aaccent / accent-foregroundHover surfaces. Selected ones use bg-selectedbg-hover → #f3f3f3 · #383838muted / muted-foregroundQuiet surfaces and secondary textbg-subtle → #f3f3f3 · #2a2a2adestructiveErrors, destructive actions and the unread bubble (proposed, not in Figma)base-color-red-700 → #c10007 · #ffa2a2successActive and Done (proposed, not in Figma)base-color-green-600 → #00a63e · #05df72warningComing soon and waiting for feedback (proposed, not in Figma)base-color-amber-500 → #fe9a00 · #ffb900infoWith you, Invited, Published, and the New dot in notifications (proposed, not in Figma)base-color-blue-600 → #155dfc · #51a2ffLines
Borders, form fields and focus.
borderDividers and card edgesborder-app → #ebebeb · #383838inputForm field borders: the stronger hairline, 1.5:1base-color-ui-300 → #d4d4d4 · #4d4d4dringFocus ring: grey in the interface, periwinkle in brand materialfocus-ring → #a3a3a3 · #6b6b6bCharts
Data series, in order.
chart-1Series 1fg-accent → #0d0d0d · #ecececchart-2Series 2bg-brand-emphasis → #6a6b52 · #6a6b52chart-3Series 3base-color-fog-3 → #aebac4 · #aebac4chart-4Series 4warning → #fe9a00 · #ffb900chart-5Series 5fg-muted → #5d5d5d · #b4b4b4Sidebar
The app shell's own set, so the shell can differ from the page.
sidebar / sidebar-foregroundSidebar ground and textbg-shell → #f9f9f9 · #181818sidebar-primary / sidebar-primary-foregroundWorkspace markbg-emphasis → #0d0d0d · #ecececsidebar-accent / sidebar-accent-foregroundActive and hover items (the selected tone)bg-selected → #ececec · #404040sidebar-borderSidebar edgesborder-app → #ebebeb · #383838sidebar-ringFocus inside the sidebarfocus-ring → #a3a3a3 · #6b6b6bType scale
The Figma text styles as utilities, measured as rendered. They're shown in the brand fonts; the Base's own screens set the same sizes in Geist.
text-display-xl… · Pricestext-display-l… · Big statementstext-display-m… · Big statementstext-display-s… · Section openerstext-title-l… · Closing linestext-title-m… · Step titlestext-title-s… · FAQ questions, namestext-subtitle… · Leadstext-body-l… · Large paragraphtext-body-m… · Default paragraphtext-body-s… · Small paragraphtext-headline… · Home headline in the Base (not in Figma)text-ui-s… · Product UI: menus, tables, form text (not in Figma)text-nav… · Product UI: the sidebar's sub-pages (not in Figma)text-ui-xs… · Product UI: meta and timestamps (not in Figma)caption… · Uppercase labels and linksfont-displayfont-monofont-sansfont-sansShape and space
Spacing sits on a 4px grid: whole Tailwind steps only. The page gutter is 40px on desktop and 24px on a phone.
rounded-none0 · Sections and rulesrounded-lg12px · Images and cardsrounded-xl24px · Large image framesrounded-fullfull · ButtonsIcons
Phosphor, solid. Objects are filled; checks, plus signs and arrows are bold lines. Import them from components/icons.tsx. 16px next to text, 24px on their own.
Motion
Two durations and one curve. Links fade to 70% on hover.
duration-fast- 120ms · Hovers
duration-normal- 200ms · Panels
ease-out- one curve · Everything that moves