{
  "$schema": "https://design-tokens.github.io/community-group/format/",
  "$description": "Magellos designspråk som maskinläsbara tokens. Källa för människor och AI-agenter som skapar webb, dokument, presentationer, bilder och sociala medier. CSS-tokens finns i styleguide/css/magello.css och ska hållas i synk med den här filen.",
  "version": "0.1.0",
  "color": {
    "neutral": {
      "black": {
        "value": "#000000",
        "css": "--mg-black",
        "role": "Brödtext och rubriker i löpande innehåll"
      },
      "white": {
        "value": "#FFFFFF",
        "css": "--mg-white",
        "role": "Bakgrund, ytor ovanpå foto"
      },
      "text-2": {
        "value": "#4C4A4A",
        "css": "--mg-text-2",
        "role": "Underrubriker, ingresser och sekundär text"
      },
      "rose-50": {
        "value": "#F7F3F3",
        "css": "--mg-rose-50",
        "role": "Ljusaste bakgrund, faktarutor, tabellband"
      },
      "rose-100": {
        "value": "#F4EBEB",
        "css": "--mg-rose-100",
        "role": "Signaturytan (header), sektionsbakgrund, textrutor"
      },
      "rose-200": {
        "value": "#E3D6D6",
        "css": "--mg-rose-200",
        "role": "Sekundär knapp, tabellrubrik, ljusa fyllnader"
      },
      "rose-300": {
        "value": "#DED4D4",
        "css": "--mg-rose-300",
        "role": "Hover på sekundär knapp, tabellsummering"
      },
      "grey-300": {
        "value": "#BFBFBF",
        "css": "--mg-grey-300",
        "role": "Diskreta etiketter, årtal, brödsmula. Inte för brödtext"
      }
    },
    "accent": {
      "magenta": {
        "value": "#EC008C",
        "css": "--mg-magenta",
        "role": "Primär accent: logotyp, primär knapp, H2, länkar, utvalda ord"
      },
      "blue": {
        "value": "#31ABE2",
        "css": "--mg-blue",
        "role": "Ikoner, processteg, info"
      },
      "orange": {
        "value": "#F9B804",
        "css": "--mg-orange",
        "role": "Ikoner, processteg"
      },
      "red": {
        "value": "#E3012F",
        "css": "--mg-red",
        "role": "Ikoner, processteg, fel"
      },
      "yellow": {
        "value": "#FFDC00",
        "css": "--mg-yellow",
        "role": "Ikoner, processteg, varning"
      },
      "green": {
        "value": "#1BA660",
        "css": "--mg-green",
        "role": "Ikoner, processteg, klart/lyckat"
      }
    },
    "usage": {
      "accentAsFillOnly": true,
      "magentaForLargeAreasWithText": false,
      "maxAccentPerComponent": 1,
      "stepsMayMixAccents": true
    }
  },
  "font": {
    "head": {
      "family": "Roboto Condensed",
      "fallback": "Arial Narrow, Arial, sans-serif",
      "weights": [
        400,
        500,
        700
      ],
      "css": "--mg-font-head",
      "use": "Rubriker, underrubriker, etiketter, knappar, siffror som blickfång"
    },
    "body": {
      "family": "Roboto",
      "fallback": "system-ui, Arial, sans-serif",
      "weights": [
        400,
        500,
        700
      ],
      "italic": [
        400
      ],
      "css": "--mg-font-body",
      "use": "Brödtext, tabeller, listor, sidfot"
    },
    "code": {
      "family": "Consolas",
      "fallback": "ui-monospace, Menlo, monospace",
      "css": "--mg-font-code",
      "use": "Kod i tekniska dokument"
    },
    "source": "https://fonts.google.com/specimen/Roboto+Condensed",
    "special": {
      "family": "Kattux Abc 20",
      "fallback": "Roboto Condensed, Arial Narrow, sans-serif",
      "weights": [400],
      "caseNote": "Bara versaler, gemener ritas som versaler",
      "files": {
        "otf": "fonts/KattuxAbc-Regular.otf",
        "ttf": "fonts/KattuxAbc-Regular.ttf",
        "woff2": "fonts/KattuxAbc-Regular.woff2",
        "woff": "fonts/KattuxAbc-Regular.woff"
      },
      "use": "Specialtypsnitt för speciella tillfällen, främst PowerPoint: ett kort budskap eller citat. Se styleguide/typsnitt.html",
      "missingGlyphs": "Ü ü ß € — ø æ och de flesta accenter utöver Á É á é Å Ä Ö",
      "inMagelloCss": false
    }
  },
  "type": {
    "$note": "Faktor = storlek relativt brödtext. Web är rem, tryck är pt. Rubrik: tätt radavstånd, brödtext: luftigt.",
    "web": {
      "body": {
        "size": "1.125rem",
        "px": 18,
        "lineHeight": 1.6,
        "font": "body",
        "weight": 400
      },
      "h1": {
        "font": "head",
        "weight": 500,
        "size": "clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem)"
      },
      "display": {
        "font": "head",
        "weight": 700,
        "size": "clamp(3.2rem, 2rem + 5vw, 6.5rem)",
        "note": "Sidtitel (DocTitle/ingång)"
      },
      "subtitle": {
        "font": "head",
        "weight": 400,
        "size": "clamp(1.1rem, 1rem + .5vw, 1.35rem)",
        "color": "text-2"
      },
      "h2": {
        "font": "head",
        "weight": 500,
        "size": "clamp(1.5rem, 1.35rem + .6vw, 1.8rem)",
        "color": "magenta",
        "note": "Sektionsrubrik. Svart (700) inne i löpande artikeltext"
      },
      "h3": {
        "font": "head",
        "weight": 700,
        "size": "clamp(1.15rem, 1.1rem + .25vw, 1.35rem)"
      },
      "kicker": {
        "font": "head",
        "weight": 700,
        "size": ".6875rem",
        "letterSpacing": ".14em",
        "case": "upper",
        "color": "magenta"
      },
      "small": {
        "font": "body",
        "size": ".8125rem"
      }
    },
    "profiles": {
      "standard": "Landningssidor",
      "editorial": "Artiklar, case och textsidor (h1 2–3.2rem, h2 1.4–1.9rem, brödtext radhöjd 1.7)",
      "showcase": "Startsida och komponentsidor (större underrubrik och H3, radhöjd 1.5)"
    },
    "print": {
      "h1": {
        "pt": 36,
        "font": "head",
        "weight": 500,
        "factor": 3.6
      },
      "subtitle": {
        "pt": 22,
        "font": "head",
        "weight": 400,
        "factor": 2.2,
        "letterSpacingPt": 0.75,
        "color": "text-2"
      },
      "h2": {
        "pt": 18,
        "font": "head",
        "weight": 500,
        "factor": 1.8,
        "color": "magenta"
      },
      "h3": {
        "pt": 16,
        "font": "head",
        "weight": 700,
        "factor": 1.6
      },
      "h4": {
        "pt": 14,
        "font": "head",
        "weight": 700,
        "factor": 1.4
      },
      "h5": {
        "pt": 12,
        "font": "head",
        "weight": 700,
        "factor": 1.2
      },
      "h6": {
        "pt": 10,
        "font": "head",
        "weight": 700,
        "factor": 1.0
      },
      "body": {
        "pt": 10,
        "font": "body",
        "weight": 400,
        "lineHeight": 1.15
      },
      "header": {
        "pt": 7
      },
      "footer": {
        "pt": 6.5,
        "color": "grey-300"
      }
    },
    "presentation": {
      "title": {
        "ptMin": 40,
        "ptMax": 54
      },
      "h2": {
        "ptMin": 28,
        "ptMax": 32
      },
      "body": {
        "ptMin": 18
      },
      "absoluteMin": 14
    },
    "special": {
      "font": "special",
      "ptMin": 28,
      "ptRecommended": [44, 66],
      "maxPerSlide": 1,
      "where": ["PowerPoint: Fokus - Rubrik på platta", "PowerPoint: Innehåll - Platta", "Affisch, inbjudan eller sociala medier vid speciella tillfällen"],
      "never": ["brödtext", "listor", "tabeller", "knappar", "navigation", "formulär"]
    }
  },
  "space": {
    "2": 8,
    "3": 12,
    "4": 16,
    "5": 24,
    "6": 36,
    "7": 48,
    "8": 64,
    "9": 96,
    "unit": "px"
  },
  "layout": {
    "contentWidth": 1280,
    "contentWidthNote": "Max-bredd för container inklusive gutter (--mg-wide). Ger 1200 px innehåll på desktop",
    "gutter": {
      "mobile": 20,
      "tablet": 40,
      "desktop": 40
    },
    "sideNavWidth": 192,
    "sideNavClearance": "Containrar får högermarginal --mg-gutter-end så att innehållet aldrig hamnar under sidospåret (> 768 px)",
    "navHeight": 72,
    "navHeightCompact": 56,
    "headerExtension": 48,
    "headerHeight": 120,
    "unit": "px",
    "breakpoints": {
      "tablet": 600,
      "desktop": 1024,
      "mobileMenu": 768,
      "cardGridTwoCol": 900
    },
    "alignment": "Allt innehåll delar vänsterkant med logotypen"
  },
  "motion": {
    "button-hover": {
      "property": "clip-path",
      "duration": "350ms",
      "easing": "ease"
    },
    "card-hover": {
      "property": "clip-path, background",
      "duration": "350ms",
      "easing": "ease"
    },
    "image-hover": {
      "property": "clip-path",
      "duration": "400ms",
      "easing": "ease"
    },
    "header-collapse": {
      "property": "clip-path, padding-bottom",
      "duration": "400ms",
      "easing": "ease"
    },
    "header-rotate": {
      "property": "transform",
      "duration": "600ms",
      "easing": "cubic-bezier(0.4, 0, 0.6, 1)"
    },
    "side-nav-in": {
      "property": "transform, opacity",
      "duration": "420ms / 280ms",
      "delay": "180ms",
      "easing": "cubic-bezier(0, 0, 0.2, 1)"
    },
    "mobile-menu": {
      "property": "transform",
      "duration": "380ms",
      "easing": "cubic-bezier(0, 0, 0.2, 1)"
    },
    "dropdown": {
      "property": "opacity, transform",
      "duration": "180ms",
      "easing": "ease",
      "closeDelay": "220ms"
    },
    "reducedMotion": "Respektera prefers-reduced-motion: inga transitions, hover öppnar inte formen"
  },
  "shape": {
    "$note": "Polygoner i procent av elementets bredd (x) och höjd (y). Ingen kant ska vara exakt horisontell eller vertikal. Hörn avviker 2–7 %. Se assets/shapes/ för SVG.",
    "rules": {
      "deviationPercent": {
        "small": [
          2,
          4
        ],
        "medium": [
          2,
          6
        ],
        "large": [
          3,
          8
        ]
      },
      "hover": "Formen blir något mer rektangulär ('slappnar av')",
      "noExactStraightEdges": true,
      "noRoundedCorners": true,
      "roundException": "Personbilder är runda"
    },
    "polygons": {
      "button": {
        "use": "Knappar, filterflikar",
        "fill": "magenta",
        "points": [
          [
            2,
            5
          ],
          [
            99,
            0
          ],
          [
            100,
            88
          ],
          [
            97,
            100
          ],
          [
            0,
            95
          ]
        ],
        "hover": [
          [
            0,
            2
          ],
          [
            100,
            0
          ],
          [
            99,
            93
          ],
          [
            96,
            100
          ],
          [
            1,
            98
          ]
        ]
      },
      "card": {
        "use": "Text-, bild- och kompakta kort",
        "fill": "white",
        "points": [
          [
            0,
            0
          ],
          [
            100,
            2
          ],
          [
            98,
            96
          ],
          [
            95,
            100
          ],
          [
            3,
            98
          ],
          [
            0,
            4
          ]
        ]
      },
      "offer-card": {
        "use": "Erbjudandekort",
        "fill": "rose-50",
        "points": [
          [
            0,
            0
          ],
          [
            97,
            1
          ],
          [
            100,
            98
          ],
          [
            2,
            100
          ]
        ],
        "hover": [
          [
            1,
            1
          ],
          [
            99,
            0
          ],
          [
            98,
            99
          ],
          [
            0,
            100
          ]
        ]
      },
      "value-card": {
        "use": "Värdekort",
        "fill": "rose-100",
        "points": [
          [
            0,
            0
          ],
          [
            100,
            2
          ],
          [
            98,
            98
          ],
          [
            95,
            100
          ],
          [
            2,
            99
          ],
          [
            0,
            3
          ]
        ]
      },
      "sub-card": {
        "use": "Ingångskort till undersidor",
        "fill": "white",
        "points": [
          [
            2,
            2
          ],
          [
            99,
            0
          ],
          [
            100,
            95
          ],
          [
            97,
            100
          ],
          [
            0,
            98
          ]
        ]
      },
      "infoblock": {
        "use": "Faktaruta i textflödet",
        "fill": "rose-50",
        "points": [
          [
            0,
            0
          ],
          [
            100,
            1
          ],
          [
            99,
            99
          ],
          [
            0,
            100
          ]
        ]
      },
      "callout": {
        "use": "Textruta med pappersflik",
        "fill": "rose-200",
        "points": [
          [
            0,
            6
          ],
          [
            5,
            0
          ],
          [
            92,
            2
          ],
          [
            100,
            9
          ],
          [
            97,
            100
          ],
          [
            3,
            96
          ]
        ]
      },
      "plate": {
        "use": "Vit platta med rubrik ovanpå foto; kontaktkort (rosa)",
        "fill": "white",
        "points": [
          [
            0,
            3
          ],
          [
            4,
            0
          ],
          [
            97,
            2
          ],
          [
            100,
            6
          ],
          [
            98,
            94
          ],
          [
            94,
            100
          ],
          [
            2,
            97
          ],
          [
            0,
            93
          ]
        ]
      },
      "section-rose": {
        "use": "Rosagrå sektion med polygonkanter",
        "fill": "rose-100",
        "points": [
          [
            0,
            3
          ],
          [
            62,
            0
          ],
          [
            100,
            2
          ],
          [
            100,
            97
          ],
          [
            38,
            100
          ],
          [
            0,
            98
          ]
        ]
      },
      "image-a": {
        "use": "Bildbeskärning 4:3",
        "fill": "rose-200",
        "points": [
          [
            7,
            0
          ],
          [
            94,
            2
          ],
          [
            100,
            10
          ],
          [
            98,
            90
          ],
          [
            93,
            100
          ],
          [
            5,
            97
          ],
          [
            0,
            88
          ],
          [
            2,
            8
          ]
        ]
      },
      "image-b": {
        "use": "Bildbeskärning 3:4",
        "fill": "rose-200",
        "points": [
          [
            6,
            0
          ],
          [
            97,
            3
          ],
          [
            100,
            15
          ],
          [
            96,
            96
          ],
          [
            88,
            100
          ],
          [
            2,
            98
          ],
          [
            0,
            84
          ],
          [
            4,
            4
          ]
        ]
      },
      "image-c": {
        "use": "Bildbeskärning 4:3",
        "fill": "rose-200",
        "points": [
          [
            0,
            5
          ],
          [
            4,
            0
          ],
          [
            98,
            2
          ],
          [
            100,
            12
          ],
          [
            96,
            100
          ],
          [
            2,
            96
          ]
        ]
      },
      "case-image": {
        "use": "Bild i case-kort",
        "fill": "rose-200",
        "points": [
          [
            0,
            0
          ],
          [
            97,
            2
          ],
          [
            100,
            8
          ],
          [
            99,
            100
          ],
          [
            0,
            98
          ]
        ],
        "hover": null
      },
      "pill": {
        "use": "Statusetikett",
        "fill": "blue",
        "points": [
          [
            6,
            0
          ],
          [
            94,
            0
          ],
          [
            100,
            50
          ],
          [
            94,
            100
          ],
          [
            6,
            100
          ],
          [
            0,
            50
          ]
        ]
      },
      "diamond": {
        "use": "Markör i tidslinje",
        "fill": "rose-200",
        "points": [
          [
            50,
            0
          ],
          [
            100,
            50
          ],
          [
            50,
            100
          ],
          [
            0,
            50
          ]
        ]
      },
      "hexagon": {
        "use": "Märke, avatar-ram",
        "fill": "green",
        "points": [
          [
            50,
            0
          ],
          [
            100,
            25
          ],
          [
            100,
            75
          ],
          [
            50,
            100
          ],
          [
            0,
            75
          ],
          [
            0,
            25
          ]
        ]
      },
      "side-nav": {
        "use": "Sidospår (pil åt vänster)",
        "fill": "white",
        "points": [
          [
            16,
            0
          ],
          [
            100,
            0
          ],
          [
            100,
            100
          ],
          [
            16,
            100
          ],
          [
            0,
            50
          ]
        ]
      },
      "header": {
        "use": "Signaturytan (header). Sista punkten följer innehållets vänsterkant",
        "fill": "rose-100",
        "points": [
          [
            0,
            0
          ],
          [
            100,
            0
          ],
          [
            100,
            55
          ],
          [
            6,
            100
          ],
          [
            0,
            82
          ]
        ],
        "note": "Hacket i botten ligger vid (innehållets vänsterkant) och är 100 % av headerns höjd"
      },
      "chevron": {
        "use": "Processteg (px för spetsen, 16 px)",
        "fill": "blue",
        "points": [
          [
            1,
            4
          ],
          [
            92,
            1
          ],
          [
            100,
            50
          ],
          [
            92,
            96
          ],
          [
            2,
            100
          ],
          [
            6,
            50
          ]
        ],
        "note": "Första steget har ingen vänsterspets"
      }
    }
  },
  "rules": {
    "noDividerLines": true,
    "allowedHairlines": [
      "tabellceller",
      "formulärfält",
      "mobilmenyns listor"
    ],
    "accentNeverAsBorder": true,
    "noGradients": true,
    "noShadows": true,
    "noRoundedRectangles": true,
    "noDarkMode": true,
    "photosAlwaysGrayscale": true,
    "photoFilter": "grayscale(1) contrast(1.05)",
    "iconsAlwaysFullColor": true,
    "maxOnePrimaryButtonPerView": true,
    "lastProcessStepAlwaysMagenta": true,
    "language": "sv",
    "noExclamationMarks": true,
    "exceptions": [
      "dropdown-lagret har diffus skugga",
      "verktyg och appar har mörk rosagrå topbar #3D2535",
      "skeleton-shimmer, spinner och radioknappar är runda/gradient av funktionella skäl"
    ]
  },
  "icons": {
    "nodes": {
      "file": "graphics/nodes.svg",
      "color": "blue",
      "meaning": "Teknologi, kopplingar"
    },
    "markup": {
      "file": "graphics/markup.svg",
      "color": "blue",
      "meaning": "Kod, digitalt"
    },
    "speak-bouble": {
      "file": "graphics/speak-bouble.svg",
      "color": "green",
      "meaning": "Dialog, kommunikation"
    },
    "timer": {
      "file": "graphics/timer.svg",
      "color": "red",
      "meaning": "Tid, brådska, agile"
    },
    "thumbs-up": {
      "file": "graphics/thumbs-up.svg",
      "color": "green",
      "meaning": "Kvalitet, godkänt"
    },
    "rocket": {
      "file": "graphics/rocket.svg",
      "color": "dark-blue + orange",
      "meaning": "Innovation, lansering"
    },
    "light": {
      "file": "graphics/light.svg",
      "color": "yellow",
      "meaning": "Idé, AI, insikt"
    },
    "arrow-up-right": {
      "file": "graphics/arrow-up-right.svg",
      "color": "blue",
      "meaning": "Tillväxt, länk vidare"
    },
    "cloud-arrow": {
      "file": "graphics/cloud-arrow.svg",
      "color": "red",
      "meaning": "Moln, driftsättning"
    },
    "citation": {
      "file": "graphics/citation.svg",
      "color": "blue",
      "meaning": "Citat-dekor (aldrig fristående)"
    },
    "personliga": {
      "file": "graphics/värdeord/personliga.svg",
      "color": "amber",
      "meaning": "Värdeord"
    },
    "trygga": {
      "file": "graphics/värdeord/trygga.svg",
      "color": "blue",
      "meaning": "Värdeord"
    },
    "kommunikativa": {
      "file": "graphics/värdeord/kommunikativa.svg",
      "color": "magenta",
      "meaning": "Värdeord"
    },
    "lärande": {
      "file": "graphics/värdeord/lärande.svg",
      "color": "green",
      "meaning": "Värdeord"
    }
  },
  "assets": {
    "logos": {
      "full": "logos/magello-magenta.svg",
      "white": "logos/magello-white-transparent-letters.svg",
      "icon": "logos/icon-logotype.svg"
    },
    "photos": "images/black-and-white/",
    "templates": "templates/",
    "officeTemplates": {
      "rule": "Word och PowerPoint utgår alltid från de här mallarna, aldrig från ett tomt dokument. Se docs/office-mallar.md",
      "source": "Filerna i assets/templates/ är originalen",
      "styleguide": ["styleguide/powerpoint.html", "styleguide/word.html"],
      "create": "Människa: dubbelklicka på mallen. Agent: kopiera mallen och byt innehållstyp från template till presentation/document i [Content_Types].xml",
      "powerpoint": {
        "file": "templates/Powerpoint-mall.potx",
        "howto": "templates/Powerpoint-mall-howto.pptx",
        "format": "16:9, 33,867 × 19,05 cm",
        "layouts": {
          "Förstasida": "Första bilden: rubrik, datum, svartvitt foto",
          "Innehåll - Grå bård": "Innehåll med bild eller grafik",
          "Innehåll - Enkel": "Standard för text, tabeller, diagram och processer",
          "Sektion - Röd platta": "Avdelare",
          "Sektion - Gul platta": "Avdelare",
          "Sektion - Grön platta": "Avdelare",
          "Fokus - Rubrik vänster på bild": "Ett budskap över helbild, avslutning",
          "Fokus - Med innehåll": "Ett budskap med kort text",
          "Fokus - Rubrik på platta": "Citat eller kort påstående på färgad platta",
          "Innehåll - Platta": "Kort text på färgad platta",
          "Bild - Stor bild": "Ett foto som fyller bilden",
          "Bilder - Flera": "Fyra bilder",
          "Tom utan rubrik": "Fri yta"
        }
      },
      "word": {
        "file": "templates/Word-mall.dotx",
        "howto": "templates/Word-mall-howto.docx",
        "format": "A4 stående",
        "styles": {
          "No Spacing": { "sv": "Inget avstånd", "alias": "DocTitle", "token": "type.print.h1", "use": "Dokumenttitel, hämtas till sidhuvudet" },
          "Subtitle": { "sv": "Underrubrik", "token": "type.print.subtitle" },
          "Heading 1": { "sv": "Rubrik 1", "token": "type.print.h2", "use": "Avsnittsrubrik, magenta" },
          "Heading 2": { "sv": "Rubrik 2", "token": "type.print.h3" },
          "Heading 3": { "sv": "Rubrik 3", "token": "type.print.h4" },
          "Heading 4": { "sv": "Rubrik 4", "token": "type.print.h5" },
          "Normal": { "sv": "Normal", "token": "type.print.body" },
          "Body Text": { "sv": "Brödtext", "token": "type.print.body" },
          "List Paragraph": { "sv": "Liststycke", "token": "type.print.body" },
          "Tabellformat": { "sv": "Tabellformat", "use": "Text i tabellceller" },
          "Tabellformat vänterjusterat": { "sv": "Tabellformat vänterjusterat", "use": "Siffror i tabellceller (högerjusterad)" }
        },
        "tables": { "Magello - Default": "List Table 4 Accent 5", "Magello - Summary": "Grid Table 5 Dark Accent 5", "Tabell 1": "tabell 1" },
        "code": "Title (alias Code, Consolas)",
        "avoid": ["Titel (bas för Subtitle)"]
      },
      "knownDeviations": "Temafärger och temats typsnitt i mallarna avviker från color och font här. Se docs/office-mallar.md, avsnittet Kända avvikelser"
    }
  }
}