00 - Theme
see more
{
"color": {
"red": "#D82848",
"yellow": "#D8B828",
"green": "#48D828",
"azure": "#2277dd",
"azure-new": "#28A0D8",
"dark-blue": "#1F39AE",
"blue": {
"100": "#6888ff",
"200": "#6080f8",
"400": "#4868f0",
"600": "#2848d8",
"800": "#2030d0",
"DEFAULT": "var(--blue-600)"
},
"purple": "#8822ee",
"purple-new": "#6028D8",
"light": {
"100": "#feffff",
"200": "#f6f7f8",
"400": "#eeeff0",
"600": "#e6e7e8",
"800": "#dedfe0",
"DEFAULT": "var(--light-200)"
},
"grey": {
"100": "#a0a2a8",
"200": "#808288",
"400": "#606268",
"600": "#404248",
"800": "#303238",
"DEFAULT": "var(--grey-400)"
},
"dark": {
"100": "#282a30",
"200": "#202228",
"400": "#181a20",
"600": "#101218",
"800": "#080a10",
"DEFAULT": "var(--dark-200)"
}
},
"theme": {
"primary": "var(--blue)",
"secondary": "var(--azure)",
"tertiary": "var(--purple)",
"accent": "var(--yellow)"
},
"light": {
"primary-up": "var(--blue-100)",
"primary": "var(--blue-600)",
"primary-down": "var(--blue-800)",
"secondary": "var(--azure)",
"tertiary": "var(--purple)",
"accent": "var(--yellow)",
"base": "var(--light-100)",
"offset": "var(--light-200)",
"contrast": "var(--light-400)",
"head": "var(--dark-800)",
"face": "var(--dark-400)",
"body": "var(--dark-100)"
},
"dark": {
"primary-up": "var(--blue-100)",
"primary": "var(--blue-600)",
"primary-down": "var(--blue-800)",
"secondary": "var(--azure)",
"tertiary": "var(--purple)",
"accent": "var(--yellow)",
"base": "var(--dark-200)",
"offset": "var(--dark-400)",
"contrast": "var(--dark-600)",
"head": "var(--light-200)",
"face": "var(--light-400)",
"body": "var(--light-600)"
},
"DEFAULT": {
"primary-up": "var(--light-primary-up)",
"primary": "var(--light-primary)",
"primary-down": "var(--light-primary-down)",
"secondary": "var(--light-secondary)",
"tertiary": "var(--light-tertiary)",
"accent": "var(--light-accent)",
"base": "var(--light-base)",
"offset": "var(--light-offset)",
"contrast": "var(--light-contrast)",
"head": "var(--light-head)",
"face": "var(--light-face)",
"body": "var(--light-body)"
},
"round": {
"sm": "3px",
"md": "6px",
"lg": "9px",
"DEFAULT": "var(--round-md)"
},
"border": {
"color": "var(--theme-contrast)",
"DEFAULT": "2px solid var(--border-color)"
},
"outline": {
"DEFAULT": "2px solid var(--input-color)"
},
"shadow": {
"lg-inset": "inset 0px 0px 20px 4px rgb(0 0 0 / 0.2)",
"DEFAULT": "0px 2px 4px 2px rgb(0 0 0 / 0.1)",
"lg": "0px 4px 8px 4px rgb(0 0 0 / 0.2)"
},
"font": {
"head": "'Arial', sans-serif",
"face": "'Arial', sans-serif",
"meta": "'Arial', sans-serif"
},
"markup": {
"color": "var(--theme-primary)",
"muted": "var(--grey-200)"
},
"copy": {
"letter-spacing": "0",
"line-height": "1.6",
"lhc-top": "-0.3em",
"lhc-bottom": "-0.35em",
"font-size": "1rem",
"font-weight": "500",
"font-family": "var(--font-face)",
"color": "var(--theme-body)"
},
"heading": {
"DEFAULT": {
"letter-spacing": "0",
"line-height": "1.2",
"lhc-top": "-0.18em",
"lhc-bottom": "-0.25em",
"font-size": "1.2rem",
"font-weight": "700",
"font-family": "var(--font-head)",
"color": "var(--theme-head)"
}
},
"h1": {
"DEFAULT": {
"font-size": "3.6rem",
"color": "var(--theme-head)"
}
},
"h2": {
"DEFAULT": {
"font-size": "2.4rem",
"color": "var(--theme-head)"
}
},
"h3": {
"DEFAULT": {
"font-size": "2.0rem",
"color": "var(--theme-head)"
}
},
"h4": {
"DEFAULT": {
"font-size": "1.6rem",
"color": "var(--theme-head)"
}
},
"h5": {
"DEFAULT": {
"font-size": "1.6rem",
"color": "var(--markup-color)"
}
},
"h6": {
"DEFAULT": {
"font-size": "1.6rem",
"color": "var(--markup-muted)"
}
},
"eyebrow": {
"DEFAULT": {
"letter-spacing": "0",
"line-height": "1.2",
"lhc-top": "-0.18em",
"lhc-bottom": "-0.25em",
"font-size": "1.2rem",
"font-weight": "700",
"font-family": "var(--font-head)",
"color": "var(--theme-head)"
}
},
"list": {
"line-height": "1.4",
"lhc-top": "-0.3em",
"lhc-bottom": "-0.35em",
"font-size": "1rem",
"color": "var(--theme-face)"
},
"quote": {
"line-height": "1.4",
"lhc-top": "-0.3em",
"lhc-bottom": "-0.35em",
"font-size": "1.2rem",
"color": "var(--theme-face)"
},
"meta": {
"line-height": "1.2",
"lhc-top": "-0.2em",
"lhc-bottom": "-0.3em"
},
"input": {
"color": "var(--theme-primary)",
"hover": "var(--theme-primary-up)",
"active": "var(--theme-primary-down)",
"outline": "2px solid var(--input-color)",
"backdrop": "rgb(64 128 255 / var(--alpha, 0.2))",
"height": {
"large": "2.8rem",
"DEFAULT": "2.2rem",
"small": "1.6rem"
},
"border": {
"width": {
"large": "3px",
"DEFAULT": "2px",
"small": "1px"
}
},
"pad": {
"large": "1.2rem",
"DEFAULT": "0.8rem",
"small": "0.5rem"
},
"round": "var(--round-sm)",
"timing": "300ms",
"easing": "ease"
},
"card": {
"shadow": "var(--shadow)",
"round": "var(--round)",
"background-color": "var(--theme-base)"
},
"screen": {
"sm": "480px",
"md": "768px",
"lg": "1024px",
"xl": "2560px"
},
"max-w": {
"copy": "36rem",
"page": "48rem",
"site": "64rem"
},
"other": {
"break-size": "1.6rem",
"tab-size": "2.0rem"
},
"size": {
"1": "1px",
"2": "2px",
"4": "4px",
"8": "0.4rem",
"10": "0.5rem",
"12": "0.6rem",
"14": "0.7rem",
"16": "0.8rem",
"20": "1.0rem",
"24": "1.2rem",
"32": "1.6rem",
"48": "2.4rem",
"64": "3.2rem",
"80": "4.0rem",
"96": "4.8rem",
"128": "6.4rem",
"break": "var(--break-size)",
"tab": "var(--tab-size)",
"DEFAULT": "1em",
"rem": "1rem"
},
"import": {}
}
01 - Token Categories
see more
{
"color": {
"red": "#D82848",
"yellow": "#D8B828",
"green": "#48D828",
"azure": "#2277dd",
"azure-new": "#28A0D8",
"dark-blue": "#1F39AE",
"blue-100": "#6888ff",
"blue-200": "#6080f8",
"blue-400": "#4868f0",
"blue-600": "#2848d8",
"blue-800": "#2030d0",
"blue": "var(--blue-600)",
"purple": "#8822ee",
"purple-new": "#6028D8",
"light-100": "#feffff",
"light-200": "#f6f7f8",
"light-400": "#eeeff0",
"light-600": "#e6e7e8",
"light-800": "#dedfe0",
"light": "var(--light-200)",
"grey-100": "#a0a2a8",
"grey-200": "#808288",
"grey-400": "#606268",
"grey-600": "#404248",
"grey-800": "#303238",
"grey": "var(--grey-400)",
"dark-100": "#282a30",
"dark-200": "#202228",
"dark-400": "#181a20",
"dark-600": "#101218",
"dark-800": "#080a10",
"dark": "var(--dark-200)"
},
"theme": {
"theme-primary": "var(--blue)",
"theme-secondary": "var(--azure)",
"theme-tertiary": "var(--purple)",
"theme-accent": "var(--yellow)"
},
"light": {
"light-primary-up": "var(--blue-100)",
"light-primary": "var(--blue-600)",
"light-primary-down": "var(--blue-800)",
"light-secondary": "var(--azure)",
"light-tertiary": "var(--purple)",
"light-accent": "var(--yellow)",
"light-base": "var(--light-100)",
"light-offset": "var(--light-200)",
"light-contrast": "var(--light-400)",
"light-head": "var(--dark-800)",
"light-face": "var(--dark-400)",
"light-body": "var(--dark-100)"
},
"dark": {
"dark-primary-up": "var(--blue-100)",
"dark-primary": "var(--blue-600)",
"dark-primary-down": "var(--blue-800)",
"dark-secondary": "var(--azure)",
"dark-tertiary": "var(--purple)",
"dark-accent": "var(--yellow)",
"dark-base": "var(--dark-200)",
"dark-offset": "var(--dark-400)",
"dark-contrast": "var(--dark-600)",
"dark-head": "var(--light-200)",
"dark-face": "var(--light-400)",
"dark-body": "var(--light-600)"
},
"DEFAULT": {
"theme-primary-up": "var(--light-primary-up)",
"theme-primary": "var(--light-primary)",
"theme-primary-down": "var(--light-primary-down)",
"theme-secondary": "var(--light-secondary)",
"theme-tertiary": "var(--light-tertiary)",
"theme-accent": "var(--light-accent)",
"theme-base": "var(--light-base)",
"theme-offset": "var(--light-offset)",
"theme-contrast": "var(--light-contrast)",
"theme-head": "var(--light-head)",
"theme-face": "var(--light-face)",
"theme-body": "var(--light-body)"
},
"round": {
"round-sm": "3px",
"round-md": "6px",
"round-lg": "9px",
"round": "var(--round-md)"
},
"border": {
"border-color": "var(--theme-contrast)",
"border": "2px solid var(--border-color)"
},
"outline": {
"outline": "2px solid var(--input-color)"
},
"shadow": {
"shadow-lg-inset": "inset 0px 0px 20px 4px rgb(0 0 0 / 0.2)",
"shadow": "0px 2px 4px 2px rgb(0 0 0 / 0.1)",
"shadow-lg": "0px 4px 8px 4px rgb(0 0 0 / 0.2)"
},
"font": {
"font-head": "'Arial', sans-serif",
"font-face": "'Arial', sans-serif",
"font-meta": "'Arial', sans-serif"
},
"markup": {
"markup-color": "var(--theme-primary)",
"markup-muted": "var(--grey-200)"
},
"copy": {
"copy-letter-spacing": "0",
"copy-line-height": "1.6",
"copy-lhc-top": "-0.3em",
"copy-lhc-bottom": "-0.35em",
"copy-font-size": "1rem",
"copy-font-weight": "500",
"copy-font-family": "var(--font-face)",
"copy-color": "var(--theme-body)"
},
"heading": {
"heading-letter-spacing": "0",
"heading-line-height": "1.2",
"heading-lhc-top": "-0.18em",
"heading-lhc-bottom": "-0.25em",
"heading-font-size": "1.2rem",
"heading-font-weight": "700",
"heading-font-family": "var(--font-head)",
"heading-color": "var(--theme-head)"
},
"h1": {
"h1-font-size": "3.6rem",
"h1-color": "var(--theme-head)"
},
"h2": {
"h2-font-size": "2.4rem",
"h2-color": "var(--theme-head)"
},
"h3": {
"h3-font-size": "2.0rem",
"h3-color": "var(--theme-head)"
},
"h4": {
"h4-font-size": "1.6rem",
"h4-color": "var(--theme-head)"
},
"h5": {
"h5-font-size": "1.6rem",
"h5-color": "var(--markup-color)"
},
"h6": {
"h6-font-size": "1.6rem",
"h6-color": "var(--markup-muted)"
},
"eyebrow": {
"eyebrow-letter-spacing": "0",
"eyebrow-line-height": "1.2",
"eyebrow-lhc-top": "-0.18em",
"eyebrow-lhc-bottom": "-0.25em",
"eyebrow-font-size": "1.2rem",
"eyebrow-font-weight": "700",
"eyebrow-font-family": "var(--font-head)",
"eyebrow-color": "var(--theme-head)"
},
"list": {
"list-line-height": "1.4",
"list-lhc-top": "-0.3em",
"list-lhc-bottom": "-0.35em",
"list-font-size": "1rem",
"list-color": "var(--theme-face)"
},
"quote": {
"quote-line-height": "1.4",
"quote-lhc-top": "-0.3em",
"quote-lhc-bottom": "-0.35em",
"quote-font-size": "1.2rem",
"quote-color": "var(--theme-face)"
},
"meta": {
"meta-line-height": "1.2",
"meta-lhc-top": "-0.2em",
"meta-lhc-bottom": "-0.3em"
},
"input": {
"input-color": "var(--theme-primary)",
"input-hover": "var(--theme-primary-up)",
"input-active": "var(--theme-primary-down)",
"input-outline": "2px solid var(--input-color)",
"input-backdrop": "rgb(64 128 255 / var(--alpha, 0.2))",
"input-height-large": "2.8rem",
"input-height": "2.2rem",
"input-height-small": "1.6rem",
"input-border-width-large": "3px",
"input-border-width": "2px",
"input-border-width-small": "1px",
"input-pad-large": "1.2rem",
"input-pad": "0.8rem",
"input-pad-small": "0.5rem",
"input-round": "var(--round-sm)",
"input-timing": "300ms",
"input-easing": "ease"
},
"card": {
"card-shadow": "var(--shadow)",
"card-round": "var(--round)",
"card-background-color": "var(--theme-base)"
},
"screen": {
"screen-sm": "480px",
"screen-md": "768px",
"screen-lg": "1024px",
"screen-xl": "2560px"
},
"max-w": {
"max-w-copy": "36rem",
"max-w-page": "48rem",
"max-w-site": "64rem"
},
"other": {
"break-size": "1.6rem",
"tab-size": "2.0rem"
},
"size": {
"size-1": "1px",
"size-2": "2px",
"size-4": "4px",
"size-8": "0.4rem",
"size-10": "0.5rem",
"size-12": "0.6rem",
"size-14": "0.7rem",
"size-16": "0.8rem",
"size-20": "1.0rem",
"size-24": "1.2rem",
"size-32": "1.6rem",
"size-48": "2.4rem",
"size-64": "3.2rem",
"size-80": "4.0rem",
"size-96": "4.8rem",
"size-128": "6.4rem",
"size-break": "var(--break-size)",
"size-tab": "var(--tab-size)",
"size": "1em",
"size-rem": "1rem"
},
"import": {}
}
02 - Tokens Native
see more
{
"color": [
"--red: #D82848;",
"--yellow: #D8B828;",
"--green: #48D828;",
"--azure: #2277dd;",
"--azure-new: #28A0D8;",
"--dark-blue: #1F39AE;",
"--blue-100: #6888ff;",
"--blue-200: #6080f8;",
"--blue-400: #4868f0;",
"--blue-600: #2848d8;",
"--blue-800: #2030d0;",
"--blue: var(--blue-600);",
"--purple: #8822ee;",
"--purple-new: #6028D8;",
"--light-100: #feffff;",
"--light-200: #f6f7f8;",
"--light-400: #eeeff0;",
"--light-600: #e6e7e8;",
"--light-800: #dedfe0;",
"--light: var(--light-200);",
"--grey-100: #a0a2a8;",
"--grey-200: #808288;",
"--grey-400: #606268;",
"--grey-600: #404248;",
"--grey-800: #303238;",
"--grey: var(--grey-400);",
"--dark-100: #282a30;",
"--dark-200: #202228;",
"--dark-400: #181a20;",
"--dark-600: #101218;",
"--dark-800: #080a10;",
"--dark: var(--dark-200);"
],
"theme": [
"--theme-primary: var(--blue);",
"--theme-secondary: var(--azure);",
"--theme-tertiary: var(--purple);",
"--theme-accent: var(--yellow);"
],
"light": [
"--light-primary-up: var(--blue-100);",
"--light-primary: var(--blue-600);",
"--light-primary-down: var(--blue-800);",
"--light-secondary: var(--azure);",
"--light-tertiary: var(--purple);",
"--light-accent: var(--yellow);",
"--light-base: var(--light-100);",
"--light-offset: var(--light-200);",
"--light-contrast: var(--light-400);",
"--light-head: var(--dark-800);",
"--light-face: var(--dark-400);",
"--light-body: var(--dark-100);"
],
"dark": [
"--dark-primary-up: var(--blue-100);",
"--dark-primary: var(--blue-600);",
"--dark-primary-down: var(--blue-800);",
"--dark-secondary: var(--azure);",
"--dark-tertiary: var(--purple);",
"--dark-accent: var(--yellow);",
"--dark-base: var(--dark-200);",
"--dark-offset: var(--dark-400);",
"--dark-contrast: var(--dark-600);",
"--dark-head: var(--light-200);",
"--dark-face: var(--light-400);",
"--dark-body: var(--light-600);"
],
"DEFAULT": [
"--theme-primary-up: var(--light-primary-up);",
"--theme-primary: var(--light-primary);",
"--theme-primary-down: var(--light-primary-down);",
"--theme-secondary: var(--light-secondary);",
"--theme-tertiary: var(--light-tertiary);",
"--theme-accent: var(--light-accent);",
"--theme-base: var(--light-base);",
"--theme-offset: var(--light-offset);",
"--theme-contrast: var(--light-contrast);",
"--theme-head: var(--light-head);",
"--theme-face: var(--light-face);",
"--theme-body: var(--light-body);"
],
"round": [
"--round-sm: 3px;",
"--round-md: 6px;",
"--round-lg: 9px;",
"--round: var(--round-md);"
],
"border": [
"--border-color: var(--theme-contrast);",
"--border: 2px solid var(--border-color);"
],
"outline": [
"--outline: 2px solid var(--input-color);"
],
"shadow": [
"--shadow-lg-inset: inset 0px 0px 20px 4px rgb(0 0 0 / 0.2);",
"--shadow: 0px 2px 4px 2px rgb(0 0 0 / 0.1);",
"--shadow-lg: 0px 4px 8px 4px rgb(0 0 0 / 0.2);"
],
"font": [
"--font-head: 'Arial', sans-serif;",
"--font-face: 'Arial', sans-serif;",
"--font-meta: 'Arial', sans-serif;"
],
"markup": [
"--markup-color: var(--theme-primary);",
"--markup-muted: var(--grey-200);"
],
"copy": [
"--copy-letter-spacing: 0;",
"--copy-line-height: 1.6;",
"--copy-lhc-top: -0.3em;",
"--copy-lhc-bottom: -0.35em;",
"--copy-font-size: 1rem;",
"--copy-font-weight: 500;",
"--copy-font-family: var(--font-face);",
"--copy-color: var(--theme-body);"
],
"heading": [
"--heading-letter-spacing: 0;",
"--heading-line-height: 1.2;",
"--heading-lhc-top: -0.18em;",
"--heading-lhc-bottom: -0.25em;",
"--heading-font-size: 1.2rem;",
"--heading-font-weight: 700;",
"--heading-font-family: var(--font-head);",
"--heading-color: var(--theme-head);"
],
"h1": [
"--h1-font-size: 3.6rem;",
"--h1-color: var(--theme-head);"
],
"h2": [
"--h2-font-size: 2.4rem;",
"--h2-color: var(--theme-head);"
],
"h3": [
"--h3-font-size: 2.0rem;",
"--h3-color: var(--theme-head);"
],
"h4": [
"--h4-font-size: 1.6rem;",
"--h4-color: var(--theme-head);"
],
"h5": [
"--h5-font-size: 1.6rem;",
"--h5-color: var(--markup-color);"
],
"h6": [
"--h6-font-size: 1.6rem;",
"--h6-color: var(--markup-muted);"
],
"eyebrow": [
"--eyebrow-letter-spacing: 0;",
"--eyebrow-line-height: 1.2;",
"--eyebrow-lhc-top: -0.18em;",
"--eyebrow-lhc-bottom: -0.25em;",
"--eyebrow-font-size: 1.2rem;",
"--eyebrow-font-weight: 700;",
"--eyebrow-font-family: var(--font-head);",
"--eyebrow-color: var(--theme-head);"
],
"list": [
"--list-line-height: 1.4;",
"--list-lhc-top: -0.3em;",
"--list-lhc-bottom: -0.35em;",
"--list-font-size: 1rem;",
"--list-color: var(--theme-face);"
],
"quote": [
"--quote-line-height: 1.4;",
"--quote-lhc-top: -0.3em;",
"--quote-lhc-bottom: -0.35em;",
"--quote-font-size: 1.2rem;",
"--quote-color: var(--theme-face);"
],
"meta": [
"--meta-line-height: 1.2;",
"--meta-lhc-top: -0.2em;",
"--meta-lhc-bottom: -0.3em;"
],
"input": [
"--input-color: var(--theme-primary);",
"--input-hover: var(--theme-primary-up);",
"--input-active: var(--theme-primary-down);",
"--input-outline: 2px solid var(--input-color);",
"--input-backdrop: rgb(64 128 255 / var(--alpha, 0.2));",
"--input-height-large: 2.8rem;",
"--input-height: 2.2rem;",
"--input-height-small: 1.6rem;",
"--input-border-width-large: 3px;",
"--input-border-width: 2px;",
"--input-border-width-small: 1px;",
"--input-pad-large: 1.2rem;",
"--input-pad: 0.8rem;",
"--input-pad-small: 0.5rem;",
"--input-round: var(--round-sm);",
"--input-timing: 300ms;",
"--input-easing: ease;"
],
"card": [
"--card-shadow: var(--shadow);",
"--card-round: var(--round);",
"--card-background-color: var(--theme-base);"
],
"screen": [
"--screen-sm: 480px;",
"--screen-md: 768px;",
"--screen-lg: 1024px;",
"--screen-xl: 2560px;"
],
"max-w": [
"--max-w-copy: 36rem;",
"--max-w-page: 48rem;",
"--max-w-site: 64rem;"
],
"other": [
"--break-size: 1.6rem;",
"--tab-size: 2.0rem;"
],
"size": [
"--size-1: 1px;",
"--size-2: 2px;",
"--size-4: 4px;",
"--size-8: 0.4rem;",
"--size-10: 0.5rem;",
"--size-12: 0.6rem;",
"--size-14: 0.7rem;",
"--size-16: 0.8rem;",
"--size-20: 1.0rem;",
"--size-24: 1.2rem;",
"--size-32: 1.6rem;",
"--size-48: 2.4rem;",
"--size-64: 3.2rem;",
"--size-80: 4.0rem;",
"--size-96: 4.8rem;",
"--size-128: 6.4rem;",
"--size-break: var(--break-size);",
"--size-tab: var(--tab-size);",
"--size: 1em;",
"--size-rem: 1rem;"
],
"import": []
}
03 - Token Builder
see more
/* color */
:root {
--red: #D82848;
--yellow: #D8B828;
--green: #48D828;
--azure: #2277dd;
--azure-new: #28A0D8;
--dark-blue: #1F39AE;
--blue-100: #6888ff;
--blue-200: #6080f8;
--blue-400: #4868f0;
--blue-600: #2848d8;
--blue-800: #2030d0;
--blue: var(--blue-600);
--purple: #8822ee;
--purple-new: #6028D8;
--light-100: #feffff;
--light-200: #f6f7f8;
--light-400: #eeeff0;
--light-600: #e6e7e8;
--light-800: #dedfe0;
--light: var(--light-200);
--grey-100: #a0a2a8;
--grey-200: #808288;
--grey-400: #606268;
--grey-600: #404248;
--grey-800: #303238;
--grey: var(--grey-400);
--dark-100: #282a30;
--dark-200: #202228;
--dark-400: #181a20;
--dark-600: #101218;
--dark-800: #080a10;
--dark: var(--dark-200);
}
/* theme */
:root {
--theme-primary: var(--blue);
--theme-secondary: var(--azure);
--theme-tertiary: var(--purple);
--theme-accent: var(--yellow);
}
/* light */
:root {
--light-primary-up: var(--blue-100);
--light-primary: var(--blue-600);
--light-primary-down: var(--blue-800);
--light-secondary: var(--azure);
--light-tertiary: var(--purple);
--light-accent: var(--yellow);
--light-base: var(--light-100);
--light-offset: var(--light-200);
--light-contrast: var(--light-400);
--light-head: var(--dark-800);
--light-face: var(--dark-400);
--light-body: var(--dark-100);
}
/* dark */
:root {
--dark-primary-up: var(--blue-100);
--dark-primary: var(--blue-600);
--dark-primary-down: var(--blue-800);
--dark-secondary: var(--azure);
--dark-tertiary: var(--purple);
--dark-accent: var(--yellow);
--dark-base: var(--dark-200);
--dark-offset: var(--dark-400);
--dark-contrast: var(--dark-600);
--dark-head: var(--light-200);
--dark-face: var(--light-400);
--dark-body: var(--light-600);
}
/* default */
:root {
--theme-primary-up: var(--light-primary-up);
--theme-primary: var(--light-primary);
--theme-primary-down: var(--light-primary-down);
--theme-secondary: var(--light-secondary);
--theme-tertiary: var(--light-tertiary);
--theme-accent: var(--light-accent);
--theme-base: var(--light-base);
--theme-offset: var(--light-offset);
--theme-contrast: var(--light-contrast);
--theme-head: var(--light-head);
--theme-face: var(--light-face);
--theme-body: var(--light-body);
}
/* round */
:root {
--round-sm: 3px;
--round-md: 6px;
--round-lg: 9px;
--round: var(--round-md);
}
/* border */
:root {
--border-color: var(--theme-contrast);
--border: 2px solid var(--border-color);
}
/* outline */
:root {
--outline: 2px solid var(--input-color);
}
/* shadow */
:root {
--shadow-lg-inset: inset 0px 0px 20px 4px rgb(0 0 0 / 0.2);
--shadow: 0px 2px 4px 2px rgb(0 0 0 / 0.1);
--shadow-lg: 0px 4px 8px 4px rgb(0 0 0 / 0.2);
}
/* font */
:root {
--font-head: 'Arial', sans-serif;
--font-face: 'Arial', sans-serif;
--font-meta: 'Arial', sans-serif;
}
/* markup */
:root {
--markup-color: var(--theme-primary);
--markup-muted: var(--grey-200);
}
/* copy */
:root {
--copy-letter-spacing: 0;
--copy-line-height: 1.6;
--copy-lhc-top: -0.3em;
--copy-lhc-bottom: -0.35em;
--copy-font-size: 1rem;
--copy-font-weight: 500;
--copy-font-family: var(--font-face);
--copy-color: var(--theme-body);
}
/* heading */
:root {
--heading-letter-spacing: 0;
--heading-line-height: 1.2;
--heading-lhc-top: -0.18em;
--heading-lhc-bottom: -0.25em;
--heading-font-size: 1.2rem;
--heading-font-weight: 700;
--heading-font-family: var(--font-head);
--heading-color: var(--theme-head);
}
/* h1 */
:root {
--h1-font-size: 3.6rem;
--h1-color: var(--theme-head);
}
/* h2 */
:root {
--h2-font-size: 2.4rem;
--h2-color: var(--theme-head);
}
/* h3 */
:root {
--h3-font-size: 2.0rem;
--h3-color: var(--theme-head);
}
/* h4 */
:root {
--h4-font-size: 1.6rem;
--h4-color: var(--theme-head);
}
/* h5 */
:root {
--h5-font-size: 1.6rem;
--h5-color: var(--markup-color);
}
/* h6 */
:root {
--h6-font-size: 1.6rem;
--h6-color: var(--markup-muted);
}
/* eyebrow */
:root {
--eyebrow-letter-spacing: 0;
--eyebrow-line-height: 1.2;
--eyebrow-lhc-top: -0.18em;
--eyebrow-lhc-bottom: -0.25em;
--eyebrow-font-size: 1.2rem;
--eyebrow-font-weight: 700;
--eyebrow-font-family: var(--font-head);
--eyebrow-color: var(--theme-head);
}
/* list */
:root {
--list-line-height: 1.4;
--list-lhc-top: -0.3em;
--list-lhc-bottom: -0.35em;
--list-font-size: 1rem;
--list-color: var(--theme-face);
}
/* quote */
:root {
--quote-line-height: 1.4;
--quote-lhc-top: -0.3em;
--quote-lhc-bottom: -0.35em;
--quote-font-size: 1.2rem;
--quote-color: var(--theme-face);
}
/* meta */
:root {
--meta-line-height: 1.2;
--meta-lhc-top: -0.2em;
--meta-lhc-bottom: -0.3em;
}
/* input */
:root {
--input-color: var(--theme-primary);
--input-hover: var(--theme-primary-up);
--input-active: var(--theme-primary-down);
--input-outline: 2px solid var(--input-color);
--input-backdrop: rgb(64 128 255 / var(--alpha, 0.2));
--input-height-large: 2.8rem;
--input-height: 2.2rem;
--input-height-small: 1.6rem;
--input-border-width-large: 3px;
--input-border-width: 2px;
--input-border-width-small: 1px;
--input-pad-large: 1.2rem;
--input-pad: 0.8rem;
--input-pad-small: 0.5rem;
--input-round: var(--round-sm);
--input-timing: 300ms;
--input-easing: ease;
}
/* card */
:root {
--card-shadow: var(--shadow);
--card-round: var(--round);
--card-background-color: var(--theme-base);
}
/* screen */
:root {
--screen-sm: 480px;
--screen-md: 768px;
--screen-lg: 1024px;
--screen-xl: 2560px;
}
/* max-w */
:root {
--max-w-copy: 36rem;
--max-w-page: 48rem;
--max-w-site: 64rem;
}
/* other */
:root {
--break-size: 1.6rem;
--tab-size: 2.0rem;
}
/* size */
:root {
--size-1: 1px;
--size-2: 2px;
--size-4: 4px;
--size-8: 0.4rem;
--size-10: 0.5rem;
--size-12: 0.6rem;
--size-14: 0.7rem;
--size-16: 0.8rem;
--size-20: 1.0rem;
--size-24: 1.2rem;
--size-32: 1.6rem;
--size-48: 2.4rem;
--size-64: 3.2rem;
--size-80: 4.0rem;
--size-96: 4.8rem;
--size-128: 6.4rem;
--size-break: var(--break-size);
--size-tab: var(--tab-size);
--size: 1em;
--size-rem: 1rem;
}
/* scheme */
[data-scheme] {
--border-color: var(--theme-contrast);
--markup-color: var(--theme-primary);
--copy-color: var(--theme-body);
--heading-color: var(--theme-head);
--h1-color: var(--theme-head);
--h2-color: var(--theme-head);
--h3-color: var(--theme-head);
--h4-color: var(--theme-head);
--eyebrow-color: var(--theme-head);
--list-color: var(--theme-face);
--quote-color: var(--theme-face);
--input-color: var(--theme-primary);
--input-hover: var(--theme-primary-up);
--input-active: var(--theme-primary-down);
--card-background-color: var(--theme-base);
}