Design tokens
Design tokens are constant and platform-agnostic shared values. This set of data-value dictionary is used to ensure a better consistency across different platforms and digital products, plus it solve the issue of hardcoding common values inside the code over and over.
Usage
Lualtek's design tokens are generated for different platforms, this means that from a single source of truth — containing informations about colors, space, fonts, and more — we can generate platform-specific files which you can import and use.
For the web platform we provide two ways to use Lualtek's design tokens, you can access them inside javascript or css by importing the relative file from the correct node_modules path.
CSS
Then you can get the tokens by using the token() notation as in the following example. Note that token() keys are replaced with the final token value at build-time, so they are not dynamic like the custom properties used for theming.
.MyCustomComponent {
padding: token(--space-8);
border-radius: token(--radius-24);
color: oklch(token(--color-red-20) / 20%);
}As you may noticed color tokens are shipped as oklch colors but without the css oklch() notation. This is useful to handle different opacities by using the level 4 color module syntax (opens in a new tab) like in the example above.
If you want to use the tokens in your code without using the PostCSS plugins, you can also import the css file directly and use the tokens as standard custom property:
@import "@lualtek/tokens/platforms/web/tokens.css";About css tokens
If you're using the Lualtek's postcss shared configuration tokens are already
available inside CSS, you don't need to import them.
Javascript
Design tokens are also available in JSON format, which you can import and use in your javascript code.
import tkns from "@lualtek/tokens/platforms/web/tokens.json";
export const Component = () => (
<div style={{ color: `oklch(${tkns.color.blue[70]})` }} />
);Tokens list
{
"color": {
"blue": {
"0": "97.05% 0.01 254.6",
"5": "95.37% 0.02 252.5",
"10": "93.19% 0.03 255.6",
"20": "88.23% 0.06 254.1",
"30": "80.91% 0.10 251.8",
"40": "71.37% 0.14 254.6",
"50": "59.60% 0.16 259.5",
"60": "51.82% 0.18 263.0",
"70": "46.23% 0.18 265.0",
"80": "37.79% 0.16 265.7",
"90": "31.93% 0.14 264.5",
"100": "25.93% 0.12 264.3"
},
"brand": {
"0": "97.38% 0.01 290.8",
"5": "96.03% 0.02 289.1",
"10": "93.21% 0.04 291.0",
"20": "89.23% 0.06 289.7",
"30": "81.29% 0.10 287.8",
"40": "66.96% 0.18 284.3",
"50": "59.64% 0.23 281.1",
"60": "54.03% 0.26 277.4",
"70": "46.67% 0.24 275.8",
"80": "40.43% 0.20 276.3",
"90": "30.23% 0.13 279.8",
"100": "26.04% 0.08 283.0"
},
"cyan": {
"0": "98.41% 0.02 200.9",
"5": "96.68% 0.03 203.7",
"10": "95.63% 0.04 203.4",
"20": "91.67% 0.08 205.0",
"30": "86.51% 0.12 207.1",
"40": "79.71% 0.13 211.5",
"50": "71.48% 0.13 215.2",
"60": "60.89% 0.11 221.7",
"70": "51.98% 0.09 223.1",
"80": "45.00% 0.08 224.3",
"90": "39.82% 0.07 227.4",
"100": "34.23% 0.06 227.6"
},
"dipsy": {
"0": "99.14% 0.02 119.5",
"5": "98.00% 0.04 116.7",
"10": "96.18% 0.08 114.1",
"20": "94.08% 0.10 112.4",
"30": "89.29% 0.13 118.5",
"40": "83.33% 0.16 123.6",
"50": "75.83% 0.17 127.8",
"60": "66.85% 0.17 131.1",
"70": "56.26% 0.16 134.1",
"80": "44.67% 0.13 134.9",
"90": "37.53% 0.11 135.2",
"100": "28.81% 0.08 134.0"
},
"gray": {
"0": "99.11% 0.00 0",
"5": "98.51% 0.00 0",
"10": "97.02% 0.00 0",
"20": "93.10% 0.00 0",
"30": "85.45% 0.00 0",
"40": "69.27% 0.00 0",
"50": "52.78% 0.00 0",
"60": "42.76% 0.00 0",
"70": "35.23% 0.00 0",
"80": "24.78% 0.00 0",
"90": "18.22% 0.00 0",
"100": "15.91% 0.00 0"
},
"green": {
"0": "97.93% 0.02 166.1",
"5": "96.40% 0.03 164.2",
"10": "95.05% 0.05 163.1",
"20": "90.49% 0.09 164.2",
"30": "84.52% 0.13 165.0",
"40": "77.29% 0.15 163.2",
"50": "69.59% 0.15 162.5",
"60": "59.60% 0.13 163.2",
"70": "50.81% 0.10 165.6",
"80": "43.18% 0.09 166.9",
"90": "37.80% 0.07 168.9",
"100": "32.50% 0.06 169.7"
},
"indigo": {
"0": "96.15% 0.02 282.8",
"5": "93.85% 0.03 281.3",
"10": "90.10% 0.05 284.1",
"20": "82.78% 0.08 283.0",
"30": "70.64% 0.13 282.6",
"40": "58.24% 0.18 280.9",
"50": "47.90% 0.20 277.8",
"60": "43.07% 0.21 276.5",
"70": "35.77% 0.19 274.1",
"80": "30.92% 0.17 273.0",
"90": "26.00% 0.15 273.9",
"100": "21.53% 0.12 273.5"
},
"magenta": {
"0": "97.99% 0.01 336.1",
"5": "94.89% 0.03 338.0",
"10": "90.15% 0.06 339.6",
"20": "84.68% 0.10 341.5",
"30": "74.28% 0.16 344.4",
"40": "61.30% 0.21 349.4",
"50": "53.74% 0.21 353.6",
"60": "48.62% 0.20 357.4",
"70": "41.84% 0.17 357.5",
"80": "34.11% 0.14 357.1",
"90": "29.73% 0.12 356.9",
"100": "24.74% 0.10 355.4"
},
"primary": {
"0": "98.10% 0.01 297.7",
"5": "96.96% 0.01 293.9",
"10": "94.98% 0.01 290.7",
"20": "91.85% 0.02 292.6",
"30": "85.21% 0.03 294.1",
"40": "68.41% 0.05 292.6",
"50": "52.50% 0.06 292.4",
"60": "41.83% 0.06 291.9",
"70": "34.34% 0.06 291.1",
"80": "25.03% 0.06 288.5",
"90": "20.58% 0.06 288.5",
"100": "19.11% 0.05 289.5"
},
"purple": {
"0": "97.68% 0.01 308.3",
"5": "95.30% 0.03 306.1",
"10": "92.80% 0.04 307.3",
"20": "90.24% 0.06 306.7",
"30": "82.68% 0.11 306.4",
"40": "72.17% 0.18 305.5",
"50": "62.68% 0.23 303.9",
"60": "55.75% 0.25 302.3",
"70": "49.55% 0.24 301.9",
"80": "43.83% 0.20 303.7",
"90": "38.07% 0.17 305.0",
"100": "33.24% 0.14 305.4"
},
"red": {
"0": "97.05% 0.01 17.4",
"5": "94.65% 0.03 17.6",
"10": "91.41% 0.04 18.0",
"20": "87.00% 0.07 18.5",
"30": "80.77% 0.10 19.6",
"40": "71.06% 0.17 22.2",
"50": "63.68% 0.21 25.3",
"60": "57.71% 0.22 27.3",
"70": "50.54% 0.19 27.5",
"80": "44.37% 0.16 26.9",
"90": "39.58% 0.13 25.7",
"100": "32.56% 0.11 25.2"
},
"salmon": {
"0": "97.25% 0.01 41.9",
"5": "94.15% 0.02 38.3",
"10": "90.68% 0.03 38.0",
"20": "85.78% 0.05 39.7",
"30": "79.30% 0.09 38.9",
"40": "71.06% 0.13 37.6",
"50": "62.04% 0.16 37.4",
"60": "56.25% 0.16 37.8",
"70": "49.25% 0.14 38.0",
"80": "41.19% 0.12 37.1",
"90": "35.27% 0.09 37.3",
"100": "29.12% 0.08 37.1"
},
"slate": {
"0": "98.42% 0.00 247.9",
"5": "97.47% 0.01 247.9",
"10": "95.88% 0.01 247.9",
"20": "92.88% 0.01 255.5",
"30": "86.90% 0.02 252.9",
"40": "71.07% 0.04 256.8",
"50": "55.44% 0.04 257.4",
"60": "44.55% 0.04 257.3",
"70": "37.17% 0.04 257.3",
"80": "27.95% 0.04 260.0",
"90": "20.77% 0.04 265.8",
"100": "18.82% 0.03 264.4"
},
"support": {
"black": "0.00% 0.00 0",
"white": "100.00% 0.00 0"
},
"yellow": {
"0": "98.69% 0.02 95.3",
"5": "97.14% 0.04 95.1",
"10": "95.31% 0.07 95.5",
"20": "92.43% 0.12 95.7",
"30": "87.90% 0.15 91.6",
"40": "83.69% 0.16 84.4",
"50": "76.86% 0.16 70.1",
"60": "72.17% 0.16 69.3",
"70": "66.41% 0.15 65.3",
"80": "57.32% 0.14 58.3",
"90": "48.19% 0.11 59.0",
"100": "41.42% 0.10 59.6"
}
},
"vibrancy": {
"blur": {
"soft": "10px",
"strong": "20px"
},
"saturation": {
"standard": 1,
"high": 1.2
}
},
"breakpoint": {
"extra-small": {
"em": "30em",
"px": "480px"
},
"small": {
"em": "48em",
"px": "768px"
},
"medium": {
"em": "60em",
"px": "960px"
},
"large": {
"em": "80em",
"px": "1280px"
},
"extra-large": {
"em": "100em",
"px": "1600px"
},
"wide": {
"em": "131em",
"px": "2100px"
}
},
"container": {
"extra-large": "100.00rem",
"large": "80.00rem",
"medium": "55.56rem",
"small": "35.56rem"
},
"icon": {
"size": {
"12": "0.67rem",
"14": "0.78rem",
"16": "0.89rem",
"18": "1.00rem",
"22": "1.22rem",
"24": "1.33rem",
"32": "1.78rem",
"40": "2.22rem",
"48": "2.67rem",
"56": "3.11rem"
}
},
"radius": {
"4": "0.22rem",
"8": "0.44rem",
"12": "0.67rem",
"16": "0.89rem",
"24": "1.33rem",
"32": "1.78rem",
"40": "2.22rem",
"48": "2.67rem",
"full": "555.56rem"
},
"space": {
"2": "0.11rem",
"4": "0.22rem",
"8": "0.44rem",
"16": "0.89rem",
"24": "1.33rem",
"32": "1.78rem",
"40": "2.22rem",
"48": "2.67rem",
"56": "3.11rem",
"64": "3.56rem",
"72": "4.00rem",
"80": "4.44rem",
"88": "4.89rem",
"96": "5.33rem",
"104": "5.78rem",
"112": "6.22rem",
"120": "6.67rem",
"128": "7.11rem",
"136": "7.56rem",
"144": "8.00rem",
"152": "8.44rem",
"160": "8.89rem",
"168": "9.33rem",
"176": "9.78rem",
"184": "10.22rem",
"192": "10.67rem",
"200": "11.11rem"
},
"duration": {
"100": "0.10s",
"200": "0.20s",
"250": "0.25s",
"300": "0.30s",
"500": "0.50s"
},
"easing": {
"standard": "cubic-bezier(0.3, 0.07, 0.34, 1)",
"entrance": "cubic-bezier(0, 0, 0.34, 1)",
"exit": "cubic-bezier(0.3, 0.07, 1, 1)"
},
"font": {
"family": {
"heading": "\"Adobe Text Pro\", system-ui, sans-serif",
"body": "\"Nunito Sans\", system-ui, sans-serif",
"mono": "monospace"
},
"lh": {
"extra-small": 1,
"small": 1.2,
"standard": 1.5,
"large": 1.8
},
"size": {
"12": "0.67rem",
"14": "0.78rem",
"16": "0.89rem",
"18": "1.00rem",
"22": "1.22rem",
"24": "1.33rem",
"28": "1.56rem",
"32": "1.78rem",
"42": "2.33rem",
"56": "3.11rem",
"75": "4.17rem",
"100": "5.56rem"
},
"weight": {
"bold": 800,
"semi-bold": 600,
"regular": 400,
"light": 200
}
}
}