CraftlumenAI Copilot system

Calm support design for an agent that shows its work.

Warm editorial surfaces frame a precise product interface. Indigo carries trust, violet marks automation, and dark panels hold every decision trace.

Principles

Six constraints keep the interface clear, credible and recognisably Craftlumen.

01
Resolution first
Show the customer outcome before the automation behind it.
02
Explain every action
A tool call, policy check and handoff always leaves a readable trace.
03
Warm outside, precise inside
Editorial page surfaces introduce dark product instruments.
04
One accent
Violet marks the active decision. It never decorates every surface.
05
Figures stay mono
Times, confidence and volume use tabular figures so they never jump.
06
Status is redundant
Colour travels with a word, sign or icon so meaning never depends on hue.

Theme

Light and dark resolve at the token layer, including nested specimens.

Theme controls

Both palettes

lightResolved

Resolution, explained.

Page copy stays calm while 94% CSAT carries the proof.

A raised card on the page surface.

Decision trace

Resolved in 41s

AI action

darkResolved

Resolution, explained.

Page copy stays calm while 94% CSAT carries the proof.

A raised card on the page surface.

Decision trace

Resolved in 41s

AI action

Semantic roles

Surfaces

The page and the things that sit on it. A card lifts, while an alternating band sinks.

Token	Light	Dark	Role
surface	—	—	Page canvas
paper	—	—	Raised surface
sand	—	—	Alternating band
sand-deep	—	—	Inset / track
line	—	—	Hairline rule
line-soft	—	—	Quiet divider

Glass

A frosted card, always paired with backdrop-blur at the call site.

Token	Light	Dark	Role
glass	—	—	Frosted card background
glass-line	—	—	Frosted card edge

Foreground

Four steps, and never more. Anything below `ash` would fail AA at small sizes.

Token	Light	Dark	Role
ink	—	—	Headings
ink-soft	—	—	Strong body
slate	—	—	Body text
ash	—	—	Tertiary text, labels

Brand as ink

Indigo and violet when they act as words or marks on the page. These roles adapt between light and dark themes.

Token	Light	Dark	Role
brand	—	—	Eyebrows, marks
brand-strong	—	—	Emphatic figures
brand-soft	—	—	Checks, secondary marks
accent-ink	—	—	Violet as text
accent-ink-soft	—	—	Violet, quieter
focus	—	—	Focus ring

Tinted chips

Badges and pills: a ground, an edge and a legible foreground, as a set.

Token	Light	Dark	Role
tint-brand	—	—	Indigo chip ground
tint-brand-fg	—	—	Indigo chip text
tint-brand-line	—	—	Indigo chip edge
tint-accent	—	—	Violet chip ground
tint-accent-fg	—	—	Violet chip text
tint-accent-line	—	—	Violet chip edge

Data on the page

Reserved gain/loss roles and a five-slot categorical series, validated for contrast and colour-vision separation.

Token	Light	Dark	Role
gain	—	—	Positive
loss	—	—	Negative
s1	—	—	Series 1
s2	—	—	Series 2
s3	—	—	Series 3
s4	—	—	Series 4
s5	—	—	Series 5

Colour

Indigo supplies authority, violet marks action, and status colours remain reserved.

Indigo — brand

The primary. Deep enough to carry white type at 700 and above.

indigo-50

#F1F0FC

Tint

indigo-100

#E0DDF8

Tint

indigo-200

#C2BBF2

Border on tint

indigo-300

#9E93EA

Muted mark

indigo-400

#7A6CE0

Icon

indigo-500

#5B4FD1

Accent text

indigo-600

#453BB8

Focus ring

indigo-700

#332C8C

Primary button

indigo-800

#241F72

Button hover

indigo-900

#17133D

Dark band

indigo-950

#0C0A28

Deepest band

Violet — accent

Used sparingly: one accent per view. Never a gradient.

violet-100

#F3EEFE

Tint

violet-200

#DCD3FC

Text on dark

violet-300

