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/agentcard-brand-cli#release add themeColor
Choose tokens by their role: surface, text, border, action or status.
Palette
brand
#0000FF
black
#000000
white
#FFFFFF
ink
#171818
paper
#F2F1EC
sky
#CCDBFF
blue-edge
#0607BE
blue-hover
#1F1FFF
blue-5
#EDEDFF
blue-10
#E5E5FF
blue-mid
#4B50F4
blue-mist
#ECEAF7
sky-wash
#E8F0FF
heart
#F24656
tint-sage
#CFE3C9
tint-rose
#EFCFD3
tint-teal
#C6DFE2
tint-peach
#F1D8C6
tint-butter
#ECE3C0
Surfaces
bg-default
#FFFFFF
bg-page
#F2F1EC
bg-subtle
#F3F3F3
bg-frame
#F2F1EC
bg-canvas
#F2F1EC
bg-tint
#EDEDFF
bg-brand
#0000FF
bg-inverse
#171818
bg-dark
#171818
bg-code
#171818
bg-scrim
rgb(23 24 24 / 0.4)
bg-glass
rgb(23 24 24 / 0.42)
bg-note
#F4F7FF
bg-code-soft
#252626
bg-raised-on-brand
rgb(255 255 255 / 0.07)
Text
text-default
#171818
text-secondary
#454646
text-muted
#616262
text-subtle
#747575
text-nav
#171818
text-faint
#979898
text-inverse
#FFFFFF
text-brand
#0000FF
text-on-brand
#FFFFFF
text-on-brand-muted
rgb(255 255 255 / 0.72)
text-label
#0000FF
text-on-brand-label
#CCDBFF
Lines and washes
border-default
rgb(23 24 24 / 0.14)
border-subtle
rgb(23 24 24 / 0.08)
border-strong
rgb(23 24 24 / 0.35)
border-mid
rgb(23 24 24 / 0.22)
border-rule
rgb(23 24 24 / 0.18)
border-field
rgb(23 24 24 / 0.12)
border-field-hover
rgb(23 24 24 / 0.24)
border-hairline
rgb(23 24 24 / 0.16)
border-key
rgb(23 24 24 / 0.16)
border-brand
#0000FF
border-brand-edge
#0607BE
border-on-brand
rgb(255 255 255 / 0.22)
border-on-brand-strong
rgb(255 255 255 / 0.45)
border-window
rgb(0 0 255 / 0.25)
wash-hover
rgb(23 24 24 / 0.04)
wash-pill
rgb(23 24 24 / 0.07)
wash-selected
rgb(0 0 255 / 0.07)
wash-on-brand
rgb(255 255 255 / 0.14)
wash-glass-hover
rgb(255 255 255 / 0.17)
ring-tint
rgb(0 0 255 / 0.2)
Actions and states
action-primary
#0000FF
action-primary-hover
#1F1FFF
action-primary-fg
#FFFFFF
status-success
#15803D
status-warning
#B45309
status-danger
#D92D3F
focus-ring
#0000FF
chart-series-1
#0000FF
chart-series-2
#4B50F4
chart-series-3
#4DB8FF
chart-series-4
#F24656
window-bar
#CCDBFF
window-bar-fg
#0000FF
Type
Use Neue Haas Grotesk Display for headings and control labels, with Helvetica Neue as the fallback. Use Inter for body text.
text-display 7rem
Agentcard
text-hero 4.5rem
Agentcard
text-h1 3.25rem
Agentcard
text-h2 2.25rem
Card details and spending limits
text-h3 1.5rem
Card details and spending limits
text-h4 1.25rem
Card details and spending limits
text-h5 1.125rem
Card details and spending limits
text-body-lg 1.1875rem
Card details and spending limits
text-body 1rem
Card details and spending limits
text-body-sm 0.875rem
Card details and spending limits
text-caption 0.75rem
Card details and spending limits
text-micro 0.625rem
Card details and spending limits
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.75rem
rounded-panel 0.75rem
rounded-shell 1.25rem
shadow-key
shadow-key-brand
shadow-pressed
shadow-well
shadow-card
shadow-plan
shadow-raised
shadow-floating
shadow-code
Import the theme
The CLI creates _agentcard-ds/brand.css and _agentcard-ds/theme.css beside the main stylesheet and adds the imports below. The brand stylesheet includes the tokens and base styles.
@import "tailwindcss";
@import "./_agentcard-ds/brand.css";
@import "./_agentcard-ds/theme.css";