Design Tokens

The foundation of the Imajeure design system — single source of truth

Rainbow Framework Colors

ROYGBIV semantic colors for creator metrics. Defined in @imajeure/design-tokens

Reputation

#DF6844

--color-reputation

Identity

#E8A327

--color-identity

Presence

#F0D03C

--color-presence

Sharing

#38D430

--color-sharing

Conversations

#6CBFFC

--color-conversations

Groups

#597CFA

--color-groups

Relationships

#7334AF

--color-relationships

Theme Colors

Semantic colors that adapt to light/dark mode via CSS variables.

background

--background

foreground

--foreground

card

--card

card Foreground

--card-foreground

popover

--popover

popover Foreground

--popover-foreground

primary

--primary

primary Foreground

--primary-foreground

secondary

--secondary

secondary Foreground

--secondary-foreground

Typography

Headings

Montserrat

Bold, confident, modern. Perfect for creator-focused UI.

--font-montserrat

Body

Inter

Highly legible at all sizes. Optimized for screens.

--font-inter

Font Sizes

text-xs0.75rem / 12px
text-sm0.875rem / 14px
text-base1rem / 16px
text-lg1.125rem / 18px
text-xl1.25rem / 20px
text-2xl1.5rem / 24px
text-3xl1.875rem / 30px
text-4xl2.25rem / 36px
text-5xl3rem / 48px
text-6xl3.75rem / 60px

Font Weights

Normal (400)

Medium (500)

Semibold (600)

Bold (700)

Extrabold (800)

Border Radius

none

Sharp corners

sm

Subtle rounding

md

Default for small elements

lg

Base radius

xl

Cards and containers

2xl

Large cards

3xl

Hero sections

full

Pills and avatars

Spacing Scale

Based on 4px base unit (Tailwind default)

1

4px

2

8px

3

12px

4

16px

6

24px

8

32px

12

48px

16

64px

All tokens sourced from @imajeure/design-tokens