PoetryHub
Dev

Design system

Tokeni semantici, componente DS și convenții vizuale pentru un produs literar, calm și accesibil.

Surse de adevăr

  • tailwind.config.ts — tokeni Tailwind
  • assets/css/main.css — clase utilitare și componente CSS
  • assets/css/color-schemes.css — variabile teme cititor
  • components/ds/ — primitive Vue reutilizabile

Culori semantice

TokenUtilizare
surface-page, surface-raisedFundaluri
content, content-muted, content-softIerarhie text
edge, edge-subtleBorduri
brand, brand-softAccent auriu / CTA
danger, danger-softErori, acțiuni distructive

Componente DS

  • DsBanner — mesaje informative
  • DsEmpty — stări goale
  • DsFleuron — ornament decorativ
  • DsSheet — panou mobil (drawer)
  • DsTabs / DsTab — navigare tab-uri
  • DsSkeleton — loading placeholders

Clase CSS

  • .ds-card, .ds-btn-primary, .ds-btn-secondary
  • .ds-input, .ds-link, .ds-icon-btn
  • .poem-body, .poem-text — corp poezie
  • .section-title, .ds-eyebrow — titluri secțiune

Tipografie & spacing

  • max-w-content (72rem) — shell pagină
  • max-w-reading — lungime optimă citire
  • text-display-sm — titluri hero fluide
  • Shadows: shadow-ds-nav, shadow-ds-card, shadow-ds-popover
  • Radius: rounded-ds-sm … rounded-ds-xl

Storybook

Componentele DS au stories colocate pentru documentație vizuală. Vezi secțiunea Storybook.

Verificare tokeni

npm run check:legacy-tokens   # scripts/check-legacy-tokens.mjs

Script CI care previne reintroducerea scalelor legacy ink / gold / rose.