Tokens (Global CSS Variables)

Typography

--unitone--measure

Length of one line of text.

--unitone--half-leading

The size of the margins added above and below the text. The size of one line (line-height) is calculated by the following formula.


1 * var(--unitone--half-leading) * 2

In general, the larger the font size, the narrower the line spacing between lines, making text easier to read. For this reason, line-height is often specified together with font-size, for example, line-height: 1.1 for font-size: 5rem.

That’s a lot of work. Therefore, we created a mechanism to automatically optimize the line spacing according to the font size at all times.

For example, suppose you want to use the following as a standard for line-height.


A = (1, 1.6) // When font-size: 1rem, line-height: 1.6
B = (5, 1.1) // When font-size: 5rem, line-height: 1.1

Then, the following formula is formed.


y = -0.1125x + 1.7125 | y = line-height, x = Font size ratio

--unitone--min-half-leading

As explained above, the minimum line-height is 1.1. The minimum value is determined by the following formula.


line-height: calc(1 + 2 * var(--unitone--min-half-leading));

This value can be customized.

--unitone--base-font-size

Base font size. Specified numerically.

--unitone--font-family

Base font-family.

Margin / Gap / Padding

Space sizes are available in variations based on the Fibonacci sequence. Can be set from -3 to 7. If it is 1 or more, adding s will shrink it to size -1 on mobile. (e.g. 1s) If it is 2 or more, adding m will shrink it to size 1 on mobile. (e.g. 2m)

--unitone--s{variation}

Standard. Mainly for margin / gap.

Changes in conjunction with --unitone--half-leading and --unitone--base-font-size.

For variations 2 and above, clamp is used to adjust the margins so that they do not become too large on small screens.

CSS variables	Specific value
`--unitone--s-3`	The default is about `0.3em`.
`--unitone--s-2`	The default is about `0.53em`.
`--unitone--s-1`	The default is about `1.07em`.
`--unitone--s0`	`0em`
`--unitone--s1`	The default is `1.6em`.
`--unitone--s2`	The Default is about `2.67em` to about `2.37em`.
`--unitone--s3`	The Default is about `4.27em` to about `2.9em`.
`--unitone--s4`	The Default is about `6.93em` to about `3.79em`.
`--unitone--s5`	The Default is about `11.2em` to about `5.21em`.
`--unitone--s6`	The Default is about `18.13em` to about `7.51em`.
`--unitone--s7`	The Default is about `29.33em` to about `11.23em`.

--unitone--s-3

--unitone--s-2

--unitone--s-1

--unitone--s0

--unitone--s1

--unitone--s2

--unitone--s3

--unitone--s4

--unitone--s5

--unitone--s6

--unitone--s7

--unitone--p{variation}

For padding.

Changes in conjunction with --unitone--half-leading and --unitone--base-font-size.

For variations 2 and above, clamp is used to adjust the margins so that they do not become too large on small screens (--unitone--s{variation} will also be adjusted, but with a larger reduction).

CSS variables	Specific value
`--unitone--p-3`	The default is about `0.3em`.
`--unitone--p-2`	The default is about `0.53em`.
`--unitone--p-1`	The default is about `1.07em`.
`--unitone--p0`	`0em`
`--unitone--p1`	The default is `1.6em`.
`--unitone--p2`	The Default is about `2.67em` to about `1.81em`.
`--unitone--p3`	The Default is about `4.27em` to about `2.01em`.
`--unitone--p4`	The Default is about `6.93em` to about `2.34em`.
`--unitone--p5`	The Default is about `11.2em` to about `2.86em`.
`--unitone--p6`	The Default is about `18.13em` to about `3.72em`.
`--unitone--p7`	The Default is about `29.33em` to about `5.09em`.

--unitone--p-3

--unitone--p-2

--unitone--p-1

--unitone--p0

--unitone--p1

--unitone--p2

--unitone--p3

--unitone--p4

--unitone--p5

--unitone--p6

--unitone--p7

--unitone--em{variation}

em base.

Changes in conjunction with --unitone--half-leading and --unitone--base-font-size.

CSS variables	Specific value
`--unitone--em-3`	The default is about `0.3em`.
`--unitone--em-2`	The default is about `0.53em`.
`--unitone--em-1`	The default is about `1.07em`.
`--unitone--em0`	`0em`
`--unitone--em1`	The default is `1.6em`.
`--unitone--em2`	The Default is about `2.67em`.
`--unitone--em3`	The Default is about `4.27em`.
`--unitone--em4`	The Default is about `6.93em`.
`--unitone--em5`	The Default is about `11.2em`.
`--unitone--em6`	The Default is about `18.13em`.
`--unitone--em7`	The Default is about `29.33em`.

