Hüppa sisule
magnus.mägi
Disainisüsteem

Süsteem saidi taga

Elav spetsifikatsioon žetoonidest ja primitiividest, mis hoiavad magnusmagi.com'i koos. Ehitatud Tailwind v4-l CSS-i muutujatega — heledas ja tumedas kõrvuti.

Kogu sait on ehitatud väikesest žetoonide hulgast. Allpool on need lahti — kopeeri, harunda või lihtsalt vaata, kuidas tükid kokku sobivad.

Alused

Värvid

Kuus žetooni juhivad kogu paletti. Iga vastab CSS-i muutujale ja vahetub OS-i värvirežiimiga automaatselt.

  • Taust--background
  • Esiplaan--foreground
  • Tuhm--muted
  • Õrn--subtle
  • Piir--border
  • Rõhk--accent

Tüpograafia

Nunito tekstile, Geist Mono metaandmetele. Suurte tähtedega monole lai tähevahe, pealkirjadele tihe.

H1 · 4xl–6xl · 600

Suur pealkiri

H2 · 2xl–3xl · 600

Sektsiooni pealkiri

Subhead · base · muted

Alapealkiri — pealkirjale järgnev tunnuslause.

Body · sm/base · 1.7

Põhitekst — kasutusel lõikudes, proosas ja pikkades lugemistes.

Mono · xs · 0.18em

MONO · METAANDMED · 0.18EM

Vahede skaala

Tailwindi vaikimisi 4px skaala. Paigutused hingavad 24/40/64 juures. Sektsioonid 80–120 vertikaalrütmis.

  • 14px
  • 28px
  • 312px
  • 416px
  • 624px
  • 832px
  • 1040px
  • 1664px
  • 2080px

Raadius

Pehme kaartidel, terav märgistel. Nupud laenavad kaardi raadiuse.

  • sm
  • md
  • lg
  • xl
  • 2xl
  • full

Liikumine

Sujuv pehmendus, lühikesed kestused. Kogu liikumine austab prefers-reduced-motion'it.

  • duration · 180ms

    tile pop, hover

  • duration · 200ms

    link underline

  • easing · ease-out

    all transitions

Elemendid

Nupud

Lingid

Reasisene link — inline within prose.

Mono link ↗ — used in metadata strips.

Märgid ja sildid

eestiasutajadtööriistad

Kaardid

META · LABEL

Kaardi pealkiri

Kaardid grupeerivad seotud sisu ühe äärisega ja heldete servadega. Hover tõstab rõhu.

META · LABEL

Kaardi pealkiri

Kaardid grupeerivad seotud sisu ühe äärisega ja heldete servadega. Hover tõstab rõhu.

Vormiväljad

Mustrid

Sektsiooni pealkiri
Disainisüsteem

Sektsiooni pealkiri

Alapealkiri — pealkirjale järgnev tunnuslause.

Mono metaandmed
  • 2026 · TALLINN
  • FOUNDER · ENGINEER
  • EN · ET

Põhimõtted

  • 01

    Piirang valiku ees

    Üks kirjapere, üks rõhk, üks rütm. Piirid teevad otsused lihtsaks ja pinna sidusaks.

  • 02

    Loeb nagu proosa

    Tihe rida, helde reavahe, lai tähevahe metaandmetele. Lehekülg peaks olema vaikne.

  • 03

    Aus kahes teemas

    Hele ja tume pole nahad — neil on jagatud kontrastsuhted, rõhu intensiivsus ja varjud. Mõlemad on esmaklassilised.

  • 04

    Liikumine kui kirjavahemärk

    Animatsioon ainult seal, kus see kannab tähendust — puudutus, paljastamine, oleku muutus. Mitte iial dekoratiivne.