Skip to content
Nesra UI

Colors

⋯
View as Markdown

Nesra UI exposes semantic color roles in Light Mode. Dark mode is not supported.

Usage

Section titled “Usage”

Use semantic roles rather than primitive colors in components.

<section className="bg-nesra-surface-card-bg-neutral border-nesra-stroke-1 border-nesra-stroke-border">
  <h2 className="text-nesra-text-headline">Account details</h2>
  <p className="text-nesra-text-body">Your current profile information.</p>
</section>

Naming

Section titled “Naming”

CSS token names normalize Figma variables to kebab-case under nesra:

Exact Figma variable CSS value token
Colors/Semantic/gray/gray-50 --nesra-gray-50
Action/primary-staticWhite --nesra-action-primary-static-white
Categorical/Blue/subtle-hover --nesra-categorical-blue-subtle-hover
Icon/icon-brand-primary --nesra-icon-brand-primary
Text/text-body --nesra-text-body

The Text/text-staticWhte spelling is preserved in the Figma label shown below. Its public CSS token is normalized to --nesra-text-static-white.

Primitive palette

Section titled “Primitive palette”

All 200 primitive values have --nesra-* CSS tokens and --color-nesra-* Tailwind bindings. Components use the semantic roles below.

Colors/Semantic/neutral--nesra-neutral-{step}
50#FAFAFA
100#F5F5F5
200#E5E5E5
300#D4D4D4
400#A3A3A3
500#737373
600#525252
700#404040
800#262626
900#171717
950#0A0A0A
Colors--nesra-white · --nesra-black
white#FFFFFF
black#000000
Colors/Semantic/gray--nesra-gray-{step}
50#F9FAFB
100#F3F4F6
200#E5E7EB
300#D1D5DB
400#9CA3AF
500#6B7280
600#4B5563
700#374151
800#1F2937
900#111827
950#030712
Colors/Semantic/state--nesra-state-{step}
50#F8FAFC
100#F1F5F9
200#E2E8F0
300#CBD5E1
400#94A3B8
500#64748B
600#475569
700#334155
800#1E293B
900#0F172A
950#020617
Colors/Semantic/red--nesra-red-{step}
50#FEF2F2
100#FEE2E2
200#FECACA
300#FCA5A5
400#F87171
500#EF4444
600#DC2626
700#B91C1C
800#991B1B
900#7F1D1D
950#450A0A
Colors/Semantic/orange--nesra-orange-{step}
50#FFF7ED
100#FFEDD5
200#FED7AA
300#FDBA74
400#FB923C
500#F97316
600#EA580C
700#C2410C
800#9A3412
900#7C2D12
950#431407
Colors/Semantic/green--nesra-green-{step}
50#F0FDF4
100#DCFCE7
200#BBF7D0
300#86EFAC
400#4ADE80
500#22C55E
600#16A34A
700#15803D
800#166534
900#14532D
950#052E16
Colors/Semantic/yellow--nesra-yellow-{step}
50#FEFCE8
100#FEF9C3
200#FEF08A
300#FDE047
400#FACC15
500#EAB308
600#CA8A04
700#A16207
800#854D0E
900#713F12
950#422006
Colors/Semantic/teal--nesra-teal-{step}
50#F0FDFA
100#CCFBF1
200#99F6E4
300#5EEAD4
400#2DD4BF
500#14B8A6
600#0D9488
700#0F766E
800#115E59
900#134E4A
950#042F2E
Colors/Semantic/cyan--nesra-cyan-{step}
50#ECFEFF
100#CFFAFE
200#A5F3FC
300#67E8F9
400#22D3EE
500#06B6D4
600#0891B2
700#0E7490
800#155E75
900#164E63
950#083344
Colors/Semantic/sky--nesra-sky-{step}
50#F0F9FF
100#E0F2FE
200#BAE6FD
300#7DD3FC
400#38BDF8
500#0EA5E9
600#0284C7
700#0369A1
800#075985
900#0C4A6E
950#082F49
Colors/Semantic/indigo--nesra-indigo-{step}
50#EEF2FF
100#E0E7FF
200#C7D2FE
300#A5B4FC
400#818CF8
500#6366F1
600#4F46E5
700#4338CA
800#3730A3
900#312E81
950#1E1B4B
Colors/Semantic/violet--nesra-violet-{step}
50#F5F3FF
100#EDE9FE
200#DDD6FE
300#C4B5FD
400#A78BFA
500#8B5CF6
600#7C3AED
700#6D28D9
800#5B21B6
900#4C1D95
950#2E1065
Colors/Semantic/purple--nesra-purple-{step}
50#FAF5FF
100#F3E8FF
200#E9D5FF
300#D8B4FE
400#C084FC
500#A855F7
600#9333EA
700#7E22CE
800#6B21A8
900#581C87
950#3B0764
Colors/Semantic/pink--nesra-pink-{step}
50#FDF2F8
100#FCE7F3
200#FBCFE8
300#F9A8D4
400#F472B6
500#EC4899
600#DB2777
700#BE185D
800#9D174D
900#831843
950#500724
Colors/Semantic/rose--nesra-rose-{step}
50#FFF1F2
100#FFE4E6
200#FECDD3
300#FDA4AF
400#FB7185
500#F43F5E
600#E11D48
700#BE123C
800#9F1239
900#881337
950#4C0519
Colors/Semantic/lime--nesra-lime-{step}
50#F7FEE7
100#ECFCCB
200#D9F99D
300#BEF264
400#A3E635
500#84CC16
600#65A30D
700#4D7C0F
800#3F6212
900#365314
950#1A2E05
Colors/Semantic/blue--nesra-blue-{step}
50#EFF6FF
100#DBEAFE
200#BFDBFE
300#93C5FD
400#60A5FA
500#3B82F6
600#2563EB
700#1D4ED8
800#1E40AF
900#1E3A8A
950#172554
Colors/Brand/primary--nesra-brand-primary-{step}
50#F9FAFB
100#F3F4F6
200#E5E7EB
300#D1D5DB
400#9CA3AF
500#6B7280
600#4B5563
700#374151
800#1F2937
900#111827
950#030712

