Theme

Use these tokens for colors, type, space, corners, shadows and motion. Components already use them; use the same tokens for custom layouts.

npx -y github:anwarlemu/inkbox-brand-cli#release add theme

Color

Choose tokens by their role: surface, text, line, action or status.

Palette

brand

#74629D

black

#000000

white

#FFFFFF

ink

#3E2A53

lilac

#F4F2F6

pink

#F9B1B5

rose

#8C5659

avatar

#5063B1

Surfaces

bg-default

#FFFFFF

bg-page

#FFFFFF

bg-subtle

#F4F2F6

bg-subtle-hover

#ECE9F0

bg-frame

#F4F2F6

bg-canvas

#F4F2F6

bg-tint

#F4F2F6

bg-brand

#74629D

bg-inverse

#3E2A53

bg-dark

#3E2A53

bg-code

#FFFFFE

bg-code-head

#F0F0F0

bg-scrim

rgb(62 42 83 / 0.12)

bg-off

#B1ADBB

Text and icons

text-default

#3E2A53

text-secondary

#70637E

text-muted

#998EA5

text-subtle

#9E94A9

text-nav

#3E2A53

text-faint

#BCB3C5

text-inverse

#FFFFFF

text-brand

#74629D

text-on-brand

#FFFFFF

text-label

#74629D

icon-default

#3E2A53

icon-secondary

#5B4C6A

Lines

border-default

#D2C9DB

border-subtle

#F3F1F5

border-strong

#B1ADBB

border-field

#D2C9DB

border-row

rgb(102 102 99 / 0.12)

border-ring

rgb(23 47 41 / 0.12)

border-brand

#74629D

border-pink

#F9B1B5

border-code

#E0E0E0

wash-hover

rgb(62 42 83 / 0.04)

ring-tint

rgb(116 98 157 / 0.24)

Actions, states and tags

action-primary

#74629D

action-primary-hover

#67568E

action-primary-fg

#FFFFFF

focus-ring

#74629D

status-success

#1CA721

status-success-bg

#C6F6D5

status-warning

#8A581D

status-warning-bg

#F6E8C9

status-warning-fg

#4A2F0B

status-warning-muted

#8E7045

status-danger

#BD5557

status-danger-strong

#A71C1F

status-info

#1C7390

status-info-bg

#C9EBF6

status-info-fg

#0D4152

tag-blue

#BEE3F8

tag-blue-fg

#2A4365

tag-purple

#E9D8FD

tag-purple-fg

#6D5C9B

tag-gray

#EDF2F7

chart-series-1

#74629D

chart-series-2

#F9B1B5

chart-series-3

#5063B1

chart-series-4

#1C7390

chart-series-5

#1CA721

Code

code-key

#A31515

code-string

#0451A5

code-line

#237893

code-brace

#F8CC5E

code-text

#1A202C

code-punct

#0431FA

code-line-active

#0B216F

code-head-fg

#4A4A4A

code-keyword

#0000FF

code-comment

#008000

code-number

#098658

code-function

#795E26

code-type

#267F99

code-tag

#800000

code-attr

#E50000

Type

Inter for every word; IBM Plex Mono for keys, hosts and IDs; the system monospace in code blocks.

text-display 2rem

Create Agent Identity

text-h1 1.5rem

Create Agent Identity

text-h2 1.375rem

Create Agent Identity

text-h3 1.25rem

Create Agent Identity

text-h4 1rem

Create Agent Identity

text-body-lg 1rem

Create Agent Identity

text-body 0.875rem

Create Agent Identity

text-body-sm 0.8125rem

Create Agent Identity

text-caption 0.75rem

Create Agent Identity

text-micro 0.6875rem

Create Agent Identity

Corners and shadows

Use the token the component uses; keep the same corner and shadow for the same kind of element.

rounded-xs 0.25rem

rounded-sm 0.375rem

rounded-control 0.5rem

rounded-panel 0.625rem

rounded-dialog 1rem

shadow-s

shadow-line

shadow-floating

shadow-dialog

shadow-focus

Import the theme

The CLI writes the brand stylesheet and the Tailwind theme beside the main stylesheet and adds these imports.

app/globals.css

1@import "tailwindcss";2@import "./_inkbox-ds/brand.css";3@import "./_inkbox-ds/theme.css";