Designsystem

Stilguide

Jobbmagnets visuella språk. Varje färg, radie och skugga här kommer direkt från appens designtokens (@jobbmagnet/ui) — den här sidan genereras från samma källa, så den kan aldrig hamna ur synk med produkten.

Källa: packages/ui/src/tokens.json → genereras till styles/tokens.css av scripts/gen-tokens.mjs. En kontroll i CI (check-tokens.mjs) fäller bygget om de driftar isär.

Färger & tokens

Alla tokens, direkt ur appens källa.

--bg#f6f7fb

--surface#ffffff

--surface-2#f0f2f7

--border#e6e8ef

--text#0e1116

--text-2#5b6271

--text-3#8a91a1

--brand#ff4d2e

--brand-2#ff7a33

--brand-dark#c93a1f

--brand-soft#fff1ec

--accent#0a2540

--ok#119a59

--warn#b66a00

--danger#d8331f

--info#1f6feb

--shadow-10 1px 2px rgba(15,20,35,.04), 0 1px 3px rgba(15,20,35,.06)

--shadow-20 6px 24px rgba(15,20,35,.10)

--radius14px

--radius-sm10px

--radius-lg20px

--font-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Inter,system-ui,sans-serif

Typografi

Rubrik 1 — Sök jobb med ett tryck

Rubrik 2 — Så funkar det

Rubrik 3 — Flera profiler

Brödtext — Vi fyller i och skickar in ansökan åt dig. Du hittar jobbet du vill ha, Jobbmagnet gör resten.

Dämpad text — sekundär information och bildtexter.

Komponenter

Primär knapp Sekundär Stor knapp

Kort

Surface, border, radie och skugga från tokens.

Populärast Eyebrow