Phase 2 · Visual language Core contract v2.0.0

Raster & Ink

Design the label. Move the warehouse.

A label-design system for turning structured data into reliable physical movement—from canvas and code to carton, rack, and dock.

StructuredGroundedTactileAuthored

LAYER / 01

8-bit systems

Raster cells, limited palettes, discrete state, and repeatable grid logic.

LAYER / 02

Retro gaming

Immediate feedback, compact system labels, progression, and purposeful signal colour.

LAYER / 03

Graffiti culture

Authorship, overprinting, annotation, and rare moments that deliberately break the grid.

01 · Foundation

Principles

The tests we use when two visually plausible answers compete.

System beneath style: every expressive move starts from the same spacing, type, and semantic-token contract.

Raster clarity: geometry is crisp, hierarchy is obvious, and interaction state is never ambiguous.

Material technology: one white surface establishes the base; restrained grey structure keeps the work visible, with optional editor roles available to public themes.

Leave a human mark: use registration, annotation, and overprint cues on expressive surfaces while core tools stay legible.

Feedback shows processing: motion reveals movement, rendering, and state change without slowing expert work.

02 · Foundation

Colour

One core palette serves the product. Public themes can optionally customize editor-specific roles.

Live palette editor

Changes apply to this catalogue and persist in this browser.

Surfaces

Base surface Secondary Muted Accent

Text

Ink Muted text

Actions

Primary On primary Focus ring

Structure

Border Input border Table header

Status

Success surface Success text Warning surface Warning text Danger Info surface Info text

Lightlight

canvas

oklch(1 0 0)

secondary

oklch(0.91 0 0)

muted

oklch(0.95 0 0)

accent

oklch(0.94 0 0)

default

oklch(0.25 0 0)

muted

oklch(0.48 0 0)

primary

oklch(0.35 0 0)

default

oklch(0.73 0 0)

ring

oklch(0.5 0 0)

danger

oklch(0.470333 0.180405 27.841)

success-text

oklch(0.373041 0.107178 148.286)

warning-surface

oklch(0.744451 0.179766 55.811)

Darkdark

canvas

oklch(0.13 0 0)

secondary

oklch(0.24 0 0)

muted

oklch(0.21 0 0)

accent

oklch(0.28 0 0)

default

oklch(0.95 0 0)

muted

oklch(0.73 0 0)

primary

oklch(0.9 0 0)

default

oklch(0.39 0 0)

ring

oklch(0.78 0 0)

danger

oklch(0.72 0.16 25)

success-text

oklch(0.8 0.1 145)

warning-surface

oklch(0.8 0.15 75)

Light · high contrastlight-high-contrast

canvas

oklch(1 0 0)

secondary

oklch(0.9 0 0)

muted

oklch(0.95 0 0)

accent

oklch(0.86 0 0)

default

oklch(0.05 0 0)

muted

oklch(0.3 0 0)

primary

oklch(0.05 0 0)

default

oklch(0.25 0 0)

ring

oklch(0.38 0 0)

danger

oklch(0.470333 0.180405 27.841)

success-text

oklch(0.373041 0.107178 148.286)

warning-surface

oklch(0.744451 0.179766 55.811)

Dark · high contrastdark-high-contrast

canvas

oklch(0.05 0 0)

secondary

oklch(0.18 0 0)

muted

oklch(0.15 0 0)

accent

oklch(0.42 0 0)

default

oklch(1 0 0)

muted

oklch(0.86 0 0)

primary

oklch(1 0 0)

default

oklch(0.72 0 0)

ring

oklch(0.84 0 0)

danger

oklch(0.72 0.16 25)

success-text

oklch(0.8 0.1 145)

warning-surface

oklch(0.8 0.15 75)

One white surface

Canvas, cards, popovers, sidebars, panes, headers, and the work plane all use #FFFFFF; borders and spacing provide structure.

Optional editor roles

The default editor aliases the core palette; public themes can override editor surfaces, gutter, and focus without expanding the required contract. The non-printable label gutter intentionally uses the editor gutter role; the label itself always uses the canvas surface.

State, not layering

Grey fills identify hover, selection, disabled, or muted states. They do not create slightly different passive surfaces.

Zed compatible

An unchanged Zed v0.2 theme family loads every contained theme; Kite supplies fallbacks for product-specific status roles.

Optional theme plugin

Kite Arcade

An optional high-energy theme with acid-lime action, marker-magenta focus, and arcade-cabinet contrast.

com.kite.arcade@1.0.0

03 · Foundation

Typography

One clear sans-serif voice for work and display; monospace classifies layers, coordinates, tokens, and machine values.