--unitone--rem{variation}

rem base.

Changes in conjunction with --unitone--half-leading and --unitone--base-font-size.

CSS variables	Specific value
`--unitone--rem-3`	The default is about `0.3rem`.
`--unitone--rem-2`	The default is about `0.53rem`.
`--unitone--rem-1`	The default is about `1.07rem`.
`--unitone--rem0`	`0rem`
`--unitone--rem1`	The default is `1.6rem`.
`--unitone--rem2`	The Default is about `2.67rem`.
`--unitone--rem3`	The Default is about `4.27rem`.
`--unitone--rem4`	The Default is about `6.93rem`.
`--unitone--rem5`	The Default is about `11.2rem`.
`--unitone--rem6`	The Default is about `18.13rem`.
`--unitone--rem7`	The Default is about `29.33rem`.

Grid

--unitone--grid-gap

Gap of the grid.

--unitone--pg{ number of columns }

CSS variables that indicates how many columns the parent would occupy if it were divided into 12 columns.

CSS variables	Specific value
`--unitone--pg0`	0.
`--unitone--pg1`	For 1 column.
`--unitone--pg2`	For 2 column.
`--unitone--pg3`	For 3 column.
`--unitone--pg4`	For 4 column.
`--unitone--pg5`	For 5 column.
`--unitone--pg6`	For 6 column.
`--unitone--pg7`	For 7 column.
`--unitone--pg8`	For 8 column.
`--unitone--pg9`	For 9 column.
`--unitone--pg10`	For 10 column.
`--unitone--pg11`	For 11 column.
`--unitone--pg12`	For 12 column.

--unitone--cg{ number of columns }

CSS variables that indicates how many columns the container width would occupy if it were divided into 12 columns.

CSS variables	Specific value
`--unitone--cg0`	0.
`--unitone--cg1`	For 1 column.
`--unitone--cg2`	For 2 column.
`--unitone--cg3`	For 3 column.
`--unitone--cg4`	For 4 column.
`--unitone--cg5`	For 5 column.
`--unitone--cg6`	For 6 column.
`--unitone--cg7`	For 7 column.
`--unitone--cg8`	For 8 column.
`--unitone--cg9`	For 9 column.
`--unitone--cg10`	For 10 column.
`--unitone--cg11`	For 11 column.
`--unitone--cg12`	For 12 column.

Gap

--unitone--global--gap

It is mainly specified for block gaps where the blocks are aligned left to right or on a grid.

--unitone--global--text-gap

It is mainly used for gaps between blocks of text that are aligned vertically or horizontally.

Gutters

--unitone--global--gutters

It is specified in the left and right margins of the container.

Colors

Text

Color	Description	CSS variables
	For background	`--unitone--color--background`
	For background (Inversion color)	`--unitone--color--background-alt`
	For text	`--unitone--color--text`
	For text (Inversion color)	`--unitone--color--text-alt`
	For text (Colors not inverted in dark mode)	`--unitone--color--text-immutable`

White

Color	Description	CSS variables
	White	`--unitone--color--white`

Gray

Color	Description	CSS variables
	Pale Gray	`--unitone--color--pale-gray`
	Bright Gray	`--unitone--color--bright-gray`
	Light Gray	`--unitone--color--light-gray`
	Gray	`--unitone--color--gray`
	Dark Gray	`--unitone--color--dark-gray`
	Heavy Gray	`--unitone--color--heavy-gray`

Twilight

Color	Description	CSS variables
	Twilight Light	`--unitone--color--twilight-light`
	Twilight	`--unitone--color--twilight`
	Twilight Heavy	`--unitone--color--twilight-heavy`

Dimmed

Color	Description	CSS variables
	Dimmed Light	`--unitone--color--dimmed-light`
	Dimmed	`--unitone--color--dimmed`
	Dimmed Heavy	`--unitone--color--dimmed-heavy`

Red

Color	Description	CSS variables
	Pale Red	`--unitone--color--pale-red`
	Bright Red	`--unitone--color--bright-red`
	Light Red	`--unitone--color--light-red`
	Red	`--unitone--color--red`
	Dark Red	`--unitone--color--dark-red`
	Heavy Red	`--unitone--color--heavy-red`