Semantic token reference

Section titled “Semantic token reference”

All 126 roles use values from packages/ui/src/styles.css; the docs build checks that they match.

Foundation

Section titled “Foundation”
Foundation/bg-neutral--nesra-foundation-bg-neutral
#FFFFFF
Foundation/bg-brand-primary--nesra-foundation-bg-brand-primary
#030712
Foundation/bg-brand-primary-50--nesra-foundation-bg-brand-primary-50
#F9FAFB
Foundation/bg-gray--nesra-foundation-bg-gray
#F9FAFB
Foundation/bg-disabled--nesra-foundation-bg-disabled
#F3F4F6
Foundation/bg-success-solid--nesra-foundation-bg-success-solid
#16A34A

Surface

Section titled “Surface”
Surface/card-bg-neutral--nesra-surface-card-bg-neutral
#FFFFFF
Surface/popover-bg-neutral--nesra-surface-popover-bg-neutral
#FFFFFF
Surface/card-bg-brand-primary--nesra-surface-card-bg-brand-primary
#030712
Surface/card-bg-gray--nesra-surface-card-bg-gray
#F9FAFB
Surface/card-bg-brand-primary-50--nesra-surface-card-bg-brand-primary-50
#F9FAFB

Action

Section titled “Action”
Action/primary-default--nesra-action-primary-default
#030712
Action/primary-staticWhite--nesra-action-primary-static-white
#FFFFFF
Action/primary-hover--nesra-action-primary-hover
#374151
Action/primary-disabled--nesra-action-primary-disabled
#E5E7EB
Action/secondary-default--nesra-action-secondary-default
#FFFFFF
Action/secondary-hover--nesra-action-secondary-hover
#F9FAFB
Action/secondary-disabled--nesra-action-secondary-disabled
#F3F4F6
Action/tertiary-default--nesra-action-tertiary-default
#FFFFFF
Action/tertiary-hover--nesra-action-tertiary-hover
#F9FAFB
Action/destructive-default--nesra-action-destructive-default
#EF4444
Action/destructive-hover--nesra-action-destructive-hover
#DC2626

Text

