Skip to main content
ninna-ui

Colors

Visual reference for all 8 semantic colors, base surface scale, and border tokens available in every Ninna UI theme.

Interactive Theme Showcase

Experience real-time interactive color scaling across 5 built-in themes. All components below are strictly driven by CSS semantic properties.

Theme Showcase

Interactive Elements

Forms & Toggles

Enable Dark Mode

Push Notifications

Semantic Colors

primary
secondary
accent
success
warning
danger
info
neutral

Surfaces & Data

Light to dark cascading scales

75%

Semantic Colors

8 semantic colors rigorously matched to specific UI intentions. Each semantic variant automatically ships with a mathematically calculated -content property to guarantee WCAG AA text contrast.

primary

Primary

Main brand color. Used for primary actions, links, and key UI elements.

bg bg-primarytx text-primary
secondary

Secondary

Supporting brand color. Used for secondary actions and accents.

bg bg-secondarytx text-secondary
accent

Accent

Highlight color for special elements, tags, and decorative UI.

bg bg-accenttx text-accent
neutral

Neutral

Muted color for subtle backgrounds, disabled states, and secondary text.

bg bg-neutraltx text-neutral
success

Success

Positive states - confirmations, completed actions, valid inputs.

bg bg-successtx text-success
danger

Danger

Error and destructive states - validation errors, delete confirmations.

bg bg-dangertx text-danger
warning

Warning

Caution states - non-blocking alerts, expiration notices.

bg bg-warningtx text-warning
info

Info

Informational states - tips, help text, neutral notifications.

bg bg-infotx text-info

Content colors are automatically set per theme. Use text-primary-content on bg-primary for guaranteed WCAG AA contrast.

Base Surface Scale

A minimalist, 10-step neutral topological surface scale handling everything from pure backgrounds to deeply contrasted elements. Automatically inverts precisely during dark mode toggling.

50
100
200
300
400
500
600
700
800
900
50

Lightest surface - page background

100

Card / panel backgrounds

200

Subtle backgrounds, code blocks

300

Borders, dividers

400

Disabled borders

500

Placeholder text

600

Secondary text

700

Heading text

800

Primary text

900

Darkest surface

Border Tokens

Strictly defined structural borders mapping accurately across component resting, hovering, grouping, and disabled interaction states.

border-borderDefault resting borders
border-border-hoverInteractive hover states
border-border-activeFocus and active states
border-border-disabledDisabled empty layout boundaries

Usage Patterns

Common patterns for using colors in your components.

Color usage examples

/* Semantic colors as Tailwind utilities */
<Button color="primary">Primary Action</Button>
<Badge color="success">Active</Badge>
<Alert color="danger">Error occurred</Alert>


/* Background + content pairs (auto-contrast) */
<div className="bg-primary text-primary-content">
  White text on primary background
</div>


/* Text colors for inline use */
<Text className="text-base-content">Default text</Text>
<Text className="text-base-content/70">Secondary text (70% opacity)</Text>
<Text className="text-base-content/70">Muted text (40% opacity)</Text>


/* Base surface scale */
<div className="bg-base-50">Page background</div>
<div className="bg-base-100">Card background</div>
<div className="bg-base-200">Subtle background</div>
<div className="border border-base-300">Border</div>

Opacity modifiers: Use Tailwind opacity syntax liketext-base-content/70 for secondary text. This works with all semantic colors too:bg-primary/10 for subtle tinted backgrounds.

Custom Colors

Override any CSS variable to create your own theme or brand colors. All 31 variables are customizable.

Override primary color in your CSS

/* In your main CSS file - override after the theme import */
@import "tailwindcss";
@import "@ninna-ui/core/theme/presets/default.css";


/* Override primary to your brand color */
[data-theme="default"] {
  --color-primary: oklch(0.52 0.28 220);         /* brand blue */
  --color-primary-content: oklch(0.98 0.005 220); /* white text on primary */


  /* Override secondary */
  --color-secondary: oklch(0.48 0.22 160);        /* brand teal */
  --color-secondary-content: oklch(0.98 0.005 160);


  /* Override base surfaces for a warmer feel */
  --color-base-50:  oklch(0.985 0.005 80);
  --color-base-100: oklch(0.970 0.008 80);
  --color-base-200: oklch(0.940 0.010 80);
}


/* Dark mode overrides - both selector forms required */
.dark [data-theme="default"],
[data-theme="default"].dark {
  --color-primary: oklch(0.72 0.22 220);
  --color-primary-content: oklch(0.12 0.02 220);
}

All overridable variables

--color-primary

Main brand color

--color-primary-content

Text on primary bg

--color-secondary

Supporting brand color

--color-secondary-content

Text on secondary bg

--color-accent

Highlight color

--color-accent-content

Text on accent bg

--color-neutral

Muted/neutral color

--color-neutral-content

Text on neutral bg

--color-success

Positive state color

--color-success-content

Text on success bg

--color-danger

Error/destructive color

--color-danger-content

Text on danger bg

--color-warning

Caution state color

--color-warning-content

Text on warning bg

--color-info

Informational color

--color-info-content

Text on info bg

--color-base-50

Lightest surface

--color-base-100

Card background

--color-base-200

Subtle background

--color-base-300

Borders, dividers

--color-base-content

Default text color

--color-border

Default border

--color-border-hover

Hover border

--color-border-active

Active/focus border

Content colors: When you change a semantic color, also update its -content counterpart to maintain WCAG AA contrast (minimum 4.5:1 ratio for normal text).