Skip to main content

​
Colors

The Axmed Design System color palette is generated from official brand colors using the OKLCH perceptual color space for consistent lightness and saturation across hues.

​
Brand Colors

These are the core brand colors that define Axmed’s visual identity:

Axmed Navy

#261C7A · Primary brand color (primary-600)

Axmed Cyan

#0CC4FF · Cyan accent (cyan-500)

Axmed Green

#4FE788 · Neon brand accent (green-500)

Axmed Magenta

#E73BC1 · Magenta accent (magenta-500)

Axmed Lime

#CCFF6C · Neon brand accent (lime-500)

Axmed Black

#262626 · Brand black (neutral-800)

​
Color Palettes

​
Primary / Navy

The primary color palette is anchored by Axmed Navy (#261C7A) at the 600 level. Use primary-500 for interactive elements and primary-600 for brand identity.
TokenValueUsage
--primary-50#F3F1FFLightest tint, backgrounds
--primary-100#E7E6FALight backgrounds, hover states
--primary-200#D0CEF5Subtle backgrounds
--primary-300#9F9AEBFocus rings, light accents
--primary-400#726AE0Borders, disabled states
--primary-500#4738CCPrimary action color
--primary-600#261C7ABrand color (Axmed Navy)
--primary-700#1F1769Hover states
--primary-800#181156Dark backgrounds
--primary-900#110B44Darker backgrounds
--primary-950#0B0633Darkest shade

​
Cyan

Anchored by Axmed Cyan (#0CC4FF) at the 500 level. Used for informational states and links.
TokenValueUsage
--cyan-50#EEF8FFLight backgrounds
--cyan-100#E3F3FFSubtle backgrounds
--cyan-200#C5E7FFTinted backgrounds
--cyan-300#9BDAFFLight accents
--cyan-400#6ECFFFBorders, icons
--cyan-500#0CC4FFBrand cyan
--cyan-600#0099C8Interactive elements
--cyan-700#007094Link text (WCAG AA)
--cyan-800#004D66Dark text
--cyan-900#002939Darkest text
--cyan-950#001823Near-black

​
Green

Neon brand accent anchored by Axmed Green (#4FE788) at the 500 level. Use green-600+ for text on light backgrounds.
TokenValueUsage
--green-50#EBFEF0Success backgrounds
--green-100#D5FDDFLight success states
--green-200#AFFCC5Tinted backgrounds
--green-300#64FB9ALight accents
--green-400#54F38FBright accents
--green-500#4FE788Brand green (neon)
--green-600#3CB66ASuccess (semantic)
--green-700#2A844CSuccess text
--green-800#195931Dark success text
--green-900#092E17Darkest shade
--green-950#041C0CNear-black

​
Magenta

Anchored by Axmed Magenta (#E73BC1) at the 500 level.
TokenValueUsage
--magenta-50#FDF0F9Light backgrounds
--magenta-100#FBDDF1Subtle backgrounds
--magenta-200#F8B9E4Tinted backgrounds
--magenta-300#F597DALight accents
--magenta-400#F26CCFBright accents
--magenta-500#E73BC1Brand magenta
--magenta-600#B92D9AInteractive elements
--magenta-700#8D2075Text, icons
--magenta-800#60134FDark text
--magenta-900#3A082FDarkest shade
--magenta-950#290420Near-black

​
Lime

Neon brand accent anchored by Axmed Lime (#CCFF6C) at the 500 level.
TokenValueUsage
--lime-50#FBFFE8Light backgrounds
--lime-100#F7FFEDSubtle backgrounds
--lime-200#EFFFDATinted backgrounds
--lime-300#DEFFADLight accents
--lime-400#D5FF90Bright accents
--lime-500#CCFF6CBrand lime (neon)
--lime-600#97C900Interactive elements
--lime-700#6D9200Text, icons
--lime-800#486200Dark text
--lime-900#243300Darkest shade
--lime-950#131D00Near-black

​
Neutral / Grays

UI grays used for text, backgrounds, and borders. Axmed Black (#262626) is at neutral-800.
TokenValueUsage
--neutral-0#FFFFFFPure white
--neutral-50#F9FAFBLightest background
--neutral-100#F2F4F7Light background
--neutral-200#EAECF0Subtle borders
--neutral-300#D0D5DDBorders, dividers
--neutral-400#98A2B3Disabled text, placeholders
--neutral-500#667085Secondary text
--neutral-600#475467Body text
--neutral-700#344054Dark text
--neutral-800#262626Brand black
--neutral-900#101828Darkest text

​
Status Colors

​
Red / Error

TokenValueUsage
--red-50#FEF3F2Error backgrounds
--red-500#FF4538Error accents
--red-600#F5222DError (semantic)
--red-700#E72315Error text
--red-800#D61406Dark error text

​
Orange / Warning

TokenValueUsage
--orange-25#FFFEF6Lightest warning background
--orange-50#FFFAEBWarning backgrounds
--orange-400#FDB022Warning accents
--orange-500#FAAD14Warning (semantic)
--orange-600#F79009Warning text

​
Semantic Tokens

These semantic tokens map to specific use cases and provide consistent meaning across the design system.

​
Primary Interactive

--primary:        #4738CC;  /* Primary action color */
--primary-hover:  #261C7A;  /* Hover state (Navy) */
--primary-focus:  #9F9AEB;  /* Focus ring color */

​
Status / Traffic Lights

--success: #3CB66A;  /* green-600 */
--warning: #FAAD14;  /* orange-500 */
--error:   #F5222D;  /* red-600 */

​
Text Colors

--text-primary:   #262626;  /* Brand black (neutral-800) */
--text-secondary: #667085;  /* Muted text (neutral-500) */
--text-link:      #007094;  /* Link text (cyan-700, WCAG AA) */
--text-disabled:  #98A2B3;  /* Disabled text (neutral-400) */

​
Usage Guidelines

​
Primary Actions

Use --primary (#4738CC) for primary buttons and interactive elements. On hover, transition to --primary-hover (#261C7A). 
.button-primary {
  background-color: var(--primary);
  color: var(--neutral-0);
}

.button-primary:hover {
  background-color: var(--primary-hover);
}

​
Focus States

Use --primary-focus (#9F9AEB) for focus rings to ensure visibility: 
.input:focus {
  outline: 2px solid var(--primary-focus);
  outline-offset: 2px;
}

​
Status Communication

Use semantic status tokens consistently: 
.alert-success { color: var(--success); }
.alert-warning { color: var(--warning); }
.alert-error { color: var(--error); }

​
Text Hierarchy

.heading { color: var(--text-primary); }
.body-text { color: var(--text-primary); }
.caption { color: var(--text-secondary); }
.link { color: var(--text-link); }

​
Accessibility

​
Contrast Ratios

All text colors meet WCAG AA standards:
  • --text-primary (#262626) on white: 12.8:1 (AAA)
  • --text-link (#007094) on white: 6.2:1 (AA)
  • --cyan-700 is specifically chosen for links to meet contrast requirements

​
Color Blindness

The palette uses distinct hues that remain distinguishable for users with color vision deficiencies. Status colors (green, orange, red) are used alongside icons and labels.
All color tokens are defined in _colors.scss and exposed as CSS custom properties when you import the design system’s CSS.

Build docs developers (and LLMs) love

Get started for freeTalk to us