Section titled “Text”
Text/text-headline--nesra-text-headline
#111827
Text/text-body--nesra-text-body
#111827
Text/text-muted--nesra-text-muted
#6B7280
Text/text-disabled--nesra-text-disabled
#D1D5DB
Text/text-staticWhte--nesra-text-static-white
#FFFFFF
Text/text-brand-primary--nesra-text-brand-primary
#6B7280
Text/text-link--nesra-text-link
#2563EB
Text/text-destructive--nesra-text-destructive
#EF4444
Text/text-warning--nesra-text-warning
#EAB308
Text/text-success--nesra-text-success
#22C55E
Text/text-tertiary--nesra-text-tertiary
#4B5563
Text/text-brand-secondary--nesra-text-brand-secondary
#374151

Icon

Section titled “Icon”
Icon/icon-neutral--nesra-icon-neutral
#111827
Icon/icon-muted--nesra-icon-muted
#6B7280
Icon/icon-brand-primary--nesra-icon-brand-primary
#6B7280
Icon/icon-disabled--nesra-icon-disabled
#D1D5DB
Icon/icon-staticWhite--nesra-icon-static-white
#FFFFFF
Icon/icon-destructive--nesra-icon-destructive
#EF4444
Icon/icon-warning--nesra-icon-warning
#EAB308
Icon/icon-success--nesra-icon-success
#22C55E
Icon/icon-info--nesra-icon-info
#3B82F6

Stroke

Section titled “Stroke”
Stroke/stroke-border--nesra-stroke-border
#E5E7EB
Stroke/stroke-divider--nesra-stroke-divider
#F3F4F6
Stroke/stroke-brand-primary--nesra-stroke-brand-primary
#6B7280
Stroke/stroke-destructive--nesra-stroke-destructive
#EF4444
Stroke/stroke-warning--nesra-stroke-warning
#EAB308
Stroke/stroke-success--nesra-stroke-success
#22C55E
Stroke/stroke-link--nesra-stroke-link
#3B82F6
Stroke/stroke-border-subtle--nesra-stroke-border-subtle
#D1D5DB

Background

Section titled “Background”
Background/bg-overlay--nesra-background-overlay
#0A0A0A
Background/bg-brand-solid--nesra-background-brand-solid
#4B5563

Shadow

Section titled “Shadow”
Shadow/shadow-xs--nesra-shadow-xs
#0000000D
Shadow/shadow-xl-01--nesra-shadow-xl-01
#00000014
Shadow/shadow-xl-02--nesra-shadow-xl-02
#00000008
Shadow/shadow-xl-03--nesra-shadow-xl-03
#0000000A
Shadow/shadow-lg-01--nesra-shadow-lg-01
#00000014
Shadow/shadow-lg-02--nesra-shadow-lg-02
#00000008
Shadow/shadow-lg-03--nesra-shadow-lg-03
#0000000A
Shadow/shadow-skeumorphic-inner--nesra-shadow-skeumorphic-inner
#0000000D
Shadow/shadow-skeumorphic-inner-border--nesra-shadow-skeumorphic-inner-border
#0000002E

Effects

Section titled “Effects”
Effects/focus-ring--nesra-effects-focus-ring
#4B5563

Alpha

Section titled “Alpha”
Alpha/alpha-white-10--nesra-alpha-white-10
#FFFFFF1A

Component

Section titled “Component”
Component/avatar-bg-neutral--nesra-component-avatar-bg-neutral
#E0E0E0
Component/Avatar/background-1--nesra-component-avatar-background-1
#E9DCBB
Component/Avatar/border--nesra-component-avatar-border
#00000029
Component/Avatar/background-2--nesra-component-avatar-background-2
#C7D1B0
Component/Avatar/background-3--nesra-component-avatar-background-3
#CED1E5
Component/Avatar/background-4--nesra-component-avatar-background-4
#DDD0BE
Component/Avatar/background-5--nesra-component-avatar-background-5
#DFC2C0

Categorical

