Prana Studio
Pre ZuzkuKomentáre

Brand & UI · UI direction

Workspace pre jasné myslenie

UI direction nie je úplný design system. Je to pracovný vizuálny mantinel pre prvú verziu Prana Studio workspacu — kompatibilný s brand sheetom aj startup directionom.

Design goal

Workspace, ktorý napomáha mysleniu

Hlavný cieľ je jednoduchý: priestor dosť jasný pre uvažovanie a dosť pokojný pre dobré rozhodovanie. UI redukuje kognitívny šum, nie pridáva.

Jasnosť je dôležitejšia než originalita. Čitateľnosť je dôležitejšia než vizuálne vyjadrenie. Dôvera je dôležitejšia než štýlové triky.

Pravidlo pre v1

Vizuálne tokeny

Paleta

Canvas

#FAF8F4

Surface

#FFFFFF

Surface muted

#F4F0E7

Text primary

#1F1B16

Text secondary

#5B554D

Text muted

#8F887E

Border

#E8E2D6

Sage (brand)

#7A8B6F

Sage soft

#F0EAD9

Clay (warm)

#C7906B

Clay soft

#F7EDE4

Blush

#C99C92

Blush soft

#F4E2DC

Amber

#B88A52

Amber soft

#F2E2CB

Mist

#8FA0AB

Mist soft

#E2E8EC

Ink (interactive)

#3F4A5C

Typografia

Dva fonty, jasná hierarchia

Headings / display

Fraunces — variable serif, optical size axis. Jemne knižný, modernizovaný. Odkazuje na ancient wisdom bez ezoteriky.

Body / UI

Inter — variable sans, najčistejšia screen typografia. Pre dlhé čítanie aj UI elementy.

Scale

H1 48–56 px · H2 32–36 px · H3 18–20 px semibold · Body 17 px regular · Small 14 px. Nikdy text pod 14 px.

Line-height

Body min 1.6, nadpisy 1.05–1.2. Letter-spacing default, žiadne tracking experimenty.

Layout

Princípy rozloženia

Áno

  • Single column reading area, max 720 px text width.
  • Desktop-first, plne responsive na tablet a mobil.
  • Generous whitespace medzi sekciami (64–96 px).
  • Jeden hlavný action na obrazovku.
  • Left-aligned text default, žiadne ornament centrovanie.

Nie

  • ×Crowded dvoj- alebo trojstĺpcové layouty (ak nie sú funkčne nutné).
  • ×Hustý admin-dashboard look.
  • ×Nested cards-on-cards bez priestoru.
  • ×Tiny text pod 14 px.
  • ×Visual compression na úkor čitateľnosti.

Komponenty

Charakter komponentov

Áno

  • Rounded ale nie príliš soft (6 px karty, 4 px buttons).
  • Subtle borders namiesto silných tieňov.
  • Vysoká čitateľnosť, jasné states.
  • Calm hover/focus behavior.
  • Konzistentné spacing scale (8 pt grid).

Nie

  • ×Box-shadow vrstvenie a glow efekty.
  • ×Bouncy / spring animácie.
  • ×Aggressive highlights a saturated states.
  • ×Gamifikované movement (badges, levels).
  • ×Custom over-engineered komponenty pre 1 use case.

Celkový smer

Workspace má pôsobiť ako…

Áno

  • Calm, clean, focused, elegant, readable, spacious.
  • Trustworthy, modern, practical.
  • Jeden accent na obrazovku.
  • Content-first, design follows content.

Nie

  • ×Mystical, noisy, decorative for decoration.
  • ×Vague, overly soft, too playful.
  • ×Too clinical, too corporate, too dashboard-heavy.
  • ×Marketing landing page look.

Internal test

Pred prijatím každej obrazovky

Zoznam siedmich kontrolných otázok. Ak je odpoveď NIE — zjednodušujeme.

  1. 01Pôsobí to ako Prana Studio?
  2. 02Pôsobí to pokojne a dôveryhodne?
  3. 03Je obsah ľahko čitateľný?
  4. 04Je ďalšia akcia zrejmá?
  5. 05Zuzka by sa pri tom v prehliadači cítila pohodlne?
  6. 06Pomáha to Erikovi pohybovať sa rýchlo bez toho, aby produkt pôsobil chaoticky?
  7. 07Je tu niečo vizuálne hlučnejšie, než musí byť?