Tokens (JSON)

Grunder

Form

Magello ritar sina former som polygoner där inget är exakt rakt. Formen ger rörelse och skiljer Magello från alla som använder rundade eller perfekt rektangulära rutor.

Princip

Inga exakta kanter

Hörnen avviker några procent från ett perfekt rätblock. Avvikelserna är medvetna och konsekventa, aldrig slumpmässiga.

Fel — perfekt rektangel
Rak, industriell, anonym
Rätt — Magello-polygon
Levande, handgjord, igenkännbar

Så ritar du en ny form

  1. Börja med en rektangel. Den som innehållet skulle få utan formspråk.
  2. Flytta varje hörn 2–7 % bort från sin exakta plats, i olika riktningar. Övre vänster kan sjunka 3 %, övre höger flytta 2 % in från kanten.
  3. Lägg gärna till en femte eller sjätte punkt (ett avfasat hörn) för att ge formen riktning.
  4. Kontrollera att ingen kant blev exakt vågrät eller lodrät. Då är den klar.

Hur mycket ska formen avvika?

StorlekExempelAvvikelse per hörn
LitenEtiketter, pills, ikonramar2–4 %
MedelKnappar, kort, infoblock2–6 %
StorSektioner, hero-plattor, bildytor3–8 %, gärna fler punkter
/* 5-hörnig knapp: inget hörn är 0% eller 100% på båda axlarna */
clip-path: polygon(2% 5%, 99% 0%, 100% 88%, 97% 100%, 0% 95%);

/* Fel: perfekt rektangel */
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);

Formfamiljen

Namngivna former

Varje form har ett namn, ett användningsområde och koordinater i procent. Formerna finns som SVG i assets/shapes/ och som värden i tokens/tokens.json. Håll muspekaren över en form som har hover-läge.

button
Knappar, filterflikar · hover öppnar formen
2,5 99,0 100,88 97,100 0,95
card
Text-, bild- och kompakta kort
0,0 100,2 98,96 95,100 3,98 0,4
offer-card
Erbjudandekort · hover öppnar formen
0,0 97,1 100,98 2,100
value-card
Värdekort
0,0 100,2 98,98 95,100 2,99 0,3
sub-card
Ingångskort till undersidor
2,2 99,0 100,95 97,100 0,98
infoblock
Faktaruta i textflödet
0,0 100,1 99,99 0,100
callout
Textruta med pappersflik
0,6 5,0 92,2 100,9 97,100 3,96
plate
Vit platta med rubrik ovanpå foto; kontaktkort (rosa)
0,3 4,0 97,2 100,6 98,94 94,100 2,97 0,93
section-rose
Rosagrå sektion med polygonkanter
0,3 62,0 100,2 100,97 38,100 0,98
image-a
Bildbeskärning 4:3
7,0 94,2 100,10 98,90 93,100 5,97 0,88 2,8
image-b
Bildbeskärning 3:4
6,0 97,3 100,15 96,96 88,100 2,98 0,84 4,4
image-c
Bildbeskärning 4:3
0,5 4,0 98,2 100,12 96,100 2,96
case-image
Bild i case-kort
0,0 97,2 100,8 99,100 0,98
pill
Statusetikett
6,0 94,0 100,50 94,100 6,100 0,50
diamond
Markör i tidslinje
50,0 100,50 50,100 0,50
hexagon
Märke, avatar-ram
50,0 100,25 100,75 50,100 0,75 0,25
side-nav
Sidospår (pil åt vänster)
16,0 100,0 100,100 16,100 0,50
header
Signaturytan (header). Sista punkten följer innehållets vänsterkant
0,0 100,0 100,55 6,100 0,82
chevron
Processteg (px för spetsen, 16 px)
1,4 92,1 100,50 92,96 2,100 6,50

Alla former visas här i rose-200. Faktisk fyllnadsfärg anges i tokens.json (shape.polygons.*.fill).

Gör
  • Välj en befintlig form innan du skapar en ny
  • Skapa en ny form som variant av en befintlig, med samma skalregel
  • Låt stora element ha fler punkter än små
Gör inte
  • Kopiera en form och ändra den så att den är nästan rak
  • Använda samma form identiskt på alla element på en sida: växla mellan varianter
  • Skära former så att text eller ansikten kapas

Rörelse

Formen öppnas vid hover

När en klickbar polygon hovras blir den mer rektangulär. Den slappnar av. Den försvinner inte och byter inte färg dramatiskt.

Peka härPrimär knappSekundär knapp
LägeKnapp (polygon)
Vila2% 5%, 99% 0%, 100% 88%, 97% 100%, 0% 95%
Hover0% 2%, 100% 0%, 99% 93%, 96% 100%, 1% 98%
Gör
  • Animera clip-path 350–400 ms med ease
  • Låt hover-formen ha samma antal punkter som vilo-formen
  • Stäng av animationen med prefers-reduced-motion
Gör inte
  • Rotera eller skala klickbara former vid hover
  • Byta till rundade hörn vid hover
  • Animera mer än en egenskap utöver bakgrundsfärg

Andra medier

Så använder du formerna utanför webben

Formerna är geometri, inte CSS. I Word, PowerPoint, Figma och tryck byggs de som fria former (Freeform / Redigera punkter).

MediumGör så här
PowerPoint, KeynoteUtgå från Powerpoint-mallen, där layouterna redan har formerna. Behövs fler: importera SVG från assets/shapes/ eller rita en Freeform med punkterna från tokens.json. Låt SVG:n sträckas (den har preserveAspectRatio="none").
Word, PDFUtgå från Word-mallen. Fler former finns sist i Powerpoint-mall-howto.pptx och i Word-mall-howto.docx, eller infoga SVG från assets/shapes/ som bild.
Figma, IllustratorDra in SVG:erna. Koordinaterna är procent av en 100 × 100-ruta, skala till önskad storlek.
Sociala medier, bilderBeskär foton med polygonerna image-a/b/c. Lägg text på en plate, inte direkt på fotot.
Agent som genererar SVGLäs polygonerna ur tokens/tokens.json och skriv <polygon points=…> i en viewBox på 100 × 100.