#C6BAFA

Text on dark, stronger

violet-400

#8E7CF2

Accent mark

violet-500

#6C4FD6

Hover

violet-600

#5B3FBF

Text on light

Dark panels

Stable product surfaces for conversations, decision traces and operational detail.

panel

#0C1714

Panel base

panel-2

#11201B

Panel raised

panel-3

#172A23

Panel hover

panel-line

#22352D

Panel hairline

Component roles

action

#332C8C

Primary fill (Button, Switch, Accordion)

action-hover

#413AA6

Primary fill, hover

action-deep

#0C0A28

Darkest band (Section "deep")

highlight

#8E7CF2

Accent fill (Button "gold", Card hover edge)

highlight-hover

#A596F6

Accent fill, hover

highlight-soft

#C6BAFA

Accent as text on a dark ground

highlight-faint

#DCD3FC

Accent as text, quieter still

on-highlight

#14103A

Ink on a highlight-filled surface

Reserved status

gain

#1B7454

Positive, on light

gain-dk

#2E9E77

Positive, on panel

loss

#B4402B

Negative, on light

loss-dk

#E0684B

Negative, on panel

Typography

Instrument Serif speaks, Inter explains, and IBM Plex Mono records the evidence.

Display scale

Resolution

Every action explained

A handoff with context

Decision trace

Reference

Token	Family	Size / leading	Use
display-xl	Instrument Serif	clamp(2.9rem → 6rem) / 0.94	Hero only
display-lg	Instrument Serif	clamp(2.4rem → 4.1rem) / 0.98	Section headings
display-md	Instrument Serif	clamp(1.9rem → 2.85rem) / 1.04	Sub-headings
display-sm	Instrument Serif	clamp(1.4rem → 1.85rem) / 1.14	Card titles
lede	Inter	clamp(1.06rem → 1.19rem) / 1.62	Standfirst
body	Inter	0.875–0.95rem / 1.6	Paragraph, UI
label-mono	IBM Plex Mono	0.6875rem · 0.16em · caps	Eyebrows, axes
num	IBM Plex Mono	tabular figures	Every figure on the page

Surfaces

A small set of page tones, radii and elevations builds the hierarchy.

Page tones

surfaceCanvas

sandAlternate

paperRaised

indigo-950Deep band

Radius

4px

6px

10px

14px

20px

2xl

28px

Elevation

shadow-xs

Hairline lift — resting cards

shadow-sm

Controls

shadow-md

Card hover

shadow-lg

Floating chips

shadow-xl

Overlays

shadow-panel

Dark product frames

Controls

Pills carry actions; hairlines define fields, cards and disclosure rows.

Buttons and badges

QueuedResolvedHanded offBlocked

Switch, input and identity

Live

Decision trace

Cards, stats and disclosure

Paper

A quiet proof point.

Median resolution41s

Product panel

The agent shows its work.

Only actions allowed by the connected tools and policy rules.

The case is handed to a person with the full trace and a drafted reply.

Marquee

HELPDESKLIVE CHATEMAILCRMWEBHOOKS

Motion

Two curves, patient entrances and a complete reduced-motion path.

Token	Value	Applied to
ease-out-quint	cubic-bezier(0.22, 1, 0.36, 1)	Entrances, reveals, layout
ease-in-out-quart	cubic-bezier(0.76, 0, 0.24, 1)	Loops, sweeps, pulses
Reveal	720ms, y +18px, once	Every section entrance
Count-up	1500ms quintic, once	Headline figures
Path draw	1500ms clip wipe	Time-series lines

Reduced motion removes translation, lands counters immediately, and stops every ambient loop while preserving the final state.

Principles

Resolution first

Explain every action

Warm outside, precise inside

One accent

Figures stay mono

Status is redundant

Theme

Surfaces

Glass

Foreground

Brand as ink

Tinted chips

Data on the page

Colour

Typography

Surfaces

Controls

What does the agent automate?

What happens when confidence is low?

Motion