Materials
Dybde, kant og form — de tre egenskapene som sammen bærer hierarki uten farge.
Elevation
Hierarki kommer fra flate og kant først, så skyggene er tilbakeholdne. Hver elevasjon parres med matchende radius. Systemet skiller bevisst FLATT (hvilende innhold man opererer på) fra ELEVERT (flytende flater uten fast plass i layouten).
Lettest — tooltips
Hevede kort
Popovers og menyer
Modaler og dialoger
Tyngste overlegg
Flatt
Kort, listerader, sidemeny
Brukes for hvilende innhold man OPERERER PÅ — hierarkiet kommer fra kant og flate, ikke skygge. shadow-xs/-sm, uendret i begge tema.
Elevert
Dropdown, popover, modal
Brukes for flytende flater UTEN fast plass i layouten — de MÅ lese som hevet. shadow-md/-lg/-xl, egne (sterkere) verdier i lyst tema siden skygge er eneste dybdekilde der.
Shapes
8px for knapper/felt/brikker, 14px for kort/popovers/menyer, 20px for modaler/paneler. 9999px kun for piller og runde kontroller. Hold én radiusfamilie per flate. Px-verdien under er lest fra det rendrede elementet.
…
…
…
…
Kanter
Tre styrker — bruk den svakeste som fortsatt skiller flaten fra det den ligger på.
Standard — kort, listerader, feltkanter, delelinjer.
Litt sterkere — elevert flate (popover/dropdown-kant) mot en flate som allerede har border.
Sterkest — sjelden, kun der -2 ikke skiller seg godt nok (f.eks. en aktiv kant oppå surface-2).
Landing surface (--lp-*)
Et eget, landingsside-scopet sett. Forsiden og appen har motsatte behov: appen er tett arbeids-UI der dybde er støy, landingssiden er store luftige flater der de samme hårfine kantene leser som flatt papir. Ikke bruk noe herfra inne i appen — «kun landingssiden» gjelder hele settet.
--lp-mock-bg + --lp-mock-elev
Kort inne i et demo-vindu
Ligger på lerretet (--color-bg) rundt.
Bytt tema: i mørkt er dette hvit 5 % over svart, i lyst en ekte hvit flate. Samme formel i begge ville gjort lyst tema grå-på-grå — lys må SPEILE retningen, ikke arve den.
--lp-blob-bg · --lp-blob-opacity · --lp-blob-blur
Organisk bakgrunnsform
Alltid aria-hidden, pointer-events: none og BAK innholdet.
Brukes kun bak demo-vinduene, for å ta bort kulden fra en side som ellers bare er rette kort med hårfine kanter. Hold dem uskarpe nok til at kanten aldri leses som en egen flate.