Component library

nikos.tools · Design language · Made with the UX pack

Quiet paper, live green screens.

Every token, type style and component on nikos.tools, rendered from the site’s own CSS. Copy the prompt to give a coding agent the same brief.

See the components

Principle 1The tool is the heroPages stay quiet so each tool’s dark logo panel is the loudest thing on the shelf.
Principle 2Dark screens are the brandLogo panels, terminals and the closing band stay dark in both themes. That’s where tools come alive.
Principle 3Green means liveThe accent marks what works now: a free price, a passing check, the next step. Never decoration.
Principle 4Three voicesSchibsted Grotesk says it. Instrument Serif italic says it with feeling. JetBrains Mono is the machine.
Principle 5Honest by defaultCommands are real and copyable, and caveats get their own boxes instead of small print.

Colour

Paper, ink and hairlines keep the page quiet. Green means something is live, and the dark screens are where tools come alive.

What colour means

LiveWhat works now: a free price, a passing check, the next step to take.--accent
AliveSomething running on a dark screen: logos, terminal output, the closing band.--glyph
QuietEverything else: supporting copy, labels and lines that stay out of the way.--muted

Surfaces

Light · dark. Click a swatch to copy its token.

public/style.css · :root and prefers-color-scheme: dark

Ink

Light · dark. Click a swatch to copy its token.

public/style.css · :root and prefers-color-scheme: dark

Lines

Light · dark. Click a swatch to copy its token.

public/style.css · :root and prefers-color-scheme: dark

Accent and glyph

Light · dark. Click a swatch to copy its token.

public/style.css · :root and prefers-color-scheme: dark

Typography

Three voices. The grotesk says it, the serif italic says it with feeling, and mono is the machine talking.

Roles

DisplayOne per page, in the hero. Balanced, at most about 15 characters a line.

Tools I built for my own work.hero h1 · font: 600 var(--step-3)/1.02 var(--f-display)

Display italicThe second half of a headline, inside an em. Never on its own line of body copy.

ready for yours..hero h1 em · font: italic 400 1.06em/1 var(--f-serif)

Section headingOpens every section. Can end in a serif italic phrase.

A shared source of truth..nk h2 · font: 600 var(--step-2)/1.1 var(--f-display)

LedeUnder a headline. Pencil, at most 54 characters a line.

AI can build software faster. Your team still needs to agree on what to build..lede · font: 400 var(--step-1)/1.5 var(--f-display)

BodyEverything else.

Run it in an existing project with help from a developer or AI coding assistant.body · font: 400 var(--step-0)/1.6 var(--f-display)

LabelEyebrows and small headings. Mono, uppercase, tracked.

nikOS · Free · open source.label · font: 500 var(--step--1)/1.3 var(--f-mono)

CodeCommands and file names. Real ones only.

npx nikos start.install code · font: 400 .8rem/1.4 var(--f-mono)

public/style.css

Scale

Aa--step-3Hero headline
Aa--step-2Section headings, tile titles
Aa--step-1Ledes, card headings
Aa--step-0Body
Aa--step--1Labels

public/style.css · :root

Spacing

One column width, gutters that respect the notch, and long, even breaths between sections.

Gutters

Column: --max: 1180px The widest anything gets. Centred.
Gutter, phones: max(16px, env(safe-area-inset-left, 0px)) Never less than 16px, and clear of the notch.
Gutter, 720px and up: max(32px, env(safe-area-inset-left, 0px)) Room to breathe on tablets and up.

public/style.css · .wrap

Section rhythm

Page hero: padding-block: clamp(56px, 9vw, 120px) clamp(40px, 6vw, 72px)
Section: padding-block: clamp(56px, 8vw, 104px) 0

public/style.css · .hero, .nk

Grid

Shelf: 1 column, 2 at 720px, 3 at 1040px Tiles. The featured tile spans two.
Split: 5fr 6fr at 960px Copy beside a figure, the figure sticky.

public/style.css · .grid, .nk-split

Radius & elevation

Pills for things you press, soft cards for things you read, and one shadow, only when a tile lifts.

Radius

999pxPills: buttons, filters, chips in lists..btn
var(--radius) = 14pxTiles and cards..tile
12pxTerminals and cards inside cards..term
10pxThe install command..install
7pxCopy buttons and the brand mark..copy
6pxPrice tags and platform chips..price

public/style.css

Elevation

Resting

Lifted

