Colors

Public color scales and shared tint roles for building and theming Nitro Kit interfaces.

Source: src/stylesheets/nitro_kit/tokens.css
API: var(--nk-{family}-{step}) and var(--nk-palette-{color})

Palette provenance

These scales are harmonized derivations of the Tailwind CSS v4 palette, used under its MIT license—not unchanged copies. Nitro Kit smooths each family’s OKLCH lightness, chroma, and hue while keeping every value imperceptibly close to its Tailwind source.

Poles

White and black anchor pure surfaces, foregrounds, and overlays and can be rethemed independently.

White and black

white

black

Viewport640 px · sm

Width

Preset

Rubytest/dummy/app/components/gallery/foundations/colors_page.rb

%i[white black].each { |color| color_swatch(color, token: "--nk-#{color}") }

Neutral scales

Cool through warm neutral ramps for canvas, surface, border, and content roles.

Neutral families

Slate--nk-slate-{step}

50

100

200

300

400

500

600

700

800

900

950

Gray--nk-gray-{step}

50

100

200

300

400

500

600

700

800

900

950

Zinc--nk-zinc-{step}

50

100

200

300

400

500

600

700

800

900

950

Neutral--nk-neutral-{step}

50

100

200

300

400

500

600

700

800

900

950

Stone--nk-stone-{step}

50

100

200

300

400

500

600

700

800

900

950

ViewportFull width

Width

Preset

Rubytest/dummy/app/components/gallery/foundations/colors_page.rb

NEUTRAL_FAMILIES.each { |family| color_scale(family) }

Color scales

Every public family includes all eleven appearance-independent steps. Use 50–200 for tints and surfaces, 400–600 for accents and markers, and 700–950 for content.

Color families

Red--nk-red-{step}

50

100

200

300

400

500

600

700

800

900

950

Orange--nk-orange-{step}

50

100

200

300

400

500

600

700

800

900

950

Amber--nk-amber-{step}

50

100

200

300

400

500

600

700

800

900

950

Yellow--nk-yellow-{step}

50

100

200

300

400

500

600

700

800

900

950

Lime--nk-lime-{step}

50

100

200

300

400

500

600

700

800

900

950

Green--nk-green-{step}

50

100

200

300

400

500

600

700

800

900

950

Emerald--nk-emerald-{step}

50

100

200

300

400

500

600

700

800

900

950

Teal--nk-teal-{step}

50

100

200

300

400

500

600

700

800

900

950

Cyan--nk-cyan-{step}

50

100

200

300

400

500

600

700

800

900

950

Sky--nk-sky-{step}

50

100

200

300

400

500

600

700

800

900

950

Blue--nk-blue-{step}

50

100

200

300

400

500

600

700

800

900

950

Indigo--nk-indigo-{step}

50

100

200

300

400

500

600

700

800

900

950

Violet--nk-violet-{step}

50

100

200

300

400

500

600

700

800

900

950

Purple--nk-purple-{step}

50

100

200

300

400

500

600

700

800

900

950

Fuchsia--nk-fuchsia-{step}

50

100

200

300

400

500

600

700

800

900

950

Pink--nk-pink-{step}

50

100

200

300

400

500

600

700

800

900

950

Rose--nk-rose-{step}

50

100

200

300

400

500

600

700

800

900

950

ViewportFull width

Width

Preset

Rubytest/dummy/app/components/gallery/foundations/colors_page.rb

COLOR_FAMILIES.each { |family| color_scale(family) }

Tint palette

Badge, Alert, and Toast share these semantic and decorative tint roles. Semantic names follow application meaning; hue names remain literal.

Palette roles

--nk-palette-red--nk-palette-orange--nk-palette-amber--nk-palette-yellow--nk-palette-lime--nk-palette-green--nk-palette-emerald--nk-palette-teal--nk-palette-cyan--nk-palette-sky--nk-palette-blue--nk-palette-indigo--nk-palette-violet--nk-palette-purple--nk-palette-fuchsia--nk-palette-pink--nk-palette-rose--nk-palette-neutral--nk-palette-info--nk-palette-success--nk-palette-warning--nk-palette-destructive

ViewportFull width

Width

Preset

Rubytest/dummy/app/components/gallery/foundations/colors_page.rb

NitroKit::Badge::COLORS.each do |color|
  render NitroKit::Badge.new(
    "--nk-palette-#{color}",
    id: "gallery-color-palette-#{color}",
    color:
  )
end

System rules for coding agents

Instructions for coding agents, repeated on every component page so one fetched page has enough context. Humans can usually skip this section.

test/dummy/app/components/gallery/agent_rules.rb

View agent instructions

Nitro Kit 2.0 is a gem-owned, Phlex-only UI system for Rails. Render components directly: render NitroKit::Button.new("Save", variant: :primary).
Compose Nitro components inside application-owned Phlex classes. Public initializers and declared slots are the component API; private methods are not.
Public options are explicit keywords, and enumerated options are closed vocabularies. Invalid names or values raise ArgumentError; this component's accepted options are in the contract above.
Pass native attributes through their typed boundary: html: for HTML, aria: for ARIA, and data: for application data. class and style are forbidden, including inside html:.
Nitro owns NitroKit::Component::RESERVED_DATA_ATTRIBUTES: data-nk, data-slot, data-variant, data-size, data-nk-escape, data-enhanced, data-state, data-disabled, data-required, data-orientation, data-presentation, data-placement, data-layout, data-side, data-field-type, data-dir, data-gap, data-align, data-justify, data-wrap, data-cols, data-mode, data-key. Do not pass them through data:. data-action, data-controller are additive and compose with Nitro behavior.
If an integration truly requires a class, use desperately_need_a_class:. It requires a non-blank String and marks the exception with data-nk-escape="class".
Every root emits data-nk; owned parts emit component-qualified data-slot values such as field-control or card-title. Select on those attributes, never on classes.
Customize components with documented --nk-* custom properties in an application stylesheet. Variables beginning with --_nk-* are private component mechanics.
Use NitroKit::Flex and NitroKit::Grid for layout. Parents own external placement and available width; components own their intrinsic geometry.
Preserve native elements and accessibility semantics. State is exposed through native semantics and ARIA first, and through data-state when styling or behavior also needs it.