Orange

Color	Description	CSS variables
	Pale Orange	`--unitone--color--pale-orange`
	Bright Orange	`--unitone--color--bright-orange`
	Light Orange	`--unitone--color--light-orange`
	Orange	`--unitone--color--orange`
	Dark Orange	`--unitone--color--dark-orange`
	Heavy Orange	`--unitone--color--heavy-orange`

Yellow

Color	Description	CSS variables
	Pale Yellow	`--unitone--color--pale-yellow`
	Bright Yellow	`--unitone--color--bright-yellow`
	Light Yellow	`--unitone--color--light-yellow`
	Yellow	`--unitone--color--yellow`
	Dark Yellow	`--unitone--color--dark-yellow`
	Heavy Yellow	`--unitone--color--heavy-yellow`

Lime

Color	Description	CSS variables
	Pale Lime	`--unitone--color--pale-lime`
	Bright Lime	`--unitone--color--bright-lime`
	Light Lime	`--unitone--color--light-lime`
	Lime	`--unitone--color--lime`
	Dark Lime	`--unitone--color--dark-lime`
	Heavy Lime	`--unitone--color--heavy-lime`

Green

Color	Description	CSS variables
	Pale Green	`--unitone--color--pale-green`
	Bright Green	`--unitone--color--bright-green`
	Light Green	`--unitone--color--light-green`
	Green	`--unitone--color--green`
	Dark Green	`--unitone--color--dark-green`
	Heavy Green	`--unitone--color--heavy-green`

Teal

Color	Description	CSS variables
	Pale Teal	`--unitone--color--pale-teal`
	Bright Teal	`--unitone--color--bright-teal`
	Light Teal	`--unitone--color--light-teal`
	Teal	`--unitone--color--teal`
	Dark Teal	`--unitone--color--dark-teal`
	Heavy Teal	`--unitone--color--heavy-teal`

Cyan

Color	Description	CSS variables
	Pale Cyan	`--unitone--color--pale-cyan`
	Bright Cyan	`--unitone--color--bright-cyan`
	Light Cyan	`--unitone--color--light-cyan`
	Cyan	`--unitone--color--cyan`
	Dark Cyan	`--unitone--color--dark-cyan`
	Heavy Cyan	`--unitone--color--heavy-cyan`

Blue

Color	Description	CSS variables
	Pale Blue	`--unitone--color--pale-blue`
	Bright Blue	`--unitone--color--bright-blue`
	Light Blue	`--unitone--color--light-blue`
	Blue	`--unitone--color--blue`
	Dark Blue	`--unitone--color--dark-blue`
	Heavy Blue	`--unitone--color--heavy-blue`

Indigo

Color	Description	CSS variables
	Pale Indigo	`--unitone--color--pale-indigo`
	Bright Indigo	`--unitone--color--bright-indigo`
	Light Indigo	`--unitone--color--light-indigo`
	Indigo	`--unitone--color--indigo`
	Dark Indigo	`--unitone--color--dark-indigo`
	Heavy Indigo	`--unitone--color--heavy-indigo`

Violet

Color	Description	CSS variables
	Pale Violet	`--unitone--color--pale-violet`
	Bright Violet	`--unitone--color--bright-violet`
	Light Violet	`--unitone--color--light-violet`
	Violet	`--unitone--color--violet`
	Dark Violet	`--unitone--color--dark-violet`
	Heavy Violet	`--unitone--color--heavy-violet`

Purple

Color	Description	CSS variables
	Pale Purple	`--unitone--color--pale-purple`
	Bright Purple	`--unitone--color--bright-purple`
	Light Purple	`--unitone--color--light-purple`
	Purple	`--unitone--color--purple`
	Dark Purple	`--unitone--color--dark-purple`
	Heavy Purple	`--unitone--color--heavy-purple`

Pink

Color	Description	CSS variables
	Pale Pink	`--unitone--color--pale-pink`
	Bright Pink	`--unitone--color--bright-pink`
	Light Pink	`--unitone--color--light-pink`
	Pink	`--unitone--color--pink`
	Dark Pink	`--unitone--color--dark-pink`
	Heavy Pink	`--unitone--color--heavy-pink`

Container size

--unitone--container-max-width

Container width.

Border

--unitone--global--border-radius

Base border-radius.

Shadow

--unitone--global--box-shadow

Base box-shadow.