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?

I say what I want. The AI does it. I check the result.From the mentoring, October 2026

06 · Catalog

Product cards, modules, dates

Membership · Leadership

AI Leadership Circle

Every course, the monthly live sessions and the community.

Yours

Course · Practice

The First Delegation

Give a real task to an AI agent: goal, material, limits, check.

3 of 8 unitsAgents

Course · Practice

Agent Workshop

One day, one agent that does real work for your team.

Available

Module and units

Module 01

Foundations

What an agent is, and what it is not.

Schedule

November 2026

Mon 2 Nov18:00

Live session: The first delegation

AI Leadership Circle · Bring one task you want to delegate.

LiveJoin

Mon 9 Nov

Your team opens

The First Delegation

Opens

07 · App shell

Sidebar, header, content, footer

ai-leadership.community/app

Thursday, 29 October

Good to see you, Alex.

Next live session

Monday at 18:00: The first delegation.

08 · Admin

The same shell, built for work

Numbers, a toolbar over every list, forms in a two-column grid, a media library. Admin pages use the app shell with an Admin group in the sidebar.

128Members

96Active grants

5Products

2Unmapped shop events

Member	Programs	Last sign-in
Alex Morgan [email protected]	leadership-circle	29 Oct 2026
Sam Lee [email protected]	ended	2 Oct 2026

Product

Title, kind and listing. Fields with an asterisk are required.

Title *

Kind

Subtitle

Lesson HTML

<div class="callout"><span class="eyebrow">Tip</span><p>Start small.</p></div>

Listed for people who do not own it

Cancel

Media library

hero-1.jpg2400 × 1340 · 5 variants

hero-3.jpg2400 × 1340 · 5 variants

PDF

handout-03.pdf412 KB

09 · Brand assets

Monogram and share image

The monogram AI in Latin Modern on ink with an aubergine rule. The share image uses the second hero photograph.

icon-512, icon-192, apple-touch-icon (180), favicon.ico (16, 32, 48)

og-default.jpg, 1200 × 630; og-default-de.jpg for German pages

10 · Print

Handouts: the classic LaTeX page in black and white

The class ki-leadership.cls shares names and structure with the web, not the colors.

Sample handout (PDF) Variant with Source Serif