Section titled “Categorical”
Categorical/Neutral/subtle--nesra-categorical-neutral-subtle
#FAFAFA
Categorical/Neutral/border--nesra-categorical-neutral-border
#E5E5E5
Categorical/Neutral/base--nesra-categorical-neutral-base
#737373
Categorical/Neutral/foreground--nesra-categorical-neutral-foreground
#404040
Categorical/Neutral/strong--nesra-categorical-neutral-strong
#525252
Categorical/Violet/subtle--nesra-categorical-violet-subtle
#F5F3FF
Categorical/Violet/border--nesra-categorical-violet-border
#DDD6FE
Categorical/Violet/base--nesra-categorical-violet-base
#8B5CF6
Categorical/Violet/foreground--nesra-categorical-violet-foreground
#6D28D9
Categorical/Violet/strong--nesra-categorical-violet-strong
#7C3AED
Categorical/Pink/base--nesra-categorical-pink-base
#EC4899
Categorical/Teal/base--nesra-categorical-teal-base
#14B8A6
Categorical/Blue/base--nesra-categorical-blue-base
#3B82F6
Categorical/Indigo/base--nesra-categorical-indigo-base
#6366F1
Categorical/Purple/base--nesra-categorical-purple-base
#A855F7
Categorical/Orange/base--nesra-categorical-orange-base
#F97316
Categorical/Yellow/base--nesra-categorical-yellow-base
#EAB308
Categorical/Pink/subtle--nesra-categorical-pink-subtle
#FDF2F8
Categorical/Pink/border--nesra-categorical-pink-border
#FBCFE8
Categorical/Pink/foreground--nesra-categorical-pink-foreground
#BE185D
Categorical/Pink/strong--nesra-categorical-pink-strong
#DB2777
Categorical/Teal/subtle--nesra-categorical-teal-subtle
#F0FDFA
Categorical/Teal/border--nesra-categorical-teal-border
#99F6E4
Categorical/Teal/foreground--nesra-categorical-teal-foreground
#0F766E
Categorical/Teal/strong--nesra-categorical-teal-strong
#0D9488
Categorical/Blue/subtle--nesra-categorical-blue-subtle
#EFF6FF
Categorical/Blue/border--nesra-categorical-blue-border
#BFDBFE
Categorical/Blue/foreground--nesra-categorical-blue-foreground
#1D4ED8
Categorical/Blue/strong--nesra-categorical-blue-strong
#2563EB
Categorical/Indigo/subtle--nesra-categorical-indigo-subtle
#EEF2FF
Categorical/Indigo/border--nesra-categorical-indigo-border
#C7D2FE
Categorical/Indigo/foreground--nesra-categorical-indigo-foreground
#4338CA
Categorical/Indigo/strong--nesra-categorical-indigo-strong
#4F46E5
Categorical/Purple/subtle--nesra-categorical-purple-subtle
#FAF5FF
Categorical/Purple/border--nesra-categorical-purple-border
#E9D5FF
Categorical/Purple/foreground--nesra-categorical-purple-foreground
#7E22CE
Categorical/Purple/strong--nesra-categorical-purple-strong
#9333EA
Categorical/Orange/subtle--nesra-categorical-orange-subtle
#FFF7ED
Categorical/Orange/border--nesra-categorical-orange-border
#FED7AA
Categorical/Orange/foreground--nesra-categorical-orange-foreground
#C2410C
Categorical/Orange/strong--nesra-categorical-orange-strong
#EA580C
Categorical/Yellow/subtle--nesra-categorical-yellow-subtle
#FEFCE8
Categorical/Yellow/border--nesra-categorical-yellow-border
#FEF08A
Categorical/Yellow/foreground--nesra-categorical-yellow-foreground
#A16207
Categorical/Yellow/strong--nesra-categorical-yellow-strong
#CA8A04
Categorical/Neutral/subtle-hover--nesra-categorical-neutral-subtle-hover
#F5F5F5
Categorical/Violet/subtle-hover--nesra-categorical-violet-subtle-hover
#EDE9FE
Categorical/Pink/subtle-hover--nesra-categorical-pink-subtle-hover
#FCE7F3
Categorical/Teal/subtle-hover--nesra-categorical-teal-subtle-hover
#CCFBF1
Categorical/Blue/subtle-hover--nesra-categorical-blue-subtle-hover
#DBEAFE
Categorical/Indigo/subtle-hover--nesra-categorical-indigo-subtle-hover
#E0E7FF
Categorical/Purple/subtle-hover--nesra-categorical-purple-subtle-hover
#F3E8FF
Categorical/Orange/subtle-hover--nesra-categorical-orange-subtle-hover
#FFEDD5
Categorical/Yellow/subtle-hover--nesra-categorical-yellow-subtle-hover
#FEF9C3

Calendar

Section titled “Calendar”
Calendar/Imported/Component-colors/Alpha/alpha-black-100--nesra-calendar-imported-component-colors-alpha-black-100
#000000