Display

--kite-font-size-display

Build labels with confidence

Title

--kite-font-size-title

Production workspace

Body

--kite-font-size-body

Clear interface copy supports fast, accurate decisions.

Small

--kite-font-size-sm

Updated 12 minutes ago by Priya

Metadata

--kite-font-size-xs

PRINTER · ZT411 · 300 DPI

Machine data

ui-monospace

^XA · semantic.color.action.primary · 203.2 dpi

04 · Foundation

Spacing & density

A 4px base grid keeps expert workflows compact and makes alignment predictable.

1

4px

2

8px

3

12px

4

16px

6

24px

8

32px

Density rule

24px
micro

32px
default

40px
prominent

Visible control height may be compact; the surrounding layout must retain a comfortable pointer and touch target.

05 · Foundation

Shape & elevation

Small radii and thin rules define ordinary containment. Restrained depth appears only when an object genuinely stacks above the work plane.

Small · nested controls

Default · controls

Large · containers

Raised

Sticky toolbars and active cards use close, restrained elevation.

06 · Foundation

Motion

Fast enough for expert operation, present enough to preserve context.

Fast · 120ms

Hover, press, focus

Moderate · 180ms

Disclosure, local layout

Slow · 280ms

Overlay and pane transitions

Hover each sample. Under prefers-reduced-motion: reduce, travel is removed and state changes are immediate.

07 · Foundation

Iconography

Lucide’s 2px outline language supports interface actions; text carries meaning when an icon could be ambiguous.

Do

Use one icon family, optical sizes of 16–20px, and labels for unfamiliar or destructive actions.

Avoid

Do not mix filled and outline sets or use icon-only controls without an accessible name.

08 · Navigation

Breadcrumbs

Breadcrumbs explain either where a page lives or how far a bounded task has progressed. Both variants share one semantic nav/list core and use text—not colour alone—to communicate state.

Page breadcrumb

Use at the leading edge of a page navbar or page header. The final item is the current page; ancestors may link back to stable destinations.

Position before page-level actions. Keep labels short, collapse information architecture rather than repeating the sidebar, and omit a link from the current page.

Shared core

BreadcrumbCore owns the accessible nav, ordered list, item, and separator structure. Product code should normally choose a named variant instead of styling the core directly.

@kite/ui/impl/breadcrumbs

PageLocation within the application hierarchy.ProgressState within one finite, ordered task.

Progress breadcrumb

Use below the page heading and above the active step content. Pass stable step IDs and the current step ID; completed and upcoming states are derived.

Current step

Place in the task flow

Keep progress beneath the page title and above the form or decision for the current step. It may remain sticky within that content pane.

Keep out of global chrome

Do not put task progress in the sidebar or global navbar, and do not use it for free-form page navigation.

09 · Components

Shared recipes

These examples render the actual @kite/ui components, so this catalogue exposes implementation drift.

Buttons

One primary action per decision area; variants step down through secondary, outline, ghost, and destructive.

Fields

Labels remain visible; helper and error copy explain constraints and recovery.

Printer nameDPIUse 203, 300, or 600 DPI.

Description

Input with end buttons

Use for bounded numeric values that operators adjust repeatedly. Keep direct typing available alongside the step controls.

Quantity

Status & badges

Every status pairs colour with words and, for high-salience messages, an icon.

InfoOnlineAttentionFailedDraft

Printer connected

ZT411 is ready to receive jobs.

Settings row

Keep the label and consequence together; place the control at the predictable trailing edge.

Job notifications

Notify when a print job completes.

Automatic retry

Retry recoverable printer errors once.

Data table

Align comparable values, keep actions quiet, and preserve a clear selected state.

Printer	Location	Resolution	Status
ZT411-01	Packing line	300 dpi	Online
ZD621-04	Dispatch	203 dpi	Paused
ZT610-02	Cold store	600 dpi	Online

Operations heatmap

Use a dense status matrix when operators need to find unhealthy service/device intersections at a glance. Summary tiles establish scale; colour intensity carries urgency and load.

4 / 4

Azure · Cloud

Error

5 / 6

WMS · Management

Error

3 / 5

WCS · Control

Off

2 / 4

SRC · Runtime

Podman service heatmap

Current workload state · mock observation

On Off Error

Azure

4 services

identity on

event-hub on

sync on

blob on

WMS

6 services

api on

worker-01 on

worker-02 on

database on

scheduler error

cache on

WCS

5 services

controller error

routing on

telemetry on

plc-bridge off

events on

SRC

4 services

runtime off

registry on

watcher error

proxy on

Devices

Hosts and their aggregate Podman workload state

