--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-scrimscrim | n/a | colourwaythemecontraststock | - 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.keyline | n/a | colourwaytheme | - 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.keyline | n/a | colourwaytheme | - 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.keyline | n/a | colourwaytheme | - 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.keyline | n/a | colourwaytheme | - 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-linklink | #840068oklch(0.414 0.179 340.5) | colourwaythemevolumecontraststockplateline | - Tailwind
bg-link- TS
hexLook(look).roles["--mk-link"]- Swift
MakrTokens.colour(.link)
| Links 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.fill | var(--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-lineline | var(--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.tint | var(--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.plate | var(--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.hover | var(--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.surface | color-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.line | var(--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.text | var(--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.plate | var(--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.text | color-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.keyline | var(--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 layer | var(--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-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. |