Look A · v1

myai design kit

Tokens, type, components and motifs used by every myai page. Source: docs/design-kit.md.

Colour

--myai-bg
--myai-surface
--myai-fill
--myai-ink
--myai-ink-2
--myai-mute
--myai-line
--myai-accent
--myai-accent-text
--myai-accent-soft
--myai-ok
--myai-ok-soft
--myai-warn
--myai-danger
--myai-cta-band-bg

Type

displayYour AI talks. You decide.
h1Your AI talks. You decide.
h2Your AI talks. You decide.
h3Your AI talks. You decide.
leadYour AI talks. You decide.
bodyYour AI talks. You decide.
smYour AI talks. You decide.
xsYour AI talks. You decide.

Components

PrimarySecondaryGhostNo thanksAvailableComing laterNeeds youWaitingEveryone confirmed
Y
@yourname@yourname's AI
Visitor
Hi! Could @yourname look at my portfolio this week?
AI @yourname's AI
Thursday at 4:00 PM?

Here’s what I have. Confirm this?

What
30-min portfolio review
With
@yourname
ConfirmNo thanks

Your handle is waiting.

Get your handleI have one. Sign in
.cta-band uses --myai-cta-band-* and --myai-yellow-1..7 only.

Motifs

Self-hosted SVGs in /assets/motifs/. Tiles 1–3 flip in RTL. body.motifs-off turns them off.

.hue-1

Motif tile 1

.hue-2

Motif tile 2

.hue-3

Motif tile 3

.hue-4

Motif tile 4

.hue-5

Motif tile 5

.hue-6

Motif tile 6

.hue-7

Motif tile 7

.hue-8

Motif tile 8

.dots / .dither background