0 24px 48px -28px rgba(10, 20, 12, .35) The only shadow. A tile lifts 3px into it on hover or focus.

public/style.css · .tile:hover

Motion

--ease: cubic-bezier(.2, .7, .2, 1) Every transition. Fast out, gentle settle. Hover the button to see it.

Hover me

public/style.css · :root

Components

The real classes from public/style.css, rendered live: if one changes, it changes here.

Buttons

Start with nikOS GitHub

public/style.css · .btn, .btn.primary

Price tags and chips

Free · open source£29Claude CodeCodexCursor

public/style.css · .price, .price.paid, .chip, .chips

Filters

public/style.css · .filters

Install command

$ npx nikos start

public/style.css · .install, .copy

Tool tile

TOOL 001

Free · open sourceClaude CodeCodexCursor

nikOS

Spec-driven development for AI coding agents. Story maps, plans and acceptance criteria live in your repo. Every criterion runs as a Cucumber test, and a story can't be marked done until it passes.

$ /plugin install nikos --marketplace nikovijay/NikOS

GitHub Quickstart

View tool

scripts/build.mjs · tile() · public/style.css · .tile

Terminal

$ npx nikos verify SP-1

1 scenario (1 passed)

SP-1: in_progress → done

public/style.css · .term, .tl

Notes and questions

How currentLinked plans need syncing; this isn’t an automatically live picture of the whole company.

Does nikOS build the software?

No. It structures the instructions and acceptance checks.

public/style.css · .honest, .faq

Patterns

Composed only from the parts above.

Page hero

UX pack · Free · open source

Your component library, as a page any agent can read.

Every token and component, rendered from your code, with a brief to copy.

Get started See one

.label, .hero h1 em, .lede, .btn

Closing band

Give your next feature a clear purpose—and a clear definition of done.

Open source. Your repositories. Start with one team.

Start with nikOS

$ npx nikos start

.band-in, .band-start, .install

Do & don't

The short version, for people and agents.

Do

Keep the page quiet: paper, ink, hairlines. Let the tool’s dark logo panel be the loud thing.
Use green only for what’s live, and rgb(var(--glyph)) only on dark screens.
Give every command a Copy button, and make it a real command that works today.
Put caveats in their own note, where people will read them.
Check every page at 320px wide: nothing scrolls sideways.
Respect prefers-reduced-motion: animations rest, they don’t vanish.

Don’t

Don’t add a second shadow, gradient or accent colour.
Don’t set body copy in the serif or mono; they’re voices, not text faces.
Don’t lighten the dark screens in dark mode: they’re the brand in both themes.
Don’t redraw a component for a page; use its class.
Don’t promise what a tool doesn’t do yet.

→

The brief

What Copy prompt gives your agent: this page as plain text, built from the same data.

# nikos.tools design language

Use it for every page on nikos.tools and for any tool page or asset that sits next to it. Tokens live in public/style.css. Library: https://nikos.tools/ux/library

## Principles
1. The tool is the hero. Pages stay quiet so each tool’s dark logo panel is the loudest thing on the shelf.
2. Dark screens are the brand. Logo panels, terminals and the closing band stay dark in both themes. That’s where tools come alive.
3. Green means live. The accent marks what works now: a free price, a passing check, the next step. Never decoration.
4. Three voices. Schibsted Grotesk says it. Instrument Serif italic says it with feeling. JetBrains Mono is the machine.
5. Honest by default. Commands are real and copyable, and caveats get their own boxes instead of small print.

## Colour (CSS custom properties)
- Live (--accent): What works now: a free price, a passing check, the next step to take.
- Alive (--glyph): Something running on a dark screen: logos, terminal output, the closing band.
- Quiet (--muted): Everything else: supporting copy, labels and lines that stay out of the way.
Surfaces:
- --bg #f2f3ef light / #0d100e dark: Paper. The page, with a faint green bias toward the accent.
- --surface #ffffff light / #141815 dark: Card. Tiles, cards, notes and the inside of buttons.
- --screen #070a08 light / #070a08 dark: Screen. Logo panels, terminals, the closing band. Dark in both themes.
Ink:
- --fg #111411 light / #ebeee9 dark: Ink. Headlines, body copy and primary buttons.
- --muted #5c625c light / #98a098 dark: Pencil. Ledes, supporting copy, labels and nav.
Lines:
- --line #dcdfd8 light / #232a25 dark: Hairline. Card borders and dividers.
- --line-strong #b9beb6 light / #3a443c dark: Rule. Hover borders, dashed outlines, secondary buttons.
Accent and glyph:
- --accent #14823e light / #4fdc85 dark: Live. Text and marks for what’s live. Readable on paper.
- --accent-soft #e2efe5 light / #15261b dark: Live wash. Behind accent text: the free price, alignment tags.
- --glyph #3cff7a light / #3cff7a dark: Glyph. On dark screens only, as rgb(var(--glyph)). Too bright for paper.

