Color System — Enterprise Design System

Brand Foundation

Color begins with the JM Family brand. The signature color is teal. The design system extends the brand palette into a full-scale token system that supports light and dark themes, accessible contrast ratios, and semantic meaning.

Primary Colors

JM Family Classic Teal

#008996 · RGB 0, 137, 150 · PMS 321

Main color, icons, backgrounds, accents

JM Family Modern Teal

#00838F · RGB 0, 131, 143 · PMS 7474

Main color, icons, backgrounds, accents

Dark Teal

#115662 · RGB 17, 86, 98 · PMS 5473

Icons, backgrounds, accents

Neutral Colors

Light Teal

#C3E2E5 · RGB 195, 226, 229 · PMS 628

Backgrounds, accents

Light Gray

#F8F8F8 · RGB 248, 248, 248 · PMS Cool Gray 1

Backgrounds

Black

#000000 · RGB 0, 0, 0 · PMS —

Text, backgrounds, icons

White

#FFFFFF · RGB 255, 255, 255 · PMS —

Backgrounds

Secondary Colors

Orange

#F15B29 · RGB 241, 91, 41 · PMS 1645

Backgrounds, accents, icons

Yellow

#FBB038 · RGB 251, 176, 56 · PMS 143

Backgrounds, accents, icons

Green

#6EC3A3 · RGB 110, 195, 163 · PMS 338

Backgrounds, accents, icons

From brand to tokens

The brand guidelines define 10 named colors. The design system expands these into full 10-step scales (50–900) for each hue, enabling consistent tinting and shading. The exact brand hex values appear at specific scale positions within the global palette below.

Global Palette

Global tokens are the raw color values. They define every available color but carry no semantic meaning. Components should never reference global tokens directly — always use semantic tokens.

Gray

BluePrimary brand

Green

Yellow

RedUI only — not in brand palette

SkyUI only — not in brand palette

White & Black

Semantic Tokens

Semantic tokens are what components actually consume. They define purpose, not appearance. The same semantic token resolves to different global values depending on the active theme.

Text Colors

Token	Description	Light	Dark	CSS Custom Property
color.text.primary	Primary body text, headings. Highest contrast.	#121214	#F3F4F6	--color-text-primary
color.text.secondary	Captions, helper text, metadata, timestamps.	#6B7280	#9CA3AF	--color-text-secondary
color.text.tertiary	Placeholder text, least prominent text.	#9CA3AF	#6B7280	--color-text-tertiary
color.text.disabled	Text on disabled elements.	#D1D5DB	#4B5563	--color-text-disabled
color.text.inverse	Text on dark/inverted backgrounds.	#FFFFFF	#121214	--color-text-inverse
color.text.brand	Brand accent text. Modern Teal.	#00838F	#5FB3BC	--color-text-brand
color.text.link.default	Default link text. Modern Teal.	#00838F	#2C9DA8	--color-text-link-default
color.text.link.hover	Link hover state. Dark Teal.	#115662	#5FB3BC	--color-text-link-hover
color.text.link.visited	Visited link.	#0A6B76	#96CDD3	--color-text-link-visited
color.text.success	Success message text.	#15803D	#BBF7D0	--color-text-success
color.text.warning	Warning message text.	#A16207	#FEF08A	--color-text-warning
color.text.error	Error message text.	#B91C1C	#FECACA	--color-text-error
color.text.info	Informational message text.	#0369A1	#BAE6FD	--color-text-info

Surface Colors

Token	Description	Light	Dark	CSS Custom Property
color.surface.default	Page background.	#FFFFFF	#121214	--color-surface-default
color.surface.subtle	Alternating rows, subtle section backgrounds.	#F9FAFB	#1F2937	--color-surface-subtle
color.surface.muted	Card backgrounds, code blocks, sidebar.	#F3F4F6	#1F2937	--color-surface-muted
color.surface.elevated	Modals, dropdowns. Distinguished from default by elevation shadow.	#FFFFFF	#1F2937	--color-surface-elevated
color.surface.overlay	Scrim behind modals and dialogs.	rgba(17, 24, 39, 0.5)	rgba(0, 0, 0, 0.6)	--color-surface-overlay
color.surface.inverse	Dark surfaces, footer, inverted sections.	#121214	#F3F4F6	--color-surface-inverse
color.surface.brand	Brand accent background. Light Teal tint.	#E8F5F7	#0C3D45	--color-surface-brand

Action Colors

