aisukurimu

Design System

Brand v3 — New Style · Quelle: src/styles/global.css

Farb-Tokens

Der kursive Name darunter (z.B. --ak-blueberry) ist der CSS-Variablenname — damit wird die Farbe im Code angesprochen.

Blueberry

--ak-blueberry · #1f1934

Primary Ink

Grape

--ak-grape · #5100ff

Links · Accent · Tags

Lemon

--ak-lemon · #d8ff01

Wurst · Highlight

Hazelnut

--ak-hazelnut · #9e9c95

Muted / Secondary

Cappuccino

--ak-cappuccino · #d9d7ce

Card / Container

Vanilla

--ak-vanilla · #eae8e0

Page Background

Typografie

Hero Title

.hero-title-vanilla iA Writer Mono S 80px / 88px | 5rem / 5,5rem uppercase

H1 — Überschrift

.h1-vanilla iA Writer Mono S Bold 40px / 48px | 2,5rem / 3rem uppercase

H2 — Abschnittstitel

.h2-lcontainer iA Writer Mono S Bold 24px / 32px | 1,5rem / 2rem

H3 — Unterabschnitt

.h3 Public Sans Bold 24px / 1,5em | 1,5rem / 1,5em

Eyebrow Label

.eyebrow iA Writer Mono S Bold 20px / 28px | 1,25rem / 1,75rem uppercase

tag / kategorie

.tag iA Writer Mono S Bold 12px / 16px | 0,75rem / 1rem Grape · lowercase

Fließtext — Die Welt der Bits und Bytes wartet auf dich. Lerne Denken wie ein Hacker.

.p-big Public Sans 16px / 24px | 1rem / 1,5rem

Caption — Kleiner Hinweistext, Bildunterschriften, Meta-Infos.

.caption Public Sans 12px / 18px | 0,75rem / 1,125rem

Link-Text in Grape

.link-big Public Sans 16px / 24px | 1rem / 1,5rem · Grape

Spacing Scale

--sp-xs 0.25rem · 4px

--sp-sm 0.5rem · 8px

--sp-md 1rem · 16px

--sp-lg 1.5rem · 24px

--sp-xl 2rem · 32px

--sp-2xl 3rem · 48px

--sp-3xl 4rem · 64px

--sp-4xl 6rem · 96px

Layout

--container-max · 1200px

--gutter · 24px

Container

Draufsicht von oben:
 █ █ █ █ █
 █         █
 █ [TUER]  █   ← Eingang

background: --ak-hazelnut color: --ak-blueberry border-radius: 4px font: iA Writer Mono S 14px

Navigation & UI-Elemente

Nav Items

Übungen Terminal Projekte