Design tokens
Use these tokens for colors, typography, spacing, corners, shadows and motion. Components already use them; use the same tokens for custom layouts.
npx -y github:anwarlemu/opencommerce-brand-cli#release add themeColor
Choose tokens by their role: surface, text, border, action or status.
Palette
brand
#2E3AE8
black
#000000
white
#FFFFFF
ink
#171818
paper
#F9F9F9
sky
#CCDBFF
blue-edge
#2830AE
blue-hover
#4752EB
blue-5
#F0F1FD
blue-10
#EAEBFD
blue-mid
#1520B8
blue-mist
#F0F1FD
sky-wash
#F9F9F9
neon
#4DB8FF
electric
#050EF4
heart
#F24656
tint-sage
#CFE3C9
tint-rose
#EFCFD3
tint-teal
#C6DFE2
tint-peach
#F1D8C6
tint-butter
#ECE3C0
Surfaces
bg-search-selected
#F0F1FD
bg-default
#FFFFFF
bg-page
#FFFFFF
bg-subtle
#F9F9F9
bg-frame
#F9F9F9
bg-canvas
#FFFFFF
bg-tint
#F0F1FD
bg-brand
#2E3AE8
bg-inverse
#171818
bg-dark
#171818
bg-code
#171818
bg-scrim
rgb(23 24 24 / 0.4)
bg-glass
rgb(255 255 255 / 0.72)
bg-note
#F0F1FD
bg-code-soft
#232424
bg-raised-on-brand
rgb(255 255 255 / 0.07)
Text
text-default
#171818
text-secondary
#6B6B6B
text-muted
#6B6B6B
text-subtle
#6B6B6B
text-nav
#6B6B6B
text-faint
#9E9E9E
text-inverse
#FFFFFF
text-brand
#2E3AE8
text-on-brand
#FFFFFF
text-on-brand-muted
rgb(255 255 255 / 0.72)
text-label
#2E3AE8
text-on-brand-label
#CCDBFF
text-code
#E3E3E3
text-code-key
#A1A6F5
text-code-string
#CCDBFF
text-code-dim
#747474
text-string
#1520B8
Lines and washes
border-default
#EAEAEA
border-subtle
#EAEAEA
border-strong
#DADADA
border-mid
#DADADA
border-rule
#EAEAEA
border-field
#DADADA
border-field-hover
rgb(23 24 24 / 0.28)
border-hairline
#DADADA
border-key
#DADADA
border-brand
#2E3AE8
border-brand-edge
#2830AE
border-on-brand
rgb(255 255 255 / 0.22)
border-on-brand-strong
rgb(255 255 255 / 0.45)
border-window
#DADADA
border-glass
rgb(23 24 24 / 0.1)
border-on-code
rgb(255 255 255 / 0.15)
border-on-code-hover
rgb(255 255 255 / 0.3)
wash-hover
rgb(23 24 24 / 0.05)
wash-pill
rgb(23 24 24 / 0.07)
wash-selected
rgb(46 58 232 / 0.07)
wash-on-brand
rgb(255 255 255 / 0.14)
wash-glass-hover
rgb(23 24 24 / 0.05)
ring-tint
rgb(46 58 232 / 0.2)
Actions and states
action-primary
#2E3AE8
action-primary-hover
#4752EB
action-primary-fg
#FFFFFF
status-success
#15803D
status-warning
#B45309
status-danger
#D92D3F
focus-ring
#2E3AE8
chart-series-1
#2E3AE8
chart-series-2
#1520B8
chart-series-3
#4DB8FF
chart-series-4
#CCDBFF
window-bar
#F9F9F9
window-bar-fg
#2E3AE8
Type
Neue Haas Grotesk Display (Helvetica Neue where it is not installed) for headings and the wordmark, Inter for text, buttons and links, and the platform mono for code, window bars, tags and figures.
text-hero 3.375rem
opencommerce
text-h1 3rem
opencommerce
text-h2 2.75rem
Buy from any online store
text-h3 1.5rem
Buy from any online store
text-h4 1.25rem
Buy from any online store
text-h5 1.0625rem
Buy from any online store
text-body 1rem
Buy from any online store
text-button 0.9375rem
Buy from any online store
text-body-sm 0.875rem
Buy from any online store
text-caption 0.75rem
Buy from any online store
text-bar 0.71875rem
await agent.buy(cart)
text-micro 0.625rem
Buy from any online store
Corners and shadows
Use the token assigned to the component. Keep the same corner radius and shadow for the same kind of element.
rounded-chip 2px
rounded-sm 0.375rem
rounded-menu 0.3125rem
rounded-control 0.5rem
rounded-card 0.375rem
rounded-panel 0.75rem
rounded-shell 1rem
shadow-card
shadow-raised
shadow-code
shadow-tile
shadow-floating
shadow-tooltip
shadow-lit
shadow-well
shadow-ring-hover
Import the theme
The CLI creates _opencommerce-ds/brand.css and _opencommerce-ds/theme.css beside the main stylesheet and adds the imports below. The brand stylesheet includes the tokens and base styles.
@import "tailwindcss";
@import "./_opencommerce-ds/brand.css";
@import "./_opencommerce-ds/theme.css";