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

--unitone--line-height-slope, --unitone--line-height-intercept

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: 8rem.

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 = (8, 1.1) // When font-size: 8rem, line-height: 1.1

Then, the following formula is formed.

y = -0.0714285714286x + 1.6714285714286 // y = line-height, x = Font size ratio

And the respective values are as follows. These values are automatically calculated in conjunction with other CSS variables and do not need to be changed unless there is a special reason.

--unitone--line-height-slope: -0.0714285714286;
--unitone--line-height-intercept: 1.6714285714286;

--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 -2 to 7.

--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-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-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-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-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-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-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`

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.

Typography Both Sides