Color

arrow_back arrow_forward

Transcribed from the theme object the Norbielink app ships. The brand is a purple gradient (#5C2ED4 → #A614C3); teal #73C9B7 is the accent and also the positive state. Neutrals are a cool gray ramp — there is no green tint anywhere in the product.

Primary Gradient

#5C2ED4 → #A614C3

Gradient Start

#5C2ED4

Razz

#A614C3

Teal

#73C9B7

Teal Renewal

#74C3B7

Text

#1F2937

Muted

#6B7280

Sub

#9CA3AF

Border Strong

#D1D5DB

Border

#E5E7EB

Border Soft

#F3F4F6

Hover / Chip

#F9FAFB

Brand & accent

The gradient is the brand. It fills primary buttons, the active tab underline, the NEW badge and gradient text; the flat #A614C3 — the product calls it Razz — is used for links, active icons and status dots.

Primary Gradient

#5C2ED4 → #A614C3

Primary buttons, NEW badge, active tab underline

Dark · radial wash over 88.34deg

Gradient (tonal / text)

88.54deg

Gradient text, tonal pills, checkbox fill · 5% as a wash

Dark · #A855F7 → #D946EF

Razz

#A614C3

Links, active icons, in-flight status dot

Dark · #C084FC

Razz Tint

#F5E8FB

Tonal accent backgrounds

Dark · rgba(166,20,195,0.15)

Teal

#73C9B7

Accent, avatars, Active + Approved, done dot

Dark · #73C9B7 — unchanged

Teal Renewal

#74C3B7

Upcoming Renewal(s) only

Dark · #74C3B7 — unchanged

Neutrals

A cool gray ramp, taken directly from the theme object. The DS previously carried a green-tinted ramp (#DCE4E1, #9AACAA, #3A4F4D …) that has no counterpart in the product and read noticeably warmer than the app.

Token	Light	Dark	Role in the product
`--gray-800`	`#1F2937`	`#F9FAFB`	`text` — primary body colour
`--gray-500`	`#6B7280`	`#8B8FA8`	`muted` — secondary text, the workhorse
`--gray-400`	`#9CA3AF`	`#6B7280`	`sub` / `textDim`, Inactive + Expired
`--gray-300`	`#D1D5DB`	`rgba(255,255,255,.18)`	`borderStrong`, switch off, unchecked control
`--gray-200`	`#E5E7EB`	`rgba(255,255,255,.12)`	`border` — the default hairline
`--gray-100`	`#F3F4F6`	`rgba(255,255,255,.05)`	`borderSoft`, recessed track, chip fill
`--gray-50`	`#F9FAFB`	`rgba(255,255,255,.04)`	`hoverBg` — menu + row hover

Semantic

Taken from the product's status map. The positive state is teal, not green, and there is no info state. Each hue is theme-independent — only the tint behind it changes.

Role	Colour	Tint (light)	Tint (dark)	Applies to
Success	`#73C9B7`	`#E8F7F3`	`rgba(115,201,183,.15)`	Active, Approved, Issued
Renewal	`#74C3B7`	`rgba(116,195,183,.10)`	same	Upcoming Renewal(s)
Warning	`#F59E0B`	`#FEF3C7`	`rgba(245,158,11,.15)`	Pending, Action Required, starred
Danger	`#EF4444`	`#FEE2E2`	`rgba(239,68,68,.15)`	Declined, Cancelled, destructive actions, delete menu items
Invalid	`#DC2626`	`box-shadow 0 0 0 1px rgba(220,38,38,.15)`		Form-field validation only
Neutral	`#9CA3AF`	`#F3F4F6`	`rgba(255,255,255,.06)`	Inactive, Expired

Surfaces

Light mode is white-on-white separated by hairlines; dark mode is deep navy with the card lifted off the page. Both halves come from the same theme object.

Token	Light	Dark	Use
`bg`	`#FFFFFF`	`#0F1120`	Page
`cardBg`	`#FFFFFF`	`#191D35` · `#1E2240`	Cards, menus, toasts, dialogs
`hoverBg`	`#F9FAFB`	`rgba(255,255,255,.04)`	Row and menu-item hover
`mutedBg`	`#FAFAFB`	`rgba(255,255,255,.03)`	Inset panels
`inputBg`	`#FFFFFF`	`rgba(255,255,255,.05)`	Inputs
`chipBg`	`#F9FAFB`	`rgba(255,255,255,.05)`	Status chips, filter pills

Not in the product

Colours the DS used to publish that have no source in Norbielink. They are listed so nobody reintroduces them.

Retired	Was used as	Replaced by
`#1D9E6B`	Success green	`#73C9B7` — the positive state is teal
`#10B981` `#059669`	Tailwind green	`#73C9B7`
`#E6A817` `#B87A00`	Warning amber	`#F59E0B`
`#C0392B`	Error red	`#EF4444`
`#2980B9` `#3B82F6`	Info blue	— there is no info state
`#F97316`	Upcoming Renewals orange	`#74C3B7` · switches use `#E8622A`
`#4ECDC4`	Teal accent	`#73C9B7`. `#4ECDC4` survives in one place only: the dark-mode link colour
Green-tinted grays	`#F6F8F7 … #141F1E`	The cool ramp above

Next → Typography