Style Guide

aivika.design · typography system · v2 · May 2026

01 — Типографика · Заголовки

PreviewClassSize · FontWhere
H1 Hero
h1
4.25rem · 68px
Instr.Serif 400
lh 1.06 · ls −0.02em
Hero tile · Start
Software, die Menschen
tile-h1
clamp(44–68px)
Instr.Serif 400
lh 1.02
Start Pos tile H1
Lass uns reden.
k-h2
4rem · 64px
Instr.Serif 400
lh 1.0
Kontakt H2
Werke · Lab
werke-h2
3rem · 48px
Instr.Serif 400
lh 1.0
Werke, Lab H2
Viktoria Karasek
uhh2
2.625rem · 42px
Instr.Serif 400
lh 1.0
Über mich H2
Open Notebook.
tile-h3
2.125rem · 34px
Instr.Serif 400
lh 1.05
Start tiles 2–5
Strategie · Interface
werte-h4
1.375rem · 22px
Inter 500
lh 1.3
Werte H4 · Card title

02 — Типографика · Текст и мета

PreviewClassSize · FontWhere
Fünf Sätze über das Problem genügen.
k-lede
1.1875rem · 19px
Inter 400 · lh 1.45
Kontakt lede
Strategie, Interface und KI-Workflow aus einer Hand.
pos-lede
0.9688rem · 15.5px
Inter 400 · lh 1.55
Start hero lede
Senior UX · KI-augmentiert
role
1.25rem · 20px
Instr.Serif italic
Hero role subtitle
Colell Çakar Design
job — name
0.8438rem · 13.5px
Inter 600
Jobs list name
2025 — heute · Senior Designer
job — meta
0.6875rem · 11px
JetBrains Mono
Jobs dates / role
Viktoria Karasek
nm
0.9063rem · 14.5px
Inter 600 · #7d8694
Identity card name
Hamburg · 53.5°N
sm
0.7813rem · 12.5px
Inter 400
Pills · Tags · captions
04 KANÄLE
t-meta
0.6563rem · 10.5px
JetBrains Mono CAPS
Tile meta · eyebrow
01
nr
0.625rem · 10px
JetBrains Mono · accent
Number prefix
Vollständiges Profil →
go
0.6875rem · 11px
JetBrains Mono
Tile CTA arrow
/in/viktoriakarasek
mono
JetBrains Mono 400
ls: 0
Monospace modifier

03 — Палитра · Основные цвета

bg-base

#0a0e14

bg-card

#0f1520

border

#1c2230

muted-icon

#3a4252

text-dim

#5a6470

text-muted

#7d8694

text-sub

#9aa3b3

text-body

#cdd5e0

text-light

#e9edf2

text-white

#ffffff

accent-blue

oklch(78% .16 230)

accent-green

oklch(60% .15 165)

dot-blue

oklch(56% .18 255)

border-light

#dde1e7 (header)

bg-light

#fafbfc (header)

04 — Словарь классов · User-Friendly Guide

nmIdentity nameИмя в карточке позиционирования (.pos-id) · Inter 600 · 14.5px
roleHero roleПодзаголовок в hero · Instrument Serif italic 20px
goTile CTAСсылка в низу тайла («Зум Lab →») · JetBrains Mono 11px
avAvatarМонограмма-аватар 48px · градиент · Instrument Serif italic
nrAccent numberНомер-префикс (01, 02…) · 10px · акцент-цвет
smCaption smallМелкий серый подзаголовок · Inter 12.5px · #7d8694
byAuthor creditПодпись автора цитаты в Stimmen
icIcon tagМикро-иконка в теге / лейбле
monoMono modifierМодификатор: переключает любой элемент на JetBrains Mono
t-metaTile meta barВерхняя строка тайла («01 — Positionierung») · 10.5px CAPS
tile-h3Tile headingЗаголовок внутри тайлов 2–5 (Start) · 34px · Instr.Serif
h-*Header namespaceh-bar, h-tabs, h-tab, h-nm, h-dot, h-role, h-meta, h-live, h-mono, h-nr, h-id
k-*Kontakt namespacek-h2, k-head, k-body, k-lede, k-lede-em, k-meta, k-meta-b, k-sub
ch-*Channel namespacech-1, ch-n, ch-l, ch-v, ch-arr, channels-1 · Kontakt links
intl-*Intl cardÜber mich · международные строки с флагами
stim-*StimmenБлок отзывов · stim-h, stim-p, stim-by-b, stimh3…
u-*Über mich pageu-hero, u-tshape, u-werte, u-intl, u-tools, u-pilot…
pos-*Positioning tilepos-lede, pos-id, pos-stats · Start hero dark tile

05 — Баги исправлено · Bug Log

pos-lede✓ fixedfont-size 210px → 0.9688rem
mono✓ fixedОбрезанное имя шрифта «"JetBrains Mon|"» → полный font stack
k-lede-em✓ fixedoklch(78%0.16 230) → oklch(78% 0.16 230) — пробел
jobs✓ fixedflex-direction: row → column; margin-top: 60px → 0
Hero Subtitle⚠ duplicateТочная копия pos-lede — те же 15.5px/Inter/#9aa3b3. Ренейм: заменить на pos-lede вручную
avail-d⚠ duplicateДва идентичных стиля — удалить старый вручную в Designer