Theme studio · preset v1

Customize Nitro Kit

Tune documented public tokens, pressure-test them in a real application shell, then copy the deterministic CSS and Phlex composition.

Live preview

A complete workspace

Preview appearance is isolated from the gallery's saved appearance.

Skip to content
NorthstarOperations

Monday, July 13

Workspace overview

Review activity, invite a teammate, and keep production moving.

Active projects
12
+3 this month
Deployments
48
99.98% healthy
Open incidents
2
Both assigned

Invite a teammate

Production is healthy
Every regional check passed five minutes ago.
They can join your Team workspace.

Recent projects

Projects ordered by name
ProjectStatusMembers
AtlasActive8
BeaconReview5
CedarDraft3

Create project

Choose a clear name. You can change it later.

Operational details

Former Pro capabilities use the same public theme contract.

Workspace record

Image unavailable
WorkspaceNorthstar Studio
OwnerAda Lovelace
PlanTeam
Members18

Release evidence

No files selected.

Preset controls

Shape the system

Every choice maps to a closed set of documented Nitro variables.

Accent

Primary actions, focus rings, and selected states.

Neutral

Canvas, surfaces, borders, and text.

Radius

Corner treatment across controls and surfaces.

Density

Base spacing and control heights.

Typography

The application-wide sans-serif stack.

Application shell

Sidebar, topbar, or combined chrome.

Preview appearance

Light, dark, or live system—preview only, never saved or shared.

Install

Copy application-owned code

CSS contains changed public tokens only. Ruby composes Nitro-owned components.

CSSapp/assets/stylesheets/nitro_theme.css
:root, [data-theme="light"] {
  --nk-color-primary: oklch(0.546 0.245 262.881);
  --nk-color-primary-foreground: oklch(0.985 0 0);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --nk-color-focus: oklch(0.64 0.214 259.815);
    --nk-color-primary: oklch(0.64 0.214 259.815);
    --nk-color-primary-foreground: oklch(0.141 0.005 285.823);
  }
}

[data-theme="dark"] {
  --nk-color-focus: oklch(0.64 0.214 259.815);
  --nk-color-primary: oklch(0.64 0.214 259.815);
  --nk-color-primary-foreground: oklch(0.141 0.005 285.823);
}
Rubyapp/components/workspace/layout.rb
render NitroKit::AppShell.new(id: "workspace", layout: :sidebar) do |shell|
  shell.brand { strong { "Northstar" } }

  shell.navigation do
    render NitroKit::AppNavigation.new(label: "Primary navigation") do |navigation|
      navigation.body do
        navigation.item("Overview", href: root_path, icon: :house, current: true)
        navigation.item("Projects", href: projects_path, icon: :folder)
        navigation.spacer
        navigation.item("Settings", href: settings_path, icon: :settings)
      end
    end
  end

  shell.topbar do
    render NitroKit::Button.new("New project", href: new_project_path, variant: :primary)
  end

  shell.main { render Workspace::Dashboard.new }
end