Token	Description	Light	Dark	CSS Custom Property
color.action.primary.default	Primary button/action background. Modern Teal.	#00838F	#2C9DA8	--color-action-primary-default
color.action.primary.hover	Primary action hover. Dark Teal.	#115662	#5FB3BC	--color-action-primary-hover
color.action.primary.active	Primary action pressed/active.	#0C3D45	#96CDD3	--color-action-primary-active
color.action.primary.disabled	Disabled action background.	#E5E7EB	#374151	--color-action-primary-disabled
color.action.primary.text	Text on primary action.	#FFFFFF	#121214	--color-action-primary-text
color.action.secondary.default	Secondary button background.	#FFFFFF	transparent	--color-action-secondary-default
color.action.secondary.hover	Secondary button hover.	#F9FAFB	#1F2937	--color-action-secondary-hover
color.action.secondary.active	Secondary button pressed.	#F3F4F6	#374151	--color-action-secondary-active
color.action.secondary.border	Secondary button border.	#D1D5DB	#4B5563	--color-action-secondary-border
color.action.secondary.text	Text on secondary action.	#374151	#E5E7EB	--color-action-secondary-text
color.action.tertiary.default	Tertiary/ghost button background.	transparent	transparent	--color-action-tertiary-default
color.action.tertiary.hover	Tertiary button hover.	#F9FAFB	#1F2937	--color-action-tertiary-hover
color.action.tertiary.text	Tertiary button text. Modern Teal.	#00838F	#2C9DA8	--color-action-tertiary-text
color.action.danger.default	Destructive action background.	#B91C1C	#B91C1C	--color-action-danger-default
color.action.danger.hover	Destructive action hover.	#7F1D1D	#7F1D1D	--color-action-danger-hover
color.action.danger.text	Text on destructive action.	#FFFFFF	#FFFFFF	--color-action-danger-text

Border Colors

Token	Description	Light	Dark	CSS Custom Property
color.border.default	Standard borders, dividers, separators.	#E5E7EB	#374151	--color-border-default
color.border.strong	Emphasized borders, input borders.	#9CA3AF	#6B7280	--color-border-strong
color.border.focus	Focus ring color.	#008996	#2C9DA8	--color-border-focus
color.border.brand	Brand accent border. Classic Teal.	#008996	#2C9DA8	--color-border-brand
color.border.error	Error state border.	#EF4444	#EF4444	--color-border-error
color.border.success	Success state border.	#22C55E	#22C55E	--color-border-success

Feedback Colors

Token	Description	Light	Dark	CSS Custom Property
color.feedback.success.bg	Success alert/toast background.	#F0FDF4	#14532D	--color-feedback-success-bg
color.feedback.success.icon	Success alert icon.	#22C55E	#22C55E	--color-feedback-success-icon
color.feedback.warning.bg	Warning alert/toast background.	#FEFCE8	#713F12	--color-feedback-warning-bg
color.feedback.warning.icon	Warning alert icon.	#EAB308	#EAB308	--color-feedback-warning-icon
color.feedback.error.bg	Error alert/toast background.	#FEF2F2	#7F1D1D	--color-feedback-error-bg
color.feedback.error.icon	Error alert icon.	#EF4444	#EF4444	--color-feedback-error-icon
color.feedback.info.bg	Info alert/toast background.	#F0F9FF	#0C4A6E	--color-feedback-info-bg
color.feedback.info.icon	Info alert icon.	#0EA5E9	#0EA5E9	--color-feedback-info-icon

Theme Comparison

The design system supports light and dark themes. Components use identical semantic token names in both themes — only the resolved values change.

Light Theme

Card Heading

This is body text inside a card component showing how text appears on the default surface.

Primary Button

LabelText inputHelper text

✓ Success message

SecondaryTertiary

Dark Theme

Card Heading

This is body text inside a card component showing how text appears on the default surface.

Primary Button

LabelText inputHelper text

✓ Success message

SecondaryTertiary

Token Value Mapping