## Type (Schibsted Grotesk, Instrument Serif italic, JetBrains Mono)
- Display (.hero h1): font: 600 var(--step-3)/1.02 var(--f-display); letter-spacing: -.035em. One per page, in the hero. Balanced, at most about 15 characters a line.
- Display italic (.hero h1 em): font: italic 400 1.06em/1 var(--f-serif); letter-spacing: -.01em. The second half of a headline, inside an em. Never on its own line of body copy.
- Section heading (.nk h2): font: 600 var(--step-2)/1.1 var(--f-display); letter-spacing: -.025em. Opens every section. Can end in a serif italic phrase.
- Lede (.lede): font: 400 var(--step-1)/1.5 var(--f-display); color: var(--muted). Under a headline. Pencil, at most 54 characters a line.
- Body (body): font: 400 var(--step-0)/1.6 var(--f-display). Everything else.
- Label (.label): font: 500 var(--step--1)/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted). Eyebrows and small headings. Mono, uppercase, tracked.
- Code (.install code): font: 400 .8rem/1.4 var(--f-mono). Commands and file names. Real ones only.
- Scale: --step-3 clamp(2.4rem, 1.7rem + 3.4vw, 4.6rem) (Hero headline); --step-2 clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem) (Section headings, tile titles); --step-1 clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem) (Ledes, card headings); --step-0 clamp(0.98rem, 0.95rem + 0.15vw, 1.06rem) (Body); --step--1 clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem) (Labels).

## Layout and shape
- Column: --max: 1180px. The widest anything gets. Centred.
- Gutter, phones: max(16px, env(safe-area-inset-left, 0px)). Never less than 16px, and clear of the notch.
- Gutter, 720px and up: max(32px, env(safe-area-inset-left, 0px)). Room to breathe on tablets and up.
- Page hero padding: clamp(56px, 9vw, 120px) clamp(40px, 6vw, 72px).
- Section padding: clamp(56px, 8vw, 104px) 0.
- Shelf: 1 column, 2 at 720px, 3 at 1040px. Tiles. The featured tile spans two.
- Split: 5fr 6fr at 960px. Copy beside a figure, the figure sticky.
- Radius: 999px for pills: buttons, filters, chips in lists; var(--radius) (14px) for tiles and cards; 12px for terminals and cards inside cards; 10px for the install command; 7px for copy buttons and the brand mark; 6px for price tags and platform chips.
- Shadow: 0 24px 48px -28px rgba(10, 20, 12, .35). The only shadow. A tile lifts 3px into it on hover or focus.
- Motion: --ease cubic-bezier(.2, .7, .2, 1). Every transition. Fast out, gentle settle.

## Components (classes in public/style.css)
- .btn and .btn.primary: pill buttons; an arrow in .arr nudges on hover.
- .price (free, accent wash) and .price.paid (ink); .chip for platforms.
- .filters: a pill of buttons with aria-pressed.
- .install: a command in mono with a $ prompt and a .copy button.
- .tile: a dark .logo panel above (or beside, when featured) a .body with meta, title, summary, install and links.
- .term: a dark terminal; .tl lines, .ok in glyph green, .dim for quiet lines.
- .honest p: a caveat note with an accent rule; .faq: questions in details and summary.

## Do
- Keep the page quiet: paper, ink, hairlines. Let the tool’s dark logo panel be the loud thing.
- Use green only for what’s live, and rgb(var(--glyph)) only on dark screens.
- Give every command a Copy button, and make it a real command that works today.
- Put caveats in their own note, where people will read them.
- Check every page at 320px wide: nothing scrolls sideways.
- Respect prefers-reduced-motion: animations rest, they don’t vanish.

## Don't
- Don’t add a second shadow, gradient or accent colour.
- Don’t set body copy in the serif or mono; they’re voices, not text faces.
- Don’t lighten the dark screens in dark mode: they’re the brand in both themes.
- Don’t redraw a component for a page; use its class.
- Don’t promise what a tool doesn’t do yet.