Skip to content
Site volume
Colourway

Tokens

Colour tokens

The 285 colour tokens with their values in the current look.

285 of 285 tokens

Colour tokens
TokenValue in this lookVaries byIn codeDescription
--mk-paperpaper#F5F2ECoklch(0.962 0.009 84.6)colourwaythemecontraststock
Tailwind
bg-paper
TS
hexLook(look).roles​["--mk-paper"]
Swift
MakrTokens.colour(.paper)
The page's paper, Bone or Night.
--mk-paper-sunkenpaper.sunken#ECE9E3oklch(0.935 0.009 84.6)colourwaythemecontraststock
Tailwind
bg-paper-sunken
TS
hexLook(look).roles​["--mk-paper-sunken"]
Swift
MakrTokens.colour(.paperSunken)
Sunken paper, for wells and quiet panels.
--mk-paper-platepaper.plate#FFFFFFoklch(1.000 0.000 0.0)colourwaythemecontraststock
Tailwind
bg-paper-plate
TS
hexLook(look).roles​["--mk-paper-plate"]
Swift
MakrTokens.colour(.paperPlate)
The white plate on the paper, for cards and reading plates.
--mk-paper-hoverpaper.hover#FFFCF6oklch(0.992 0.009 84.6)colourwaythemecontraststock
Tailwind
bg-paper-hover
TS
hexLook(look).roles​["--mk-paper-hover"]
Swift
MakrTokens.colour(.paperHover)
The paper's hover face.
--mk-paper-sunken-hoverpaper.sunken.hover#F6F3EDoklch(0.965 0.009 84.6)colourwaythemecontraststock
Tailwind
bg-paper-sunken-hover
TS
hexLook(look).roles​["--mk-paper-sunken-hover"]
Swift
MakrTokens.colour(.paperSunkenHover)
The sunken paper's hover face.
--mk-paper-plate-hoverpaper.plate.hover#F5F5F5oklch(0.970 0.000 0.0)colourwaythemecontraststock
Tailwind
bg-paper-plate-hover
TS
hexLook(look).roles​["--mk-paper-plate-hover"]
Swift
MakrTokens.colour(.paperPlateHover)
The plate's hover face.
--mk-slabslab#15131Aoklch(0.192 0.014 298.1)colourwaythemecontraststock
Tailwind
bg-slab
TS
hexLook(look).roles​["--mk-slab"]
Swift
MakrTokens.colour(.slab)
The slab: the ink-dark plate for footers, tooltips and proof numbers.
--mk-slab-hoverslab.hover#0E0C13oklch(0.160 0.015 297.8)colourwaythemecontraststock
Tailwind
bg-slab-hover
TS
hexLook(look).roles​["--mk-slab-hover"]
Swift
MakrTokens.colour(.slabHover)
The slab's hover face.
--mk-scrimscrimn/acolourwaythemecontraststock
Tailwind
bg-scrim
TS
hexLook(look).roles​["--mk-scrim"]
Swift
MakrTokens.colour(.scrim)
The scrim behind dialogs and drawers.
--mk-inkink#15131Aoklch(0.192 0.014 298.1)colourwaythemecontraststock
Tailwind
bg-ink
TS
hexLook(look).roles​["--mk-ink"]
Swift
MakrTokens.colour(.ink)
The ink: the darkest text ink of the paper.
--mk-ink-2ink.2#524F54oklch(0.432 0.009 312.2)colourwaythemecontraststock
Tailwind
bg-ink-2
TS
hexLook(look).roles​["--mk-ink-2"]
Swift
MakrTokens.colour(.ink2)
The second ink, for secondary text.
--mk-ink-3ink.3#6B686Boklch(0.521 0.006 325.7)colourwaythemecontraststock
Tailwind
bg-ink-3
TS
hexLook(look).roles​["--mk-ink-3"]
Swift
MakrTokens.colour(.ink3)
The third ink, for the quietest marks.
--mk-ink-displayink.display#15131Aoklch(0.192 0.014 298.1)colourwaythemecontraststock
Tailwind
bg-ink-display
TS
hexLook(look).roles​["--mk-ink-display"]
Swift
MakrTokens.colour(.inkDisplay)
The ink display type prints in.
--mk-ink-disabledink.disabled#888587oklch(0.620 0.005 337.4)colourwaythemecontraststock
Tailwind
bg-ink-disabled
TS
hexLook(look).roles​["--mk-ink-disabled"]
Swift
MakrTokens.colour(.inkDisabled)
The ink of disabled text.
--mk-on-slabon.slab#F5F2ECoklch(0.962 0.009 84.6)colourwaythemecontraststock
Tailwind
bg-on-slab
TS
hexLook(look).roles​["--mk-on-slab"]
Swift
MakrTokens.colour(.onSlab)
Text on the slab.
--mk-on-slab-2on.slab.2#CFCCC8oklch(0.846 0.006 75.4)colourwaythemecontraststock
Tailwind
bg-on-slab-2
TS
hexLook(look).roles​["--mk-on-slab-2"]
Swift
MakrTokens.colour(.onSlab2)
Secondary text on the slab.
--mk-ink-ruleink.rule#888587oklch(0.620 0.005 337.4)colourwaythemecontraststock
Tailwind
bg-ink-rule
TS
hexLook(look).roles​["--mk-ink-rule"]
Swift
MakrTokens.colour(.inkRule)
A rule in the ink.
--mk-keylinekeyline#15131Aoklch(0.192 0.014 298.1)colourwaythemecontraststock
Tailwind
bg-keyline
TS
hexLook(look).roles​["--mk-keyline"]
Swift
MakrTokens.colour(.keyline)
The keyline around plates and frames.
--mk-stock-bonestock.bone · art layer#F5F2ECoklch(0.962 0.009 84.6)nothing
Tailwind
none
TS
hexLook(look).roles​["--mk-stock-bone"]
Swift
MakrTokens.colour(.stockBone)
The bone paper.
--mk-stock-nightstock.night · art layer#141016oklch(0.181 0.014 314.5)nothing
Tailwind
none
TS
hexLook(look).roles​["--mk-stock-night"]
Swift
MakrTokens.colour(.stockNight)
The night paper.
--mk-stock-whitestock.white · art layer#FFFFFFoklch(1.000 0.000 0.0)nothing
Tailwind
none
TS
hexLook(look).roles​["--mk-stock-white"]
Swift
MakrTokens.colour(.stockWhite)
The white paper.
--mk-stock-newsprintstock.newsprint · art layer#E3E6E9oklch(0.923 0.005 247.9)nothing
Tailwind
none
TS
hexLook(look).roles​["--mk-stock-newsprint"]
Swift
MakrTokens.colour(.stockNewsprint)
The newsprint paper.
--mk-stock-pulpstock.pulp · art layer#EFE1C1oklch(0.913 0.045 87.2)nothing
Tailwind
none
TS
hexLook(look).roles​["--mk-stock-pulp"]
Swift
MakrTokens.colour(.stockPulp)
The pulp paper.
--mk-stock-kraftstock.kraft · art layer#C6A176oklch(0.732 0.073 70.5)nothing
Tailwind
none
TS
hexLook(look).roles​["--mk-stock-kraft"]
Swift
MakrTokens.colour(.stockKraft)
The kraft paper.
--mk-ink-mink.m#C31A9Doklch(0.559 0.230 340.1)colourwaytheme
Tailwind
bg-ink-m
TS
hexLook(look).roles​["--mk-ink-m"]
Swift
MakrTokens.colour(.inkM)
Process magenta, the Custom apps line: the ink itself, for art and marks.
--mk-ink-aink.a#00B4EAoklch(0.720 0.141 228.6)colourwaytheme
Tailwind
bg-ink-a
TS
hexLook(look).roles​["--mk-ink-a"]
Swift
MakrTokens.colour(.inkA)
Process aqua, the Software line: the ink itself, for art and marks.
--mk-ink-rink.r#F55E07oklch(0.671 0.201 41.9)colourwaytheme
Tailwind
bg-ink-r
TS
hexLook(look).roles​["--mk-ink-r"]
Swift
MakrTokens.colour(.inkR)
Process red, the Growth line: the ink itself, for art and marks.
--mk-ink-kink.k#15131Aoklch(0.192 0.014 298.1)colourwaytheme
Tailwind
bg-ink-k
TS
hexLook(look).roles​["--mk-ink-k"]
Swift
MakrTokens.colour(.inkK)
The key ink, the Websites line: the ink itself, for art and marks.
--mk-ink-yink.y#FFE500oklch(0.915 0.191 101.0)colourwaytheme
Tailwind
bg-ink-y
TS
hexLook(look).roles​["--mk-ink-y"]
Swift
MakrTokens.colour(.inkY)
The yellow, the one action: the ink itself, for art and marks.
--mk-ink-woodink.wood#D9B27Coklch(0.786 0.084 75.1)colourwaytheme
Tailwind
bg-ink-wood
TS
hexLook(look).roles​["--mk-ink-wood"]
Swift
MakrTokens.colour(.inkWood)
The wood, MAX//OS: the ink itself, for art and marks.
--mk-ink-goink.go#008A4Eoklch(0.556 0.137 155.0)colourwaytheme
Tailwind
bg-ink-go
TS
hexLook(look).roles​["--mk-ink-go"]
Swift
MakrTokens.colour(.inkGo)
The go green, the live dot: the ink itself, for art and marks.
--mk-ink-leadink.lead#C31A9Doklch(0.559 0.230 340.1)colourwaytheme
Tailwind
bg-ink-lead
TS
hexLook(look).roles​["--mk-ink-lead"]
Swift
MakrTokens.colour(.inkLead)
The colourway's lead ink: the ink itself, for art and marks.
--mk-ink-supportink.support#00B4EAoklch(0.720 0.141 228.6)colourwaytheme
Tailwind
bg-ink-support
TS
hexLook(look).roles​["--mk-ink-support"]
Swift
MakrTokens.colour(.inkSupport)
The colourway's support ink: the ink itself, for art and marks.
--mk-ink-spotink.spot#FFE500oklch(0.915 0.191 101.0)colourwaytheme
Tailwind
bg-ink-spot
TS
hexLook(look).roles​["--mk-ink-spot"]
Swift
MakrTokens.colour(.inkSpot)
The colourway's spot ink: the ink itself, for art and marks.
--mk-livelive#008A4Eoklch(0.556 0.137 155.0)colourwaytheme
Tailwind
bg-live
TS
hexLook(look).roles​["--mk-live"]
Swift
MakrTokens.colour(.live)
The live dot of a live status.
--mk-ink-m-solidink.m.solid#C31A9Doklch(0.559 0.230 340.1)colourwaytheme
Tailwind
bg-ink-m-solid
TS
hexLook(look).roles​["--mk-ink-m-solid"]
Swift
MakrTokens.colour(.inkMSolid)
Process magenta, the Custom apps line: a solid fill, for keys and badges.
--mk-ink-m-hoverink.m.hover#B80094oklch(0.529 0.230 339.8)colourwaytheme
Tailwind
bg-ink-m-hover
TS
hexLook(look).roles​["--mk-ink-m-hover"]
Swift
MakrTokens.colour(.inkMHover)
Process magenta, the Custom apps line: the solid fill's hover state.
--mk-ink-m-tintink.m.tint#FFE1F4oklch(0.940 0.041 339.6)colourwaytheme
Tailwind
bg-ink-m-tint
TS
hexLook(look).roles​["--mk-ink-m-tint"]
Swift
MakrTokens.colour(.inkMTint)
Process magenta, the Custom apps line: a pale tint, for large calm areas.
--mk-ink-m-tint-hoverink.m.tint.hover#FFF0F9oklch(0.969 0.020 340.7)colourwaytheme
Tailwind
bg-ink-m-tint-hover
TS
hexLook(look).roles​["--mk-ink-m-tint-hover"]
Swift
MakrTokens.colour(.inkMTintHover)
Process magenta, the Custom apps line: the tint's hover state.
--mk-ink-a-solidink.a.solid#1CBCF2oklch(0.744 0.141 228.4)colourwaytheme
Tailwind
bg-ink-a-solid
TS
hexLook(look).roles​["--mk-ink-a-solid"]
Swift
MakrTokens.colour(.inkASolid)
Process aqua, the Software line: a solid fill, for keys and badges.
--mk-ink-a-hoverink.a.hover#2FC6FCoklch(0.774 0.141 228.2)colourwaytheme
Tailwind
bg-ink-a-hover
TS
hexLook(look).roles​["--mk-ink-a-hover"]
Swift
MakrTokens.colour(.inkAHover)
Process aqua, the Software line: the solid fill's hover state.
--mk-ink-a-tintink.a.tint#D3F1FFoklch(0.941 0.037 227.6)colourwaytheme
Tailwind
bg-ink-a-tint
TS
hexLook(look).roles​["--mk-ink-a-tint"]
Swift
MakrTokens.colour(.inkATint)
Process aqua, the Software line: a pale tint, for large calm areas.
--mk-ink-a-tint-hoverink.a.tint.hover#EAF8FFoklch(0.971 0.018 229.0)colourwaytheme
Tailwind
bg-ink-a-tint-hover
TS
hexLook(look).roles​["--mk-ink-a-tint-hover"]
Swift
MakrTokens.colour(.inkATintHover)
Process aqua, the Software line: the tint's hover state.
--mk-ink-r-solidink.r.solid#CE4C00oklch(0.586 0.178 41.7)colourwaytheme
Tailwind
bg-ink-r-solid
TS
hexLook(look).roles​["--mk-ink-r-solid"]
Swift
MakrTokens.colour(.inkRSolid)
Process red, the Growth line: a solid fill, for keys and badges.
--mk-ink-r-hoverink.r.hover#C04600oklch(0.556 0.169 41.6)colourwaytheme
Tailwind
bg-ink-r-hover
TS
hexLook(look).roles​["--mk-ink-r-hover"]
Swift
MakrTokens.colour(.inkRHover)
Process red, the Growth line: the solid fill's hover state.
--mk-ink-r-tintink.r.tint#FFE5DBoklch(0.940 0.032 42.3)colourwaytheme
Tailwind
bg-ink-r-tint
TS
hexLook(look).roles​["--mk-ink-r-tint"]
Swift
MakrTokens.colour(.inkRTint)
Process red, the Growth line: a pale tint, for large calm areas.
--mk-ink-r-tint-hoverink.r.tint.hover#FFF2EDoklch(0.970 0.016 42.4)colourwaytheme
Tailwind
bg-ink-r-tint-hover
TS
hexLook(look).roles​["--mk-ink-r-tint-hover"]
Swift
MakrTokens.colour(.inkRTintHover)
Process red, the Growth line: the tint's hover state.
--mk-ink-k-solidink.k.solid#15131Aoklch(0.192 0.014 298.1)colourwaytheme
Tailwind
bg-ink-k-solid
TS
hexLook(look).roles​["--mk-ink-k-solid"]
Swift
MakrTokens.colour(.inkKSolid)
The key ink, the Websites line: a solid fill, for keys and badges.
--mk-ink-k-hoverink.k.hover#0E0C13oklch(0.160 0.015 297.8)colourwaytheme
Tailwind
bg-ink-k-hover
TS
hexLook(look).roles​["--mk-ink-k-hover"]
Swift
MakrTokens.colour(.inkKHover)
The key ink, the Websites line: the solid fill's hover state.
--mk-ink-k-tintink.k.tint#ECE9F4oklch(0.940 0.015 298.6)colourwaytheme
Tailwind
bg-ink-k-tint
TS
hexLook(look).roles​["--mk-ink-k-tint"]
Swift
MakrTokens.colour(.inkKTint)
The key ink, the Websites line: a pale tint, for large calm areas.
--mk-ink-k-tint-hoverink.k.tint.hover#F6F3FEoklch(0.970 0.015 298.6)colourwaytheme
Tailwind
bg-ink-k-tint-hover
TS
hexLook(look).roles​["--mk-ink-k-tint-hover"]
Swift
MakrTokens.colour(.inkKTintHover)
The key ink, the Websites line: the tint's hover state.
--mk-ink-y-solidink.y.solid#FFE500oklch(0.915 0.191 101.0)colourwaytheme
Tailwind
bg-ink-y-solid
TS
hexLook(look).roles​["--mk-ink-y-solid"]
Swift
MakrTokens.colour(.inkYSolid)
The yellow, the one action: a solid fill, for keys and badges.
--mk-ink-y-hoverink.y.hover#FFF087oklch(0.946 0.127 101.3)colourwaytheme
Tailwind
bg-ink-y-hover
TS
hexLook(look).roles​["--mk-ink-y-hover"]
Swift
MakrTokens.colour(.inkYHover)
The yellow, the one action: the solid fill's hover state.
--mk-ink-y-tintink.y.tint#F1EDCBoklch(0.940 0.045 101.7)colourwaytheme
Tailwind
bg-ink-y-tint
TS
hexLook(look).roles​["--mk-ink-y-tint"]
Swift
MakrTokens.colour(.inkYTint)
The yellow, the one action: a pale tint, for large calm areas.
--mk-ink-y-tint-hoverink.y.tint.hover#FBF7D5oklch(0.971 0.044 101.7)colourwaytheme
Tailwind
bg-ink-y-tint-hover
TS
hexLook(look).roles​["--mk-ink-y-tint-hover"]
Swift
MakrTokens.colour(.inkYTintHover)
The yellow, the one action: the tint's hover state.
--mk-ink-wood-solidink.wood.solid#D9B27Coklch(0.786 0.084 75.1)colourwaytheme
Tailwind
bg-ink-wood-solid
TS
hexLook(look).roles​["--mk-ink-wood-solid"]
Swift
MakrTokens.colour(.inkWoodSolid)
The wood, MAX//OS: a solid fill, for keys and badges.
--mk-ink-wood-hoverink.wood.hover#E3BC85oklch(0.817 0.084 75.7)colourwaytheme
Tailwind
bg-ink-wood-hover
TS
hexLook(look).roles​["--mk-ink-wood-hover"]
Swift
MakrTokens.colour(.inkWoodHover)
The wood, MAX//OS: the solid fill's hover state.
--mk-ink-wood-tintink.wood.tint#FDE8CBoklch(0.940 0.044 76.0)colourwaytheme
Tailwind
bg-ink-wood-tint
TS
hexLook(look).roles​["--mk-ink-wood-tint"]
Swift
MakrTokens.colour(.inkWoodTint)
The wood, MAX//OS: a pale tint, for large calm areas.
--mk-ink-wood-tint-hoverink.wood.tint.hover#FFF4E4oklch(0.971 0.024 77.5)colourwaytheme
Tailwind
bg-ink-wood-tint-hover
TS
hexLook(look).roles​["--mk-ink-wood-tint-hover"]
Swift
MakrTokens.colour(.inkWoodTintHover)
The wood, MAX//OS: the tint's hover state.
--mk-ink-go-solidink.go.solid#00884Doklch(0.551 0.136 155.1)colourwaytheme
Tailwind
bg-ink-go-solid
TS
hexLook(look).roles​["--mk-ink-go-solid"]
Swift
MakrTokens.colour(.inkGoSolid)
The go green, the live dot: a solid fill, for keys and badges.
--mk-ink-go-hoverink.go.hover#007E47oklch(0.521 0.128 155.2)colourwaytheme
Tailwind
bg-ink-go-hover
TS
hexLook(look).roles​["--mk-ink-go-hover"]
Swift
MakrTokens.colour(.inkGoHover)
The go green, the live dot: the solid fill's hover state.
--mk-ink-go-tintink.go.tint#D5F4DFoklch(0.939 0.043 155.9)colourwaytheme
Tailwind
bg-ink-go-tint
TS
hexLook(look).roles​["--mk-ink-go-tint"]
Swift
MakrTokens.colour(.inkGoTint)
The go green, the live dot: a pale tint, for large calm areas.
--mk-ink-go-tint-hoverink.go.tint.hover#DFFEE9oklch(0.969 0.043 155.9)colourwaytheme
Tailwind
bg-ink-go-tint-hover
TS
hexLook(look).roles​["--mk-ink-go-tint-hover"]
Swift
MakrTokens.colour(.inkGoTintHover)
The go green, the live dot: the tint's hover state.
--mk-ink-lead-solidink.lead.solid#C31A9Doklch(0.559 0.230 340.1)colourwaytheme
Tailwind
bg-ink-lead-solid
TS
hexLook(look).roles​["--mk-ink-lead-solid"]
Swift
MakrTokens.colour(.inkLeadSolid)
The colourway's lead ink: a solid fill, for keys and badges.
--mk-ink-lead-hoverink.lead.hover#B80094oklch(0.529 0.230 339.8)colourwaytheme
Tailwind
bg-ink-lead-hover
TS
hexLook(look).roles​["--mk-ink-lead-hover"]
Swift
MakrTokens.colour(.inkLeadHover)
The colourway's lead ink: the solid fill's hover state.
--mk-ink-lead-tintink.lead.tint#FFE1F4oklch(0.940 0.041 339.6)colourwaytheme
Tailwind
bg-ink-lead-tint
TS
hexLook(look).roles​["--mk-ink-lead-tint"]
Swift
MakrTokens.colour(.inkLeadTint)
The colourway's lead ink: a pale tint, for large calm areas.
--mk-ink-lead-tint-hoverink.lead.tint.hover#FFF0F9oklch(0.969 0.020 340.7)colourwaytheme
Tailwind
bg-ink-lead-tint-hover
TS
hexLook(look).roles​["--mk-ink-lead-tint-hover"]
Swift
MakrTokens.colour(.inkLeadTintHover)
The colourway's lead ink: the tint's hover state.
--mk-ink-support-solidink.support.solid#1CBCF2oklch(0.744 0.141 228.4)colourwaytheme
Tailwind
bg-ink-support-solid
TS
hexLook(look).roles​["--mk-ink-support-solid"]
Swift
MakrTokens.colour(.inkSupportSolid)
The colourway's support ink: a solid fill, for keys and badges.
--mk-ink-support-hoverink.support.hover#2FC6FCoklch(0.774 0.141 228.2)colourwaytheme
Tailwind
bg-ink-support-hover
TS
hexLook(look).roles​["--mk-ink-support-hover"]
Swift
MakrTokens.colour(.inkSupportHover)
The colourway's support ink: the solid fill's hover state.
--mk-ink-support-tintink.support.tint#D3F1FFoklch(0.941 0.037 227.6)colourwaytheme
Tailwind
bg-ink-support-tint
TS
hexLook(look).roles​["--mk-ink-support-tint"]
Swift
MakrTokens.colour(.inkSupportTint)
The colourway's support ink: a pale tint, for large calm areas.
--mk-ink-support-tint-hoverink.support.tint.hover#EAF8FFoklch(0.971 0.018 229.0)colourwaytheme
Tailwind
bg-ink-support-tint-hover
TS
hexLook(look).roles​["--mk-ink-support-tint-hover"]
Swift
MakrTokens.colour(.inkSupportTintHover)
The colourway's support ink: the tint's hover state.
--mk-ink-spot-solidink.spot.solid#FFE500oklch(0.915 0.191 101.0)colourwaytheme
Tailwind
bg-ink-spot-solid
TS
hexLook(look).roles​["--mk-ink-spot-solid"]
Swift
MakrTokens.colour(.inkSpotSolid)
The colourway's spot ink: a solid fill, for keys and badges.
--mk-ink-spot-hoverink.spot.hover#FFF087oklch(0.946 0.127 101.3)colourwaytheme
Tailwind
bg-ink-spot-hover
TS
hexLook(look).roles​["--mk-ink-spot-hover"]
Swift
MakrTokens.colour(.inkSpotHover)
The colourway's spot ink: the solid fill's hover state.
--mk-ink-spot-tintink.spot.tint#F1EDCBoklch(0.940 0.045 101.7)colourwaytheme
Tailwind
bg-ink-spot-tint
TS
hexLook(look).roles​["--mk-ink-spot-tint"]
Swift
MakrTokens.colour(.inkSpotTint)
The colourway's spot ink: a pale tint, for large calm areas.
--mk-ink-spot-tint-hoverink.spot.tint.hover#FBF7D5oklch(0.971 0.044 101.7)colourwaytheme
Tailwind
bg-ink-spot-tint-hover
TS
hexLook(look).roles​["--mk-ink-spot-tint-hover"]
Swift
MakrTokens.colour(.inkSpotTintHover)
The colourway's spot ink: the tint's hover state.
--mk-actionaction#FFE500oklch(0.915 0.191 101.0)colourwaytheme
Tailwind
bg-action
TS
hexLook(look).roles​["--mk-action"]
Swift
MakrTokens.colour(.action)
The action key's face: the yellow, one per view.
--mk-action-hoveraction.hover#FFF087oklch(0.946 0.127 101.3)colourwaytheme
Tailwind
bg-action-hover
TS
hexLook(look).roles​["--mk-action-hover"]
Swift
MakrTokens.colour(.actionHover)
The action key's hover face.
--mk-action-tintaction.tint#F1EDCBoklch(0.940 0.045 101.7)colourwaytheme
Tailwind
bg-action-tint
TS
hexLook(look).roles​["--mk-action-tint"]
Swift
MakrTokens.colour(.actionTint)
A pale action tint.
--mk-on-mon.m#FFFFFFoklch(1.000 0.000 0.0)colourwaytheme
Tailwind
bg-on-m
TS
hexLook(look).roles​["--mk-on-m"]
Swift
MakrTokens.colour(.onM)
Text on Process magenta, the Custom apps line's solid fill.
--mk-ink-m-textink.m.text#840068oklch(0.414 0.179 340.5)colourwaytheme
Tailwind
bg-ink-m-text
TS
hexLook(look).roles​["--mk-ink-m-text"]
Swift
MakrTokens.colour(.inkMText)
Process magenta, the Custom apps line: the text cut, for words in the ink on paper.
--mk-on-aon.a#15131Aoklch(0.192 0.014 298.1)colourwaytheme
Tailwind
bg-on-a
TS
hexLook(look).roles​["--mk-on-a"]
Swift
MakrTokens.colour(.onA)
Text on Process aqua, the Software line's solid fill.
--mk-ink-a-textink.a.text#004F69oklch(0.400 0.079 228.7)colourwaytheme
Tailwind
bg-ink-a-text
TS
hexLook(look).roles​["--mk-ink-a-text"]
Swift
MakrTokens.colour(.inkAText)
Process aqua, the Software line: the text cut, for words in the ink on paper.
--mk-on-ron.r#FFFFFFoklch(1.000 0.000 0.0)colourwaytheme
Tailwind
bg-on-r
TS
hexLook(look).roles​["--mk-on-r"]
Swift
MakrTokens.colour(.onR)
Text on Process red, the Growth line's solid fill.
--mk-ink-r-textink.r.text#802D00oklch(0.414 0.124 42.2)colourwaytheme
Tailwind
bg-ink-r-text
TS
hexLook(look).roles​["--mk-ink-r-text"]
Swift
MakrTokens.colour(.inkRText)
Process red, the Growth line: the text cut, for words in the ink on paper.
--mk-on-kon.k#FFFFFFoklch(1.000 0.000 0.0)colourwaytheme
Tailwind
bg-on-k
TS
hexLook(look).roles​["--mk-on-k"]
Swift
MakrTokens.colour(.onK)
Text on the key ink, the Websites line's solid fill.
--mk-ink-k-textink.k.text#15131Aoklch(0.192 0.014 298.1)colourwaytheme
Tailwind
bg-ink-k-text
TS
hexLook(look).roles​["--mk-ink-k-text"]
Swift
MakrTokens.colour(.inkKText)
The key ink, the Websites line: the text cut, for words in the ink on paper.
--mk-on-yon.y#15131Aoklch(0.192 0.014 298.1)colourwaytheme
Tailwind
bg-on-y
TS
hexLook(look).roles​["--mk-on-y"]
Swift
MakrTokens.colour(.onY)
Text on the yellow, the one action's solid fill.
--mk-on-woodon.wood#15131Aoklch(0.192 0.014 298.1)colourwaytheme
Tailwind
bg-on-wood
TS
hexLook(look).roles​["--mk-on-wood"]
Swift
MakrTokens.colour(.onWood)
Text on the wood, MAX//OS's solid fill.
--mk-ink-wood-textink.wood.text#654306oklch(0.412 0.084 74.8)colourwaytheme
Tailwind
bg-ink-wood-text
TS
hexLook(look).roles​["--mk-ink-wood-text"]
Swift
MakrTokens.colour(.inkWoodText)
The wood, MAX//OS: the text cut, for words in the ink on paper.
--mk-on-goon.go#FFFFFFoklch(1.000 0.000 0.0)colourwaytheme
Tailwind
bg-on-go
TS
hexLook(look).roles​["--mk-on-go"]
Swift
MakrTokens.colour(.onGo)
Text on the go green, the live dot's solid fill.
--mk-ink-go-textink.go.text#00542Eoklch(0.392 0.096 155.5)colourwaytheme
Tailwind
bg-ink-go-text
TS
hexLook(look).roles​["--mk-ink-go-text"]
Swift
MakrTokens.colour(.inkGoText)
The go green, the live dot: the text cut, for words in the ink on paper.
--mk-on-leadon.lead#FFFFFFoklch(1.000 0.000 0.0)colourwaytheme
Tailwind
bg-on-lead
TS
hexLook(look).roles​["--mk-on-lead"]
Swift
MakrTokens.colour(.onLead)
Text on the colourway's lead ink's solid fill.
--mk-ink-lead-textink.lead.text#840068oklch(0.414 0.179 340.5)colourwaytheme
Tailwind
bg-ink-lead-text
TS
hexLook(look).roles​["--mk-ink-lead-text"]
Swift
MakrTokens.colour(.inkLeadText)
The colourway's lead ink: the text cut, for words in the ink on paper.
--mk-on-supporton.support#15131Aoklch(0.192 0.014 298.1)colourwaytheme
Tailwind
bg-on-support
TS
hexLook(look).roles​["--mk-on-support"]
Swift
MakrTokens.colour(.onSupport)
Text on the colourway's support ink's solid fill.
--mk-ink-support-textink.support.text#004F69oklch(0.400 0.079 228.7)colourwaytheme
Tailwind
bg-ink-support-text
TS
hexLook(look).roles​["--mk-ink-support-text"]
Swift
MakrTokens.colour(.inkSupportText)
The colourway's support ink: the text cut, for words in the ink on paper.
--mk-on-spoton.spot#15131Aoklch(0.192 0.014 298.1)colourwaytheme
Tailwind
bg-on-spot
TS
hexLook(look).roles​["--mk-on-spot"]
Swift
MakrTokens.colour(.onSpot)
Text on the colourway's spot ink's solid fill.
--mk-on-actionon.action#15131Aoklch(0.192 0.014 298.1)colourwaytheme
Tailwind
bg-on-action
TS
hexLook(look).roles​["--mk-on-action"]
Swift
MakrTokens.colour(.onAction)
Text on the action key.
--mk-ink-m-keylineink.m.keylinen/acolourwaytheme
Tailwind
bg-ink-m-keyline
TS
hexLook(look).roles​["--mk-ink-m-keyline"]
Swift
MakrTokens.colour(.inkMKeyline)
Process magenta, the Custom apps line: the keyline, for rules and outlines in the ink.
--mk-ink-a-keylineink.a.keyline#15131Aoklch(0.192 0.014 298.1)colourwaytheme
Tailwind
bg-ink-a-keyline
TS
hexLook(look).roles​["--mk-ink-a-keyline"]
Swift
MakrTokens.colour(.inkAKeyline)
Process aqua, the Software line: the keyline, for rules and outlines in the ink.
--mk-ink-r-keylineink.r.keyline#15131Aoklch(0.192 0.014 298.1)colourwaytheme
Tailwind
bg-ink-r-keyline
TS
hexLook(look).roles​["--mk-ink-r-keyline"]
Swift
MakrTokens.colour(.inkRKeyline)
Process red, the Growth line: the keyline, for rules and outlines in the ink.
--mk-ink-k-keylineink.k.keylinen/acolourwaytheme
Tailwind
bg-ink-k-keyline
TS
hexLook(look).roles​["--mk-ink-k-keyline"]
Swift
MakrTokens.colour(.inkKKeyline)
The key ink, the Websites line: the keyline, for rules and outlines in the ink.
--mk-ink-y-keylineink.y.keyline#15131Aoklch(0.192 0.014 298.1)colourwaytheme
Tailwind
bg-ink-y-keyline
TS
hexLook(look).roles​["--mk-ink-y-keyline"]
Swift
MakrTokens.colour(.inkYKeyline)
The yellow, the one action: the keyline, for rules and outlines in the ink.
--mk-ink-wood-keylineink.wood.keyline#15131Aoklch(0.192 0.014 298.1)colourwaytheme
Tailwind
bg-ink-wood-keyline
TS
hexLook(look).roles​["--mk-ink-wood-keyline"]
Swift
MakrTokens.colour(.inkWoodKeyline)
The wood, MAX//OS: the keyline, for rules and outlines in the ink.
--mk-ink-go-keylineink.go.keylinen/acolourwaytheme
Tailwind
bg-ink-go-keyline
TS
hexLook(look).roles​["--mk-ink-go-keyline"]
Swift
MakrTokens.colour(.inkGoKeyline)
The go green, the live dot: the keyline, for rules and outlines in the ink.
--mk-ink-lead-keylineink.lead.keylinen/acolourwaytheme
Tailwind
bg-ink-lead-keyline
TS
hexLook(look).roles​["--mk-ink-lead-keyline"]
Swift
MakrTokens.colour(.inkLeadKeyline)
The colourway's lead ink: the keyline, for rules and outlines in the ink.
--mk-ink-support-keylineink.support.keyline#15131Aoklch(0.192 0.014 298.1)colourwaytheme
Tailwind
bg-ink-support-keyline
TS
hexLook(look).roles​["--mk-ink-support-keyline"]
Swift
MakrTokens.colour(.inkSupportKeyline)
The colourway's support ink: the keyline, for rules and outlines in the ink.
--mk-ink-spot-keylineink.spot.keyline#15131Aoklch(0.192 0.014 298.1)colourwaytheme
Tailwind
bg-ink-spot-keyline
TS
hexLook(look).roles​["--mk-ink-spot-keyline"]
Swift
MakrTokens.colour(.inkSpotKeyline)
The colourway's spot ink: the keyline, for rules and outlines in the ink.
--mk-action-edgeaction.edge#15131Aoklch(0.192 0.014 298.1)colourwaytheme
Tailwind
bg-action-edge
TS
hexLook(look).roles​["--mk-action-edge"]
Swift
MakrTokens.colour(.actionEdge)
The action key's edge and offset.
--mk-action-keylineaction.keyline#15131Aoklch(0.192 0.014 298.1)colourwaytheme
Tailwind
bg-action-keyline
TS
hexLook(look).roles​["--mk-action-keyline"]
Swift
MakrTokens.colour(.actionKeyline)
The action key's keyline.
--mk-ink-m-deepink.m.deep · art layer#510840oklch(0.300 0.120 340.0)colourwaytheme
Tailwind
bg-ink-m-deep
TS
hexLook(look).roles​["--mk-ink-m-deep"]
Swift
MakrTokens.colour(.inkMDeep)
Process magenta, the Custom apps line: the deep cut, for shade in art.
--mk-ink-a-deepink.a.deep · art layer#003345oklch(0.300 0.059 228.5)colourwaytheme
Tailwind
bg-ink-a-deep
TS
hexLook(look).roles​["--mk-ink-a-deep"]
Swift
MakrTokens.colour(.inkADeep)
Process aqua, the Software line: the deep cut, for shade in art.
--mk-ink-r-deepink.r.deep · art layer#511900oklch(0.300 0.091 41.8)colourwaytheme
Tailwind
bg-ink-r-deep
TS
hexLook(look).roles​["--mk-ink-r-deep"]
Swift
MakrTokens.colour(.inkRDeep)
Process red, the Growth line: the deep cut, for shade in art.
--mk-ink-k-deepink.k.deep · art layer#020103oklch(0.076 0.014 309.8)colourwaytheme
Tailwind
bg-ink-k-deep
TS
hexLook(look).roles​["--mk-ink-k-deep"]
Swift
MakrTokens.colour(.inkKDeep)
The key ink, the Websites line: the deep cut, for shade in art.
--mk-ink-y-deepink.y.deep · art layer#352E00oklch(0.300 0.062 100.2)colourwaytheme
Tailwind
bg-ink-y-deep
TS
hexLook(look).roles​["--mk-ink-y-deep"]
Swift
MakrTokens.colour(.inkYDeep)
The yellow, the one action: the deep cut, for shade in art.
--mk-ink-wood-deepink.wood.deep · art layer#3C2A0Doklch(0.300 0.050 76.5)colourwaytheme
Tailwind
bg-ink-wood-deep
TS
hexLook(look).roles​["--mk-ink-wood-deep"]
Swift
MakrTokens.colour(.inkWoodDeep)
The wood, MAX//OS: the deep cut, for shade in art.
--mk-ink-go-deepink.go.deep · art layer#00381Doklch(0.299 0.073 155.6)colourwaytheme
Tailwind
bg-ink-go-deep
TS
hexLook(look).roles​["--mk-ink-go-deep"]
Swift
MakrTokens.colour(.inkGoDeep)
The go green, the live dot: the deep cut, for shade in art.
--mk-ink-lead-deepink.lead.deep · art layer#510840oklch(0.300 0.120 340.0)colourwaytheme
Tailwind
bg-ink-lead-deep
TS
hexLook(look).roles​["--mk-ink-lead-deep"]
Swift
MakrTokens.colour(.inkLeadDeep)
The colourway's lead ink: the deep cut, for shade in art.
--mk-ink-support-deepink.support.deep · art layer#003345oklch(0.300 0.059 228.5)colourwaytheme
Tailwind
bg-ink-support-deep
TS
hexLook(look).roles​["--mk-ink-support-deep"]
Swift
MakrTokens.colour(.inkSupportDeep)
The colourway's support ink: the deep cut, for shade in art.
--mk-ink-spot-deepink.spot.deep · art layer#352E00oklch(0.300 0.062 100.2)colourwaytheme
Tailwind
bg-ink-spot-deep
TS
hexLook(look).roles​["--mk-ink-spot-deep"]
Swift
MakrTokens.colour(.inkSpotDeep)
The colourway's spot ink: the deep cut, for shade in art.
--mk-ink-m-plateink.m.plate#A84F8Eoklch(0.560 0.140 339.8)colourwaythemevolumecontrast
Tailwind
bg-ink-m-plate
TS
hexLook(look).roles​["--mk-ink-m-plate"]
Swift
MakrTokens.colour(.inkMPlate)
Process magenta, the Custom apps line: the plate cut, a reading surface that body text may sit on.
--mk-ink-m-plate-hoverink.m.plate.hover#9E4685oklch(0.529 0.140 339.7)colourwaythemevolumecontrast
Tailwind
bg-ink-m-plate-hover
TS
hexLook(look).roles​["--mk-ink-m-plate-hover"]
Swift
MakrTokens.colour(.inkMPlateHover)
Process magenta, the Custom apps line: the plate cut's hover state.
--mk-ink-a-plateink.a.plate#7CD7FFoklch(0.837 0.104 228.4)colourwaythemevolumecontrast
Tailwind
bg-ink-a-plate
TS
hexLook(look).roles​["--mk-ink-a-plate"]
Swift
MakrTokens.colour(.inkAPlate)
Process aqua, the Software line: the plate cut, a reading surface that body text may sit on.
--mk-ink-a-plate-hoverink.a.plate.hover#98DFFFoklch(0.868 0.083 228.0)colourwaythemevolumecontrast
Tailwind
bg-ink-a-plate-hover
TS
hexLook(look).roles​["--mk-ink-a-plate-hover"]
Swift
MakrTokens.colour(.inkAPlateHover)
Process aqua, the Software line: the plate cut's hover state.
--mk-ink-r-plateink.r.plate#BC5A30oklch(0.581 0.138 42.4)colourwaythemevolumecontrast
Tailwind
bg-ink-r-plate
TS
hexLook(look).roles​["--mk-ink-r-plate"]
Swift
MakrTokens.colour(.inkRPlate)
Process red, the Growth line: the plate cut, a reading surface that body text may sit on.
--mk-ink-r-plate-hoverink.r.plate.hover#B25126oklch(0.551 0.138 42.5)colourwaythemevolumecontrast
Tailwind
bg-ink-r-plate-hover
TS
hexLook(look).roles​["--mk-ink-r-plate-hover"]
Swift
MakrTokens.colour(.inkRPlateHover)
Process red, the Growth line: the plate cut's hover state.
--mk-ink-k-plateink.k.plate#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontrast
Tailwind
bg-ink-k-plate
TS
hexLook(look).roles​["--mk-ink-k-plate"]
Swift
MakrTokens.colour(.inkKPlate)
The key ink, the Websites line: the plate cut, a reading surface that body text may sit on.
--mk-ink-k-plate-hoverink.k.plate.hover#0E0C13oklch(0.160 0.015 297.8)colourwaythemevolumecontrast
Tailwind
bg-ink-k-plate-hover
TS
hexLook(look).roles​["--mk-ink-k-plate-hover"]
Swift
MakrTokens.colour(.inkKPlateHover)
The key ink, the Websites line: the plate cut's hover state.
--mk-ink-y-plateink.y.plate#F7E670oklch(0.916 0.140 101.2)colourwaythemevolumecontrast
Tailwind
bg-ink-y-plate
TS
hexLook(look).roles​["--mk-ink-y-plate"]
Swift
MakrTokens.colour(.inkYPlate)
The yellow, the one action: the plate cut, a reading surface that body text may sit on.
--mk-ink-y-plate-hoverink.y.plate.hover#FFF088oklch(0.946 0.126 101.2)colourwaythemevolumecontrast
Tailwind
bg-ink-y-plate-hover
TS
hexLook(look).roles​["--mk-ink-y-plate-hover"]
Swift
MakrTokens.colour(.inkYPlateHover)
The yellow, the one action: the plate cut's hover state.
--mk-ink-wood-plateink.wood.plate#ECC58Eoklch(0.845 0.084 75.8)colourwaythemevolumecontrast
Tailwind
bg-ink-wood-plate
TS
hexLook(look).roles​["--mk-ink-wood-plate"]
Swift
MakrTokens.colour(.inkWoodPlate)
The wood, MAX//OS: the plate cut, a reading surface that body text may sit on.
--mk-ink-wood-plate-hoverink.wood.plate.hover#F6CF97oklch(0.875 0.084 76.3)colourwaythemevolumecontrast
Tailwind
bg-ink-wood-plate-hover
TS
hexLook(look).roles​["--mk-ink-wood-plate-hover"]
Swift
MakrTokens.colour(.inkWoodPlateHover)
The wood, MAX//OS: the plate cut's hover state.
--mk-ink-lead-plateink.lead.plate#A84F8Eoklch(0.560 0.140 339.8)colourwaythemevolumecontrast
Tailwind
bg-ink-lead-plate
TS
hexLook(look).roles​["--mk-ink-lead-plate"]
Swift
MakrTokens.colour(.inkLeadPlate)
The colourway's lead ink: the plate cut, a reading surface that body text may sit on.
--mk-ink-lead-plate-hoverink.lead.plate.hover#9E4685oklch(0.529 0.140 339.7)colourwaythemevolumecontrast
Tailwind
bg-ink-lead-plate-hover
TS
hexLook(look).roles​["--mk-ink-lead-plate-hover"]
Swift
MakrTokens.colour(.inkLeadPlateHover)
The colourway's lead ink: the plate cut's hover state.
--mk-ink-support-plateink.support.plate#7CD7FFoklch(0.837 0.104 228.4)colourwaythemevolumecontrast
Tailwind
bg-ink-support-plate
TS
hexLook(look).roles​["--mk-ink-support-plate"]
Swift
MakrTokens.colour(.inkSupportPlate)
The colourway's support ink: the plate cut, a reading surface that body text may sit on.
--mk-ink-support-plate-hoverink.support.plate.hover#98DFFFoklch(0.868 0.083 228.0)colourwaythemevolumecontrast
Tailwind
bg-ink-support-plate-hover
TS
hexLook(look).roles​["--mk-ink-support-plate-hover"]
Swift
MakrTokens.colour(.inkSupportPlateHover)
The colourway's support ink: the plate cut's hover state.
--mk-ink-spot-plateink.spot.plate#F7E670oklch(0.916 0.140 101.2)colourwaythemevolumecontrast
Tailwind
bg-ink-spot-plate
TS
hexLook(look).roles​["--mk-ink-spot-plate"]
Swift
MakrTokens.colour(.inkSpotPlate)
The colourway's spot ink: the plate cut, a reading surface that body text may sit on.
--mk-ink-spot-plate-hoverink.spot.plate.hover#FFF088oklch(0.946 0.126 101.2)colourwaythemevolumecontrast
Tailwind
bg-ink-spot-plate-hover
TS
hexLook(look).roles​["--mk-ink-spot-plate-hover"]
Swift
MakrTokens.colour(.inkSpotPlateHover)
The colourway's spot ink: the plate cut's hover state.
--mk-on-m-plateon.m.plate#FFFFFFoklch(1.000 0.000 0.0)colourwaythemevolumecontrast
Tailwind
bg-on-m-plate
TS
hexLook(look).roles​["--mk-on-m-plate"]
Swift
MakrTokens.colour(.onMPlate)
Text on Process magenta, the Custom apps line's plate cut.
--mk-on-a-plateon.a.plate#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontrast
Tailwind
bg-on-a-plate
TS
hexLook(look).roles​["--mk-on-a-plate"]
Swift
MakrTokens.colour(.onAPlate)
Text on Process aqua, the Software line's plate cut.
--mk-on-r-plateon.r.plate#FFFFFFoklch(1.000 0.000 0.0)colourwaythemevolumecontrast
Tailwind
bg-on-r-plate
TS
hexLook(look).roles​["--mk-on-r-plate"]
Swift
MakrTokens.colour(.onRPlate)
Text on Process red, the Growth line's plate cut.
--mk-on-k-plateon.k.plate#FFFFFFoklch(1.000 0.000 0.0)colourwaythemevolumecontrast
Tailwind
bg-on-k-plate
TS
hexLook(look).roles​["--mk-on-k-plate"]
Swift
MakrTokens.colour(.onKPlate)
Text on the key ink, the Websites line's plate cut.
--mk-on-y-plateon.y.plate#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontrast
Tailwind
bg-on-y-plate
TS
hexLook(look).roles​["--mk-on-y-plate"]
Swift
MakrTokens.colour(.onYPlate)
Text on the yellow, the one action's plate cut.
--mk-on-wood-plateon.wood.plate#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontrast
Tailwind
bg-on-wood-plate
TS
hexLook(look).roles​["--mk-on-wood-plate"]
Swift
MakrTokens.colour(.onWoodPlate)
Text on the wood, MAX//OS's plate cut.
--mk-on-lead-plateon.lead.plate#FFFFFFoklch(1.000 0.000 0.0)colourwaythemevolumecontrast
Tailwind
bg-on-lead-plate
TS
hexLook(look).roles​["--mk-on-lead-plate"]
Swift
MakrTokens.colour(.onLeadPlate)
Text on the colourway's lead ink's plate cut.
--mk-on-support-plateon.support.plate#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontrast
Tailwind
bg-on-support-plate
TS
hexLook(look).roles​["--mk-on-support-plate"]
Swift
MakrTokens.colour(.onSupportPlate)
Text on the colourway's support ink's plate cut.
--mk-on-spot-plateon.spot.plate#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontrast
Tailwind
bg-on-spot-plate
TS
hexLook(look).roles​["--mk-on-spot-plate"]
Swift
MakrTokens.colour(.onSpotPlate)
Text on the colourway's spot ink's plate cut.
--mk-surfacesurface#F5F2ECoklch(0.962 0.009 84.6)colourwaythemevolumecontraststockplateline
Tailwind
bg-surface
TS
hexLook(look).roles​["--mk-surface"]
Swift
MakrTokens.colour(.surface)
The surface components print on (follows the nearest plate).
--mk-surface-raisedsurface.raised#FFFFFFoklch(1.000 0.000 0.0)colourwaythemevolumecontraststockplateline
Tailwind
bg-surface-raised
TS
hexLook(look).roles​["--mk-surface-raised"]
Swift
MakrTokens.colour(.surfaceRaised)
A raised surface: popovers, menus, the secondary key face.
--mk-surface-sunkensurface.sunken#ECE9E3oklch(0.935 0.009 84.6)colourwaythemevolumecontraststockplateline
Tailwind
bg-surface-sunken
TS
hexLook(look).roles​["--mk-surface-sunken"]
Swift
MakrTokens.colour(.surfaceSunken)
A sunken surface: tracks, wells, skeletons.
--mk-hoverhover#FFFCF6oklch(0.992 0.009 84.6)colourwaythemevolumecontraststockplateline
Tailwind
bg-hover
TS
hexLook(look).roles​["--mk-hover"]
Swift
MakrTokens.colour(.hover)
The hover face of rows and quiet keys.
--mk-selectedselected#FFE1F4oklch(0.940 0.041 339.6)colourwaythemevolumecontraststockplateline
Tailwind
bg-selected
TS
hexLook(look).roles​["--mk-selected"]
Swift
MakrTokens.colour(.selected)
The selected face: checked boxes, the chosen segment, a pressed toggle.
--mk-controlcontrol#FFFFFFoklch(1.000 0.000 0.0)colourwaythemevolumecontraststockplateline
Tailwind
bg-control
TS
hexLook(look).roles​["--mk-control"]
Swift
MakrTokens.colour(.control)
The face of inputs and controls.
--mk-disableddisabled#ECE9E3oklch(0.935 0.009 84.6)colourwaythemevolumecontraststockplateline
Tailwind
bg-disabled
TS
hexLook(look).roles​["--mk-disabled"]
Swift
MakrTokens.colour(.disabled)
The face of disabled controls.
--mk-texttext#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontraststockplateline
Tailwind
bg-text
TS
hexLook(look).roles​["--mk-text"]
Swift
MakrTokens.colour(.text)
Text on the current plate (re-scoped by every plate).
--mk-text-2text.2#524F54oklch(0.432 0.009 312.2)colourwaythemevolumecontraststockplateline
Tailwind
bg-text-2
TS
hexLook(look).roles​["--mk-text-2"]
Swift
MakrTokens.colour(.text2)
Secondary text on the current plate.
--mk-on-selectedon.selected#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontraststockplateline
Tailwind
bg-on-selected
TS
hexLook(look).roles​["--mk-on-selected"]
Swift
MakrTokens.colour(.onSelected)
Text on the selected face.
--mk-on-controlon.control#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontraststockplateline
Tailwind
bg-on-control
TS
hexLook(look).roles​["--mk-on-control"]
Swift
MakrTokens.colour(.onControl)
Text in controls.
--mk-on-control-2on.control.2#5F5C60oklch(0.479 0.007 317.7)colourwaythemevolumecontraststockplateline
Tailwind
bg-on-control-2
TS
hexLook(look).roles​["--mk-on-control-2"]
Swift
MakrTokens.colour(.onControl2)
Placeholders and secondary text in controls.
--mk-text-displaytext.display#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontraststockplateline
Tailwind
bg-text-display
TS
hexLook(look).roles​["--mk-text-display"]
Swift
MakrTokens.colour(.textDisplay)
Display text on the current plate.
--mk-text-disabledtext.disabled#888587oklch(0.620 0.005 337.4)colourwaythemevolumecontraststockplateline
Tailwind
bg-text-disabled
TS
hexLook(look).roles​["--mk-text-disabled"]
Swift
MakrTokens.colour(.textDisabled)
Disabled text on the current plate.
--mk-rulerule#888587oklch(0.620 0.005 337.4)colourwaythemevolumecontraststockplateline
Tailwind
bg-rule
TS
hexLook(look).roles​["--mk-rule"]
Swift
MakrTokens.colour(.rule)
Structural rules: table heads, dividers.
--mk-control-rulecontrol.rule#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontraststockplateline
Tailwind
bg-control-rule
TS
hexLook(look).roles​["--mk-control-rule"]
Swift
MakrTokens.colour(.controlRule)
Control boundaries, at 3:1 at least.
--mk-rule-softrule.soft#D1CECBoklch(0.853 0.005 67.8)colourwaythemevolumecontraststockplateline
Tailwind
bg-rule-soft
TS
hexLook(look).roles​["--mk-rule-soft"]
Swift
MakrTokens.colour(.ruleSoft)
Decorative rules: rows, soft dividers.
--mk-focusfocus#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontraststockplateline
Tailwind
bg-focus
TS
hexLook(look).roles​["--mk-focus"]
Swift
MakrTokens.colour(.focus)
The focus ring.
--mk-line-fillline.fillvar(--mk-ink-k)colourwaythemevolumecontrastline
Tailwind
bg-line-fill
TS
hexLook(look).roles​["--mk-line-fill"]
Swift
Not in Swift
The current line's fill.
--mk-linelinevar(--mk-ink-k-solid)colourwaythemevolumecontrastline
Tailwind
bg-line
TS
hexLook(look).roles​["--mk-line"]
Swift
Not in Swift
The current line's ink (set by `data-mk-line`).
--mk-line-tintline.tintvar(--mk-ink-k-tint)colourwaythemevolumecontrastline
Tailwind
bg-line-tint
TS
hexLook(look).roles​["--mk-line-tint"]
Swift
Not in Swift
The current line's tint.
--mk-line-plateline.platevar(--mk-ink-k-plate)colourwaythemevolumecontrastline
Tailwind
bg-line-plate
TS
hexLook(look).roles​["--mk-line-plate"]
Swift
Not in Swift
The current line's plate cut.
--mk-line-hoverline.hovervar(--mk-ink-k-hover)colourwaythemevolumecontrastline
Tailwind
bg-line-hover
TS
hexLook(look).roles​["--mk-line-hover"]
Swift
Not in Swift
The current line's hover face.
--mk-linecard-head-surfacelinecard.head.surfacecolor-mix(in oklab, var(--mk-paper) calc(var(--mk-w-quiet) * 100%), var(--mk-line-fill))colourwaythemevolumecontrastline
Tailwind
bg-linecard-head-surface
TS
hexLook(look).roles​["--mk-linecard-head-surface"]
Swift
Not in Swift
A LineCard head: the line's plate from Studio, the stock at Quiet (N8).
--mk-on-lineon.linevar(--mk-on-k)colourwaythemevolumecontrastline
Tailwind
bg-on-line
TS
hexLook(look).roles​["--mk-on-line"]
Swift
Not in Swift
Text on the current line's fill.
--mk-line-textline.textvar(--mk-ink-k-text)colourwaythemevolumecontrastline
Tailwind
bg-line-text
TS
hexLook(look).roles​["--mk-line-text"]
Swift
Not in Swift
The current line's text cut.
--mk-on-line-plateon.line.platevar(--mk-on-k-plate)colourwaythemevolumecontrastline
Tailwind
bg-on-line-plate
TS
hexLook(look).roles​["--mk-on-line-plate"]
Swift
Not in Swift
Text on the current line's plate.
--mk-linecard-head-textlinecard.head.textcolor-mix(in oklab, var(--mk-ink) calc(var(--mk-w-quiet) * 100%), var(--mk-on-line))colourwaythemevolumecontrastline
Tailwind
bg-linecard-head-text
TS
hexLook(look).roles​["--mk-linecard-head-text"]
Swift
Not in Swift
Text on a LineCard head (the plate swaps by volume, N8).
--mk-line-keylineline.keylinevar(--mk-ink-k-keyline)colourwaythemevolumecontrastline
Tailwind
bg-line-keyline
TS
hexLook(look).roles​["--mk-line-keyline"]
Swift
Not in Swift
The current line's keyline.
--mk-line-deepline.deep · art layervar(--mk-ink-k-deep)colourwaythemevolumecontrastline
Tailwind
bg-line-deep
TS
hexLook(look).roles​["--mk-line-deep"]
Swift
Not in Swift
The current line's deep cut.
--mk-band-1band.1 · art layer#C31A9Doklch(0.559 0.230 340.1)colourwaythemevolumecontrast
Tailwind
bg-band-1
TS
hexLook(look).roles​["--mk-band-1"]
Swift
MakrTokens.colour(.band1)
Band 1 of the ink field and the art ramps, by volume.
--mk-band-2band.2 · art layer#FFE1F4oklch(0.940 0.041 339.6)colourwaythemevolumecontrast
Tailwind
bg-band-2
TS
hexLook(look).roles​["--mk-band-2"]
Swift
MakrTokens.colour(.band2)
Band 2 of the ink field and the art ramps, by volume.
--mk-band-3band.3 · art layer#00B4EAoklch(0.720 0.141 228.6)colourwaythemevolumecontrast
Tailwind
bg-band-3
TS
hexLook(look).roles​["--mk-band-3"]
Swift
MakrTokens.colour(.band3)
Band 3 of the ink field and the art ramps, by volume.
--mk-band-4band.4 · art layer#D3F1FFoklch(0.941 0.037 227.6)colourwaythemevolumecontrast
Tailwind
bg-band-4
TS
hexLook(look).roles​["--mk-band-4"]
Swift
MakrTokens.colour(.band4)
Band 4 of the ink field and the art ramps, by volume.
--mk-field-paperfield.paper · art layer#F5F2ECoklch(0.962 0.009 84.6)colourwaythemevolumecontrast
Tailwind
bg-field-paper
TS
hexLook(look).roles​["--mk-field-paper"]
Swift
MakrTokens.colour(.fieldPaper)
The paper under the ink field.
--mk-ov-inkov.ink · art layer#C31A9Doklch(0.559 0.230 340.1)colourwaytheme
Tailwind
bg-ov-ink
TS
hexLook(look).roles​["--mk-ov-ink"]
Swift
MakrTokens.colour(.ovInk)
The second ink on display type.
--mk-sep-csep.c · art layer#00B4EAoklch(0.720 0.141 228.6)colourwaytheme
Tailwind
bg-sep-c
TS
hexLook(look).roles​["--mk-sep-c"]
Swift
MakrTokens.colour(.sepC)
The cyan separation of offset and misregistered art.
--mk-sep-msep.m · art layer#C31A9Doklch(0.559 0.230 340.1)colourwaytheme
Tailwind
bg-sep-m
TS
hexLook(look).roles​["--mk-sep-m"]
Swift
MakrTokens.colour(.sepM)
The magenta separation of offset and misregistered art.
--mk-sep-ysep.y · art layer#FFE500oklch(0.915 0.191 101.0)colourwaytheme
Tailwind
bg-sep-y
TS
hexLook(look).roles​["--mk-sep-y"]
Swift
MakrTokens.colour(.sepY)
The yellow separation of offset and misregistered art.
--mk-sep-ksep.k · art layer#15131Aoklch(0.192 0.014 298.1)colourwaytheme
Tailwind
bg-sep-k
TS
hexLook(look).roles​["--mk-sep-k"]
Swift
MakrTokens.colour(.sepK)
The key separation of offset and misregistered art.
--mk-cover-papercover.paper · art layer#FFFFFFoklch(1.000 0.000 0.0)colourwaytheme
Tailwind
bg-cover-paper
TS
hexLook(look).roles​["--mk-cover-paper"]
Swift
MakrTokens.colour(.coverPaper)
A cover's paper.
--mk-cover-inkcover.ink · art layer#15131Aoklch(0.192 0.014 298.1)colourwaytheme
Tailwind
bg-cover-ink
TS
hexLook(look).roles​["--mk-cover-ink"]
Swift
MakrTokens.colour(.coverInk)
A cover's ink.
--mk-stamp-inkstamp.ink · art layer#840068oklch(0.414 0.179 340.5)colourwaytheme
Tailwind
bg-stamp-ink
TS
hexLook(look).roles​["--mk-stamp-ink"]
Swift
MakrTokens.colour(.stampInk)
The stamp ink.
--mk-3d-m-light3d.m.light · art layer#D76CB7oklch(0.680 0.161 339.9)colourwaytheme
Tailwind
bg-3d-m-light
TS
hexLook(look).roles​["--mk-3d-m-light"]
Swift
MakrTokens.colour(.threeDMLight)
The blocks in Process magenta, the Custom apps line: the lit top band.
--mk-3d-m-fill3d.m.fill · art layer#C31A9Doklch(0.559 0.230 340.1)colourwaytheme
Tailwind
bg-3d-m-fill
TS
hexLook(look).roles​["--mk-3d-m-fill"]
Swift
MakrTokens.colour(.threeDMFill)
The blocks in Process magenta, the Custom apps line: the front band.
--mk-3d-m-shade3d.m.shade · art layer#8F0072oklch(0.439 0.191 340.0)colourwaytheme
Tailwind
bg-3d-m-shade
TS
hexLook(look).roles​["--mk-3d-m-shade"]
Swift
MakrTokens.colour(.threeDMShade)
The blocks in Process magenta, the Custom apps line: the shaded side band.
--mk-3d-m-deep3d.m.deep · art layer#510840oklch(0.300 0.120 340.0)colourwaytheme
Tailwind
bg-3d-m-deep
TS
hexLook(look).roles​["--mk-3d-m-deep"]
Swift
MakrTokens.colour(.threeDMDeep)
The blocks in Process magenta, the Custom apps line: the deep-ink screen.
--mk-3d-m-letter3d.m.letter · art layer#FFFFFFoklch(1.000 0.000 0.0)colourwaytheme
Tailwind
bg-3d-m-letter
TS
hexLook(look).roles​["--mk-3d-m-letter"]
Swift
MakrTokens.colour(.threeDMLetter)
The blocks in Process magenta, the Custom apps line: the letter plate.
--mk-3d-a-light3d.a.light · art layer#82D7FEoklch(0.839 0.099 229.2)colourwaytheme
Tailwind
bg-3d-a-light
TS
hexLook(look).roles​["--mk-3d-a-light"]
Swift
MakrTokens.colour(.threeDALight)
The blocks in Process aqua, the Software line: the lit top band.
--mk-3d-a-fill3d.a.fill · art layer#00B4EAoklch(0.720 0.141 228.6)colourwaytheme
Tailwind
bg-3d-a-fill
TS
hexLook(look).roles​["--mk-3d-a-fill"]
Swift
MakrTokens.colour(.threeDAFill)
The blocks in Process aqua, the Software line: the front band.
--mk-3d-a-shade3d.a.shade · art layer#008CB7oklch(0.598 0.118 228.7)colourwaytheme
Tailwind
bg-3d-a-shade
TS
hexLook(look).roles​["--mk-3d-a-shade"]
Swift
MakrTokens.colour(.threeDAShade)
The blocks in Process aqua, the Software line: the shaded side band.
--mk-3d-a-deep3d.a.deep · art layer#003345oklch(0.300 0.059 228.5)colourwaytheme
Tailwind
bg-3d-a-deep
TS
hexLook(look).roles​["--mk-3d-a-deep"]
Swift
MakrTokens.colour(.threeDADeep)
The blocks in Process aqua, the Software line: the deep-ink screen.
--mk-3d-a-letter3d.a.letter · art layer#003345oklch(0.300 0.059 228.5)colourwaytheme
Tailwind
bg-3d-a-letter
TS
hexLook(look).roles​["--mk-3d-a-letter"]
Swift
MakrTokens.colour(.threeDALetter)
The blocks in Process aqua, the Software line: the letter plate.
--mk-3d-r-light3d.r.light · art layer#FF9E79oklch(0.790 0.127 41.5)colourwaytheme
Tailwind
bg-3d-r-light
TS
hexLook(look).roles​["--mk-3d-r-light"]
Swift
MakrTokens.colour(.threeDRLight)
The blocks in Process red, the Growth line: the lit top band.
--mk-3d-r-fill3d.r.fill · art layer#F55E07oklch(0.671 0.201 41.9)colourwaytheme
Tailwind
bg-3d-r-fill
TS
hexLook(look).roles​["--mk-3d-r-fill"]
Swift
MakrTokens.colour(.threeDRFill)
The blocks in Process red, the Growth line: the front band.
--mk-3d-r-shade3d.r.shade · art layer#BD4600oklch(0.551 0.166 42.1)colourwaytheme
Tailwind
bg-3d-r-shade
TS
hexLook(look).roles​["--mk-3d-r-shade"]
Swift
MakrTokens.colour(.threeDRShade)
The blocks in Process red, the Growth line: the shaded side band.
--mk-3d-r-deep3d.r.deep · art layer#511900oklch(0.300 0.091 41.8)colourwaytheme
Tailwind
bg-3d-r-deep
TS
hexLook(look).roles​["--mk-3d-r-deep"]
Swift
MakrTokens.colour(.threeDRDeep)
The blocks in Process red, the Growth line: the deep-ink screen.
--mk-3d-r-letter3d.r.letter · art layer#511900oklch(0.300 0.091 41.8)colourwaytheme
Tailwind
bg-3d-r-letter
TS
hexLook(look).roles​["--mk-3d-r-letter"]
Swift
MakrTokens.colour(.threeDRLetter)
The blocks in Process red, the Growth line: the letter plate.
--mk-3d-k-light3d.k.light · art layer#3F3C42oklch(0.361 0.011 308.1)colourwaytheme
Tailwind
bg-3d-k-light
TS
hexLook(look).roles​["--mk-3d-k-light"]
Swift
MakrTokens.colour(.threeDKLight)
The blocks in the key ink, the Websites line: the lit top band.
--mk-3d-k-fill3d.k.fill · art layer#15131Aoklch(0.192 0.014 298.1)colourwaytheme
Tailwind
bg-3d-k-fill
TS
hexLook(look).roles​["--mk-3d-k-fill"]
Swift
MakrTokens.colour(.threeDKFill)
The blocks in the key ink, the Websites line: the front band.
--mk-3d-k-shade3d.k.shade · art layer#15131Aoklch(0.192 0.014 298.1)colourwaytheme
Tailwind
bg-3d-k-shade
TS
hexLook(look).roles​["--mk-3d-k-shade"]
Swift
MakrTokens.colour(.threeDKShade)
The blocks in the key ink, the Websites line: the shaded side band.
--mk-3d-k-deep3d.k.deep · art layer#020103oklch(0.076 0.014 309.8)colourwaytheme
Tailwind
bg-3d-k-deep
TS
hexLook(look).roles​["--mk-3d-k-deep"]
Swift
MakrTokens.colour(.threeDKDeep)
The blocks in the key ink, the Websites line: the deep-ink screen.
--mk-3d-k-letter3d.k.letter · art layer#F5F2ECoklch(0.962 0.009 84.6)colourwaytheme
Tailwind
bg-3d-k-letter
TS
hexLook(look).roles​["--mk-3d-k-letter"]
Swift
MakrTokens.colour(.threeDKLetter)
The blocks in the key ink, the Websites line: the letter plate.
--mk-3d-wood-light3d.wood.light · art layer#F7DBB5oklch(0.905 0.059 75.3)colourwaytheme
Tailwind
bg-3d-wood-light
TS
hexLook(look).roles​["--mk-3d-wood-light"]
Swift
MakrTokens.colour(.threeDWoodLight)
The blocks in the wood, MAX//OS: the lit top band.
--mk-3d-wood-fill3d.wood.fill · art layer#D9B27Coklch(0.786 0.084 75.1)colourwaytheme
Tailwind
bg-3d-wood-fill
TS
hexLook(look).roles​["--mk-3d-wood-fill"]
Swift
MakrTokens.colour(.threeDWoodFill)
The blocks in the wood, MAX//OS: the front band.
--mk-3d-wood-shade3d.wood.shade · art layer#B28D58oklch(0.666 0.083 75.5)colourwaytheme
Tailwind
bg-3d-wood-shade
TS
hexLook(look).roles​["--mk-3d-wood-shade"]
Swift
MakrTokens.colour(.threeDWoodShade)
The blocks in the wood, MAX//OS: the shaded side band.
--mk-3d-wood-deep3d.wood.deep · art layer#3C2A0Doklch(0.300 0.050 76.5)colourwaytheme
Tailwind
bg-3d-wood-deep
TS
hexLook(look).roles​["--mk-3d-wood-deep"]
Swift
MakrTokens.colour(.threeDWoodDeep)
The blocks in the wood, MAX//OS: the deep-ink screen.
--mk-3d-wood-letter3d.wood.letter · art layer#3C2A0Doklch(0.300 0.050 76.5)colourwaytheme
Tailwind
bg-3d-wood-letter
TS
hexLook(look).roles​["--mk-3d-wood-letter"]
Swift
MakrTokens.colour(.threeDWoodLetter)
The blocks in the wood, MAX//OS: the letter plate.
--mk-3d-lead-light3d.lead.light · art layer#D76CB7oklch(0.680 0.161 339.9)colourwaytheme
Tailwind
bg-3d-lead-light
TS
hexLook(look).roles​["--mk-3d-lead-light"]
Swift
MakrTokens.colour(.threeDLeadLight)
The blocks in the colourway's lead ink: the lit top band.
--mk-3d-lead-fill3d.lead.fill · art layer#C31A9Doklch(0.559 0.230 340.1)colourwaytheme
Tailwind
bg-3d-lead-fill
TS
hexLook(look).roles​["--mk-3d-lead-fill"]
Swift
MakrTokens.colour(.threeDLeadFill)
The blocks in the colourway's lead ink: the front band.
--mk-3d-lead-shade3d.lead.shade · art layer#8F0072oklch(0.439 0.191 340.0)colourwaytheme
Tailwind
bg-3d-lead-shade
TS
hexLook(look).roles​["--mk-3d-lead-shade"]
Swift
MakrTokens.colour(.threeDLeadShade)
The blocks in the colourway's lead ink: the shaded side band.
--mk-3d-lead-deep3d.lead.deep · art layer#510840oklch(0.300 0.120 340.0)colourwaytheme
Tailwind
bg-3d-lead-deep
TS
hexLook(look).roles​["--mk-3d-lead-deep"]
Swift
MakrTokens.colour(.threeDLeadDeep)
The blocks in the colourway's lead ink: the deep-ink screen.
--mk-3d-lead-letter3d.lead.letter · art layer#FFFFFFoklch(1.000 0.000 0.0)colourwaytheme
Tailwind
bg-3d-lead-letter
TS
hexLook(look).roles​["--mk-3d-lead-letter"]
Swift
MakrTokens.colour(.threeDLeadLetter)
The blocks in the colourway's lead ink: the letter plate.
--mk-3d-support-light3d.support.light · art layer#82D7FEoklch(0.839 0.099 229.2)colourwaytheme
Tailwind
bg-3d-support-light
TS
hexLook(look).roles​["--mk-3d-support-light"]
Swift
MakrTokens.colour(.threeDSupportLight)
The blocks in the colourway's support ink: the lit top band.
--mk-3d-support-fill3d.support.fill · art layer#00B4EAoklch(0.720 0.141 228.6)colourwaytheme
Tailwind
bg-3d-support-fill
TS
hexLook(look).roles​["--mk-3d-support-fill"]
Swift
MakrTokens.colour(.threeDSupportFill)
The blocks in the colourway's support ink: the front band.
--mk-3d-support-shade3d.support.shade · art layer#008CB7oklch(0.598 0.118 228.7)colourwaytheme
Tailwind
bg-3d-support-shade
TS
hexLook(look).roles​["--mk-3d-support-shade"]
Swift
MakrTokens.colour(.threeDSupportShade)
The blocks in the colourway's support ink: the shaded side band.
--mk-3d-support-deep3d.support.deep · art layer#003345oklch(0.300 0.059 228.5)colourwaytheme
Tailwind
bg-3d-support-deep
TS
hexLook(look).roles​["--mk-3d-support-deep"]
Swift
MakrTokens.colour(.threeDSupportDeep)
The blocks in the colourway's support ink: the deep-ink screen.
--mk-3d-support-letter3d.support.letter · art layer#003345oklch(0.300 0.059 228.5)colourwaytheme
Tailwind
bg-3d-support-letter
TS
hexLook(look).roles​["--mk-3d-support-letter"]
Swift
MakrTokens.colour(.threeDSupportLetter)
The blocks in the colourway's support ink: the letter plate.
--mk-3d-key3d.key · art layer#15131Aoklch(0.192 0.014 298.1)colourwaytheme
Tailwind
bg-3d-key
TS
hexLook(look).roles​["--mk-3d-key"]
Swift
MakrTokens.colour(.threeDKey)
The blocks' key line.
--mk-3d-shadow3d.shadow · art layer#15131Aoklch(0.192 0.014 298.1)colourwaytheme
Tailwind
bg-3d-shadow
TS
hexLook(look).roles​["--mk-3d-shadow"]
Swift
MakrTokens.colour(.threeDShadow)
The blocks' contact shadow.
--mk-3d-focus3d.focus · art layer#15131Aoklch(0.192 0.014 298.1)colourwaytheme
Tailwind
bg-3d-focus
TS
hexLook(look).roles​["--mk-3d-focus"]
Swift
MakrTokens.colour(.threeDFocus)
The focus ring around a focused block.
--mk-pair-balloon-paper-bgpair.balloon.paper.bg#F5F2ECoklch(0.962 0.009 84.6)colourwaythemevolumecontrast
Tailwind
bg-pair-balloon-paper-bg
TS
hexLook(look).roles​["--mk-pair-balloon-paper-bg"]
Swift
MakrTokens.colour(.pairBalloonPaperBg)
A sanctioned pair for balloons (paper): the fill.
--mk-pair-balloon-paper-fgpair.balloon.paper.fg#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontrast
Tailwind
bg-pair-balloon-paper-fg
TS
hexLook(look).roles​["--mk-pair-balloon-paper-fg"]
Swift
MakrTokens.colour(.pairBalloonPaperFg)
A sanctioned pair for balloons (paper): the text.
--mk-pair-balloon-white-bgpair.balloon.white.bg#FFFFFFoklch(1.000 0.000 0.0)colourwaythemevolumecontrast
Tailwind
bg-pair-balloon-white-bg
TS
hexLook(look).roles​["--mk-pair-balloon-white-bg"]
Swift
MakrTokens.colour(.pairBalloonWhiteBg)
A sanctioned pair for balloons (white): the fill.
--mk-pair-balloon-white-fgpair.balloon.white.fg#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontrast
Tailwind
bg-pair-balloon-white-fg
TS
hexLook(look).roles​["--mk-pair-balloon-white-fg"]
Swift
MakrTokens.colour(.pairBalloonWhiteFg)
A sanctioned pair for balloons (white): the text.
--mk-pair-balloon-caption-bgpair.balloon.caption.bg#F1EDCBoklch(0.940 0.045 101.7)colourwaythemevolumecontrast
Tailwind
bg-pair-balloon-caption-bg
TS
hexLook(look).roles​["--mk-pair-balloon-caption-bg"]
Swift
MakrTokens.colour(.pairBalloonCaptionBg)
A sanctioned pair for balloons (caption): the fill.
--mk-pair-balloon-caption-fgpair.balloon.caption.fg#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontrast
Tailwind
bg-pair-balloon-caption-fg
TS
hexLook(look).roles​["--mk-pair-balloon-caption-fg"]
Swift
MakrTokens.colour(.pairBalloonCaptionFg)
A sanctioned pair for balloons (caption): the text.
--mk-pair-balloon-inverse-bgpair.balloon.inverse.bg#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontrast
Tailwind
bg-pair-balloon-inverse-bg
TS
hexLook(look).roles​["--mk-pair-balloon-inverse-bg"]
Swift
MakrTokens.colour(.pairBalloonInverseBg)
A sanctioned pair for balloons (inverse): the fill.
--mk-pair-balloon-inverse-fgpair.balloon.inverse.fg#F5F2ECoklch(0.962 0.009 84.6)colourwaythemevolumecontrast
Tailwind
bg-pair-balloon-inverse-fg
TS
hexLook(look).roles​["--mk-pair-balloon-inverse-fg"]
Swift
MakrTokens.colour(.pairBalloonInverseFg)
A sanctioned pair for balloons (inverse): the text.
--mk-pair-balloon-spot-bgpair.balloon.spot.bg#F7E670oklch(0.916 0.140 101.2)colourwaythemevolumecontrast
Tailwind
bg-pair-balloon-spot-bg
TS
hexLook(look).roles​["--mk-pair-balloon-spot-bg"]
Swift
MakrTokens.colour(.pairBalloonSpotBg)
A sanctioned pair for balloons (spot): the fill.
--mk-pair-balloon-spot-fgpair.balloon.spot.fg#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontrast
Tailwind
bg-pair-balloon-spot-fg
TS
hexLook(look).roles​["--mk-pair-balloon-spot-fg"]
Swift
MakrTokens.colour(.pairBalloonSpotFg)
A sanctioned pair for balloons (spot): the text.
--mk-pair-caption-narration-bgpair.caption.narration.bg#F1EDCBoklch(0.940 0.045 101.7)colourwaythemevolumecontrast
Tailwind
bg-pair-caption-narration-bg
TS
hexLook(look).roles​["--mk-pair-caption-narration-bg"]
Swift
MakrTokens.colour(.pairCaptionNarrationBg)
A sanctioned pair for captions (narration): the fill.
--mk-pair-caption-narration-fgpair.caption.narration.fg#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontrast
Tailwind
bg-pair-caption-narration-fg
TS
hexLook(look).roles​["--mk-pair-caption-narration-fg"]
Swift
MakrTokens.colour(.pairCaptionNarrationFg)
A sanctioned pair for captions (narration): the text.
--mk-pair-caption-place-bgpair.caption.place.bg#F5F2ECoklch(0.962 0.009 84.6)colourwaythemevolumecontrast
Tailwind
bg-pair-caption-place-bg
TS
hexLook(look).roles​["--mk-pair-caption-place-bg"]
Swift
MakrTokens.colour(.pairCaptionPlaceBg)
A sanctioned pair for captions (place): the fill.
--mk-pair-caption-place-fgpair.caption.place.fg#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontrast
Tailwind
bg-pair-caption-place-fg
TS
hexLook(look).roles​["--mk-pair-caption-place-fg"]
Swift
MakrTokens.colour(.pairCaptionPlaceFg)
A sanctioned pair for captions (place): the text.
--mk-pair-caption-transition-bgpair.caption.transition.bg#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontrast
Tailwind
bg-pair-caption-transition-bg
TS
hexLook(look).roles​["--mk-pair-caption-transition-bg"]
Swift
MakrTokens.colour(.pairCaptionTransitionBg)
A sanctioned pair for captions (transition): the fill.
--mk-pair-caption-transition-fgpair.caption.transition.fg#F5F2ECoklch(0.962 0.009 84.6)colourwaythemevolumecontrast
Tailwind
bg-pair-caption-transition-fg
TS
hexLook(look).roles​["--mk-pair-caption-transition-fg"]
Swift
MakrTokens.colour(.pairCaptionTransitionFg)
A sanctioned pair for captions (transition): the text.
--mk-pair-sticker-m-bgpair.sticker.m.bg#C31A9Doklch(0.559 0.230 340.1)colourwaythemevolumecontrast
Tailwind
bg-pair-sticker-m-bg
TS
hexLook(look).roles​["--mk-pair-sticker-m-bg"]
Swift
MakrTokens.colour(.pairStickerMBg)
A sanctioned pair for stickers (m): the fill.
--mk-pair-sticker-m-fgpair.sticker.m.fg#FFFFFFoklch(1.000 0.000 0.0)colourwaythemevolumecontrast
Tailwind
bg-pair-sticker-m-fg
TS
hexLook(look).roles​["--mk-pair-sticker-m-fg"]
Swift
MakrTokens.colour(.pairStickerMFg)
A sanctioned pair for stickers (m): the text.
--mk-pair-sticker-a-bgpair.sticker.a.bg#1CBCF2oklch(0.744 0.141 228.4)colourwaythemevolumecontrast
Tailwind
bg-pair-sticker-a-bg
TS
hexLook(look).roles​["--mk-pair-sticker-a-bg"]
Swift
MakrTokens.colour(.pairStickerABg)
A sanctioned pair for stickers (a): the fill.
--mk-pair-sticker-a-fgpair.sticker.a.fg#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontrast
Tailwind
bg-pair-sticker-a-fg
TS
hexLook(look).roles​["--mk-pair-sticker-a-fg"]
Swift
MakrTokens.colour(.pairStickerAFg)
A sanctioned pair for stickers (a): the text.
--mk-pair-sticker-r-bgpair.sticker.r.bg#CE4C00oklch(0.586 0.178 41.7)colourwaythemevolumecontrast
Tailwind
bg-pair-sticker-r-bg
TS
hexLook(look).roles​["--mk-pair-sticker-r-bg"]
Swift
MakrTokens.colour(.pairStickerRBg)
A sanctioned pair for stickers (r): the fill.
--mk-pair-sticker-r-fgpair.sticker.r.fg#FFFFFFoklch(1.000 0.000 0.0)colourwaythemevolumecontrast
Tailwind
bg-pair-sticker-r-fg
TS
hexLook(look).roles​["--mk-pair-sticker-r-fg"]
Swift
MakrTokens.colour(.pairStickerRFg)
A sanctioned pair for stickers (r): the text.
--mk-pair-sticker-k-bgpair.sticker.k.bg#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontrast
Tailwind
bg-pair-sticker-k-bg
TS
hexLook(look).roles​["--mk-pair-sticker-k-bg"]
Swift
MakrTokens.colour(.pairStickerKBg)
A sanctioned pair for stickers (k): the fill.
--mk-pair-sticker-k-fgpair.sticker.k.fg#FFFFFFoklch(1.000 0.000 0.0)colourwaythemevolumecontrast
Tailwind
bg-pair-sticker-k-fg
TS
hexLook(look).roles​["--mk-pair-sticker-k-fg"]
Swift
MakrTokens.colour(.pairStickerKFg)
A sanctioned pair for stickers (k): the text.
--mk-pair-sticker-y-bgpair.sticker.y.bg#FFE500oklch(0.915 0.191 101.0)colourwaythemevolumecontrast
Tailwind
bg-pair-sticker-y-bg
TS
hexLook(look).roles​["--mk-pair-sticker-y-bg"]
Swift
MakrTokens.colour(.pairStickerYBg)
A sanctioned pair for stickers (y): the fill.
--mk-pair-sticker-y-fgpair.sticker.y.fg#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontrast
Tailwind
bg-pair-sticker-y-fg
TS
hexLook(look).roles​["--mk-pair-sticker-y-fg"]
Swift
MakrTokens.colour(.pairStickerYFg)
A sanctioned pair for stickers (y): the text.
--mk-pair-sticker-wood-bgpair.sticker.wood.bg#D9B27Coklch(0.786 0.084 75.1)colourwaythemevolumecontrast
Tailwind
bg-pair-sticker-wood-bg
TS
hexLook(look).roles​["--mk-pair-sticker-wood-bg"]
Swift
MakrTokens.colour(.pairStickerWoodBg)
A sanctioned pair for stickers (wood): the fill.
--mk-pair-sticker-wood-fgpair.sticker.wood.fg#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontrast
Tailwind
bg-pair-sticker-wood-fg
TS
hexLook(look).roles​["--mk-pair-sticker-wood-fg"]
Swift
MakrTokens.colour(.pairStickerWoodFg)
A sanctioned pair for stickers (wood): the text.
--mk-pair-sticker-lead-bgpair.sticker.lead.bg#C31A9Doklch(0.559 0.230 340.1)colourwaythemevolumecontrast
Tailwind
bg-pair-sticker-lead-bg
TS
hexLook(look).roles​["--mk-pair-sticker-lead-bg"]
Swift
MakrTokens.colour(.pairStickerLeadBg)
A sanctioned pair for stickers (lead): the fill.
--mk-pair-sticker-lead-fgpair.sticker.lead.fg#FFFFFFoklch(1.000 0.000 0.0)colourwaythemevolumecontrast
Tailwind
bg-pair-sticker-lead-fg
TS
hexLook(look).roles​["--mk-pair-sticker-lead-fg"]
Swift
MakrTokens.colour(.pairStickerLeadFg)
A sanctioned pair for stickers (lead): the text.
--mk-pair-sticker-support-bgpair.sticker.support.bg#1CBCF2oklch(0.744 0.141 228.4)colourwaythemevolumecontrast
Tailwind
bg-pair-sticker-support-bg
TS
hexLook(look).roles​["--mk-pair-sticker-support-bg"]
Swift
MakrTokens.colour(.pairStickerSupportBg)
A sanctioned pair for stickers (support): the fill.
--mk-pair-sticker-support-fgpair.sticker.support.fg#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontrast
Tailwind
bg-pair-sticker-support-fg
TS
hexLook(look).roles​["--mk-pair-sticker-support-fg"]
Swift
MakrTokens.colour(.pairStickerSupportFg)
A sanctioned pair for stickers (support): the text.
--mk-pair-sticker-spot-bgpair.sticker.spot.bg#FFE500oklch(0.915 0.191 101.0)colourwaythemevolumecontrast
Tailwind
bg-pair-sticker-spot-bg
TS
hexLook(look).roles​["--mk-pair-sticker-spot-bg"]
Swift
MakrTokens.colour(.pairStickerSpotBg)
A sanctioned pair for stickers (spot): the fill.
--mk-pair-sticker-spot-fgpair.sticker.spot.fg#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontrast
Tailwind
bg-pair-sticker-spot-fg
TS
hexLook(look).roles​["--mk-pair-sticker-spot-fg"]
Swift
MakrTokens.colour(.pairStickerSpotFg)
A sanctioned pair for stickers (spot): the text.
--mk-pair-sticker-ink-bgpair.sticker.ink.bg#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontrast
Tailwind
bg-pair-sticker-ink-bg
TS
hexLook(look).roles​["--mk-pair-sticker-ink-bg"]
Swift
MakrTokens.colour(.pairStickerInkBg)
A sanctioned pair for stickers (ink): the fill.
--mk-pair-sticker-ink-fgpair.sticker.ink.fg#F5F2ECoklch(0.962 0.009 84.6)colourwaythemevolumecontrast
Tailwind
bg-pair-sticker-ink-fg
TS
hexLook(look).roles​["--mk-pair-sticker-ink-fg"]
Swift
MakrTokens.colour(.pairStickerInkFg)
A sanctioned pair for stickers (ink): the text.
--mk-pair-sticker-paper-bgpair.sticker.paper.bg#FFFFFFoklch(1.000 0.000 0.0)colourwaythemevolumecontrast
Tailwind
bg-pair-sticker-paper-bg
TS
hexLook(look).roles​["--mk-pair-sticker-paper-bg"]
Swift
MakrTokens.colour(.pairStickerPaperBg)
A sanctioned pair for stickers (paper): the fill.
--mk-pair-sticker-paper-fgpair.sticker.paper.fg#15131Aoklch(0.192 0.014 298.1)colourwaythemevolumecontrast
Tailwind
bg-pair-sticker-paper-fg
TS
hexLook(look).roles​["--mk-pair-sticker-paper-fg"]
Swift
MakrTokens.colour(.pairStickerPaperFg)
A sanctioned pair for stickers (paper): the text.
--mk-data-accentdata.accent#C31A9Doklch(0.559 0.230 340.1)colourwaythemecontraststock
Tailwind
bg-data-accent
TS
hexLook(look).roles​["--mk-data-accent"]
Swift
MakrTokens.colour(.dataAccent)
The accent series in charts.
--mk-data-inkdata.ink#15131Aoklch(0.192 0.014 298.1)colourwaythemecontraststock
Tailwind
bg-data-ink
TS
hexLook(look).roles​["--mk-data-ink"]
Swift
MakrTokens.colour(.dataInk)
The first chart series.
--mk-data-2data.2#00B4EAoklch(0.720 0.141 228.6)colourwaythemecontraststock
Tailwind
bg-data-2
TS
hexLook(look).roles​["--mk-data-2"]
Swift
MakrTokens.colour(.data2)
The second chart series.
--mk-data-seq-1data.seq.1#FAE1F0oklch(0.934 0.034 341.0)colourwaythemecontraststock
Tailwind
bg-data-seq-1
TS
hexLook(look).roles​["--mk-data-seq-1"]
Swift
MakrTokens.colour(.dataSeq1)
Step 1 of the sequential chart ramp.
--mk-data-seq-2data.seq.2#F1B8DDoklch(0.845 0.081 339.9)colourwaythemecontraststock
Tailwind
bg-data-seq-2
TS
hexLook(look).roles​["--mk-data-seq-2"]
Swift
MakrTokens.colour(.dataSeq2)
Step 2 of the sequential chart ramp.
--mk-data-seq-3data.seq.3#E68FC9oklch(0.757 0.127 340.4)colourwaythemecontraststock
Tailwind
bg-data-seq-3
TS
hexLook(look).roles​["--mk-data-seq-3"]
Swift
MakrTokens.colour(.dataSeq3)
Step 3 of the sequential chart ramp.
--mk-data-seq-4data.seq.4#D864B6oklch(0.670 0.173 340.1)colourwaythemecontraststock
Tailwind
bg-data-seq-4
TS
hexLook(look).roles​["--mk-data-seq-4"]
Swift
MakrTokens.colour(.dataSeq4)
Step 4 of the sequential chart ramp.
--mk-data-seq-5data.seq.5#C31A9Doklch(0.559 0.230 340.1)colourwaythemecontraststock
Tailwind
bg-data-seq-5
TS
hexLook(look).roles​["--mk-data-seq-5"]
Swift
MakrTokens.colour(.dataSeq5)
Step 5 of the sequential chart ramp.
--mk-data-griddata.grid#D1CECBoklch(0.853 0.005 67.8)colourwaythemecontraststock
Tailwind
bg-data-grid
TS
hexLook(look).roles​["--mk-data-grid"]
Swift
MakrTokens.colour(.dataGrid)
Chart grid lines.
--mk-data-axisdata.axis#15131Aoklch(0.192 0.014 298.1)colourwaythemecontraststock
Tailwind
bg-data-axis
TS
hexLook(look).roles​["--mk-data-axis"]
Swift
MakrTokens.colour(.dataAxis)
Chart axes.
--mk-data-keylinedata.keyline#15131Aoklch(0.192 0.014 298.1)colourwaythemecontraststock
Tailwind
bg-data-keyline
TS
hexLook(look).roles​["--mk-data-keyline"]
Swift
MakrTokens.colour(.dataKeyline)
Chart keylines.
--mk-code-surfacecode.surface#FFFFFFoklch(1.000 0.000 0.0)colourwaythemecontraststock
Tailwind
bg-code-surface
TS
hexLook(look).roles​["--mk-code-surface"]
Swift
MakrTokens.colour(.codeSurface)
Code highlighting: the code block's surface.
--mk-code-textcode.text#15131Aoklch(0.192 0.014 298.1)colourwaythemecontraststock
Tailwind
bg-code-text
TS
hexLook(look).roles​["--mk-code-text"]
Swift
MakrTokens.colour(.codeText)
Code highlighting: plain code.
--mk-code-keywordcode.keyword#A50083oklch(0.487 0.211 340.4)colourwaythemecontraststock
Tailwind
bg-code-keyword
TS
hexLook(look).roles​["--mk-code-keyword"]
Swift
MakrTokens.colour(.codeKeyword)
Code highlighting: keywords.
--mk-code-stringcode.string#006A3Boklch(0.461 0.113 155.2)colourwaythemecontraststock
Tailwind
bg-code-string
TS
hexLook(look).roles​["--mk-code-string"]
Swift
MakrTokens.colour(.codeString)
Code highlighting: strings.
--mk-code-numbercode.number#A03900oklch(0.486 0.148 41.6)colourwaythemecontraststock
Tailwind
bg-code-number
TS
hexLook(look).roles​["--mk-code-number"]
Swift
MakrTokens.colour(.codeNumber)
Code highlighting: numbers.
--mk-code-functioncode.function#006383oklch(0.467 0.092 229.1)colourwaythemecontraststock
Tailwind
bg-code-function
TS
hexLook(look).roles​["--mk-code-function"]
Swift
MakrTokens.colour(.codeFunction)
Code highlighting: function names.
--mk-code-commentcode.comment#5E5C62oklch(0.479 0.010 301.2)colourwaythemecontraststock
Tailwind
bg-code-comment
TS
hexLook(look).roles​["--mk-code-comment"]
Swift
MakrTokens.colour(.codeComment)
Code highlighting: comments.
--mk-code-punctuationcode.punctuation#524F54oklch(0.432 0.009 312.2)colourwaythemecontraststock
Tailwind
bg-code-punctuation
TS
hexLook(look).roles​["--mk-code-punctuation"]
Swift
MakrTokens.colour(.codePunctuation)
Code highlighting: punctuation.