Token	Light Value	Dark Value
color.text.primary	#121214	#F3F4F6
color.text.secondary	#6B7280	#9CA3AF
color.text.tertiary	#9CA3AF	#6B7280
color.text.disabled	#D1D5DB	#4B5563
color.text.inverse	#FFFFFF	#121214
color.text.brand	#00838F	#5FB3BC
color.text.link.default	#00838F	#2C9DA8
color.text.link.hover	#115662	#5FB3BC
color.text.link.visited	#0A6B76	#96CDD3
color.text.success	#15803D	#BBF7D0
color.text.warning	#A16207	#FEF08A
color.text.error	#B91C1C	#FECACA
color.text.info	#0369A1	#BAE6FD
color.surface.default	#FFFFFF	#121214
color.surface.subtle	#F9FAFB	#1F2937
color.surface.muted	#F3F4F6	#1F2937
color.surface.elevated	#FFFFFF	#1F2937
color.surface.overlay	rgba(17, 24, 39, 0.5)	rgba(0, 0, 0, 0.6)
color.surface.inverse	#121214	#F3F4F6
color.surface.brand	#E8F5F7	#0C3D45
color.action.primary.default	#00838F	#2C9DA8
color.action.primary.hover	#115662	#5FB3BC
color.action.primary.active	#0C3D45	#96CDD3
color.action.primary.disabled	#E5E7EB	#374151
color.action.primary.text	#FFFFFF	#121214
color.action.secondary.default	#FFFFFF	transparent
color.action.secondary.hover	#F9FAFB	#1F2937
color.action.secondary.active	#F3F4F6	#374151
color.action.secondary.border	#D1D5DB	#4B5563
color.action.secondary.text	#374151	#E5E7EB
color.action.tertiary.hover	#F9FAFB	#1F2937
color.action.tertiary.text	#00838F	#2C9DA8
color.border.default	#E5E7EB	#374151
color.border.strong	#9CA3AF	#6B7280
color.border.focus	#008996	#2C9DA8
color.border.brand	#008996	#2C9DA8
color.feedback.success.bg	#F0FDF4	#14532D
color.feedback.warning.bg	#FEFCE8	#713F12
color.feedback.error.bg	#FEF2F2	#7F1D1D
color.feedback.info.bg	#F0F9FF	#0C4A6E
color.accent.orange.bg	#FEF2EC	#B8431F
color.accent.orange.text	#B8431F	#F15B29
color.accent.yellow.bg	#FEF6E5	#BF822A
color.accent.yellow.text	#BF822A	#FBB038
color.accent.green.bg	#E8F4EE	#4A9A7C
color.accent.green.text	#4A9A7C	#6EC3A3

Contrast Checker

Every text and interactive element must meet WCAG 2.2 AA contrast requirements. Use this tool to verify any color combination.

Foreground color

Background color

The quick brown fox jumps over the lazy dog

18.71:1

✓ AA Normal Text✓ AA Large Text✓ AAA Normal Text✓ AAA Large Text

Preset Contrast Grid

Pre-calculated contrast ratios for the most important token pairings. Click any row to load it into the contrast checker above.

Foreground	Background	Preview	Ratio	Min	Status
color.text.primary	color.surface.default	Aa	18.71:1	4.5:1	✓ Pass
color.text.primary	color.surface.subtle	Aa	17.9:1	4.5:1	✓ Pass
color.text.primary	color.surface.muted	Aa	17:1	4.5:1	✓ Pass
color.text.secondary	color.surface.default	Aa	4.83:1	4.5:1	✓ Pass
color.text.inverse	color.surface.inverse	Aa	18.71:1	4.5:1	✓ Pass
color.text.inverse	color.action.primary.default	Aa	4.52:1	4.5:1	✓ Pass
color.action.primary.text	color.action.primary.default	Aa	4.52:1	4.5:1	✓ Pass
color.action.secondary.text	color.surface.default	Aa	10.31:1	4.5:1	✓ Pass
color.action.danger.text	color.action.danger.default	Aa	6.47:1	4.5:1	✓ Pass
color.text.link.default	color.surface.default	Aa	4.52:1	4.5:1	✓ Pass
color.text.error	color.feedback.error.bg	Aa	5.91:1	4.5:1	✓ Pass
color.text.success	color.feedback.success.bg	Aa	4.79:1	4.5:1	✓ Pass
color.text.warning	color.feedback.warning.bg	Aa	4.76:1	4.5:1	✓ Pass
color.text.info	color.feedback.info.bg	Aa	5.57:1	4.5:1	✓ Pass

Usage Guidelines

Token Selection Rules

Always use semantic tokens. Never reference global tokens in component code. If you need a color that doesn’t have a semantic token, propose a new one — don’t hardcode a global.
Never hardcode hex values. Every color in the application must come from a token. This ensures theme compatibility and brand consistency.
Check contrast before committing. Use the checker above or run the build validation. If a combination fails, choose a different token — don’t override the value.

Do / Don’t

Do

color: var(--color-text-primary);

Don’t

color: #111827;

Hardcoded hex values break theme support.

Do

Use semantic text tokens that resolve to accessible values for each theme.

Don’t

Use global tokens directly in component code (e.g., var(--color-gray-900)).

Do

Use semantic feedback tokens for status indicators (color.feedback.error.bg + color.text.error).

Don’t

Use brand orange for error states. Orange communicates warmth in the brand, not danger.

Do

Use color.text.inverse on color.surface.inverse or color.action.primary.default.

Don’t

Use color.text.primary on dark backgrounds — invisible in light theme.