Design system · v0.3

Editorial, high ticket, a touch of retro.

One visual language for the AI Leadership app, the handouts and every document. It reads like a good book and works like a good tool.

See the components Principles

Hero slider

Dark photographs, film grain, one call to action.

Slides cross-fade every seven seconds with a slow zoom. Hover and focus pause them; reduced motion stops them.

The brand color

Single source of truth

The app invents nothing.

Colors, type, components and imagery live in this repository. The app links them at a pinned version.

The app shell

01 · Principles

Six rules every page follows

Each font has one job

Latin Modern for titles, reading and labels; Inter for controls; mono for prompts.

One accent

Aubergine marks the action and the current thing. It covers less than 5 % of a page.

Hairlines, not boxes

A 1 px line or space separates areas. Only callouts and prompts have a fill.

Space is the luxury

When a page feels full, remove an element. Make nothing smaller.

Same name, same meaning

A component has the same name in print and on screen.

Print is black and white

Handouts use the classic LaTeX page. Color exists only on screen.

02 · Colors

Ink on paper, one aubergine

The values come live from tokens.css. Switch to dark at the top to see the second theme.

03 · Type

Serif carries meaning, sans carries structure

Display XL · LM Roman 17

The first delegation

Display LG · LM Roman 17

A brief in four parts

Display SM · LM Roman 12

Check the result

Lead · LM Roman 12 italic

An AI agent works as well as the brief it gets. Giving good briefs is a leadership task.

Reading · LM Roman 10

Most teams first use AI like a search engine with nicer sentences. The benefit stays small. The difference starts when you hand over a whole task: with a goal, material, limits and a clear check at the end.

Interface · Inter 15

Next live session on Monday at 18:00. The recording follows in the course area.

Label · LM small capsModule 03 · Unit 2 · 14 min

04 · Controls

Basecoat, in our tokens

shadcn/ui as plain HTML and CSS. Use one brand button per view; everything else stays ink.

Buttons

Badges and keys

LiveYoursRecording EndedSave with ⌘ S

Form

Saved.

Only you see this entry.

This code does not work.

Check it, or ask for a new mail.

No dates yet.

05 · Lesson content

The handout components on screen

Use them inside unit text (.prose). Each one has a counterpart in ki-leadership.cls.

Tip

Start with a task whose result you can check in two minutes.

Caution

Never paste credentials, passwords or API keys into a chat.

Prompt

You prepare our team meetings.
Goal: an agenda for the Monday meeting, one page at most.
Material: the notes of the last three meetings, attached.
Limits: no client names. Send nothing.
Check: every item has one responsible person.

Your task until the next session

Choose one recurring task
Write the brief in four parts
Check the result
Bring one insight to the group

Steps

Goal. Describe the result, not the way.
Material. Attach what a new colleague would need.
Limits. Say what is off limits.
Check. Decide how you recognise a good result.

Table

Check	Question
Facts	Are numbers, names and dates right?
Tone	Does the text sound like you?
Limits	Did the agent do anything off limits?
Benefit	Does the result really save time?