Device	IP address	Status	Services	Last seen
wms-app-01	10.40.2.11	Online	4	now
wcs-edge-01	10.40.2.18	Degraded	4	12s
src-worker-02	10.40.3.24	Offline	4	2m
print-node-01	10.40.4.31	Offline	2	18m
dispatch-02	10.40.4.36	Degraded	4	34s

Heatmap services only

Group Podman workloads by service family and keep tile positions stable so recurring hotspots become spatially memorable.

Never rely on colour alone

Every cell retains a written state and value. Show the observation source and recency once monitoring is wired to Podman.

Actions

Button
Button group
Action button
Toggle

Inputs

Input
Textarea
Select
Checkbox
Radio
Switch
Field

Navigation

Breadcrumb
Tabs
Sidebar
Navbar
Command

Feedback

Badge
Dialog
Popover
Tooltip
Skeleton
Empty state

Data & layout

Card
Table
Data table
Resizable panes
Scroll area

10 · Product proof

Editor laboratory

The warehouse direction must prove itself against the actual label-design workspace—not only generic components. Change tokens above, then judge the whole editor composition here before migrating a recipe into production.

Layers

Shipping barcode

Order number

Destination

Route code

Assets

ZPL editor

^XA

^PW812

^LL1259

^FO120,96^BY3

^BCN,160,Y,N,N

^FD423031319050^FS

^XZ

Dispatch / 04

SYD → MEL

Recipient

Kite Warehouse

Order

#319050

4 230313 190505

Inspector

Position

Rotation Scale

Show grid

11 · Interaction

State matrix

Every interactive recipe accounts for the same predictable states.

State	Signal	Rule
Rest	Structure	Clear affordance without demanding attention
Hover	Surface + cursor	Preview interactivity; never reveal required information only on hover
Focus	2–3px ring	Keyboard focus remains visible against adjacent surfaces
Active	1px compression	Immediate tactile acknowledgement
Disabled	50% opacity	Use only when the reason is discoverable
Invalid	Danger border + copy	Explain both problem and recovery

12 · Quality

Accessibility is a visual choice

WCAG targets are the floor; predictable interaction and resilient communication are the design outcome.

Contrast

Body copy targets 4.5:1. Large text and essential non-text controls target at least 3:1.

Keyboard

Focus is never removed. Order follows the visible layout, and icon-only controls retain accessible names.

Redundant cues

Colour is reinforced through copy, icon, position, or pattern—especially in charts, risk, and validation.

Light

5.46:1

Lowest verified text pair · WCAG AA

Dark

7.56:1

Lowest verified text pair · WCAG AA

Light · high contrast

5.46:1

Lowest verified text pair · WCAG AA

Dark · high contrast

7.88:1

Lowest verified text pair · WCAG AA

High contrast is a dedicated theme variant, not an automatic saturation boost.

Both high-contrast modifiers inherit the normal semantic theme, then deliberately strengthen surfaces, borders, focus, and essential text pairs.

13 · Contract

Core token explorer

The small required vocabulary every Kite theme implements. Product-specific editor, chart, and risk roles are optional extensions.

Token	Type	Resolved value
semantic.color.surface.canvas	color	`oklch(1 0 0)`
semantic.color.surface.secondary	color	`oklch(0.91 0 0)`
semantic.color.surface.muted	color	`oklch(0.95 0 0)`
semantic.color.surface.accent	color	`oklch(0.94 0 0)`
semantic.color.text.default	color	`oklch(0.25 0 0)`
semantic.color.text.on-primary	color	`oklch(1 0 0)`
semantic.color.text.on-secondary	color	`oklch(0.25 0 0)`
semantic.color.text.muted	color	`oklch(0.48 0 0)`
semantic.color.text.on-accent	color	`oklch(0.25 0 0)`
semantic.color.action.primary	color	`oklch(0.35 0 0)`
semantic.color.border.default	color	`oklch(0.73 0 0)`
semantic.color.focus.ring	color	`oklch(0.5 0 0)`
semantic.color.status.danger	color	`oklch(0.470333 0.180405 27.841)`
semantic.color.status.success-surface	color	`oklch(0.906887 0.072817 135.934 / 0.33)`
semantic.color.status.success-text	color	`oklch(0.373041 0.107178 148.286)`
semantic.color.status.warning-surface	color	`oklch(0.744451 0.179766 55.811)`
semantic.color.status.warning-text	color	`oklch(0.188933 0.025871 49.055)`
semantic.color.status.info-surface	color	`oklch(0.52 0.06 244)`
semantic.color.status.info-text	color	`oklch(1 0 0)`