LowCSS provides CSS variables generated from your custom configuration, making it even easier to maintain a consistent color scheme across your project.

The following CSS variables are available, derived from the default configuration of LowCSS.

Colors Variables

The colors variables are generated from values in low.$colors:

Variable name	Value
`--low-cool-50`	`#F6F7F9`
`--low-cool-100`	`#E7E9EF`
`--low-cool-200`	`#CBD1DC`
`--low-cool-300`	`#ACB6C8`
`--low-cool-400`	`#8E9AB4`
`--low-cool-500`	`#6F7F9F`
`--low-cool-600`	`#5A6987`
`--low-cool-700`	`#455168`
`--low-cool-800`	`#313949`
`--low-cool-900`	`#1F242E`
`--low-cool-950`	`#14181F`
`--low-gray-50`	`#F9FAFA`
`--low-gray-100`	`#F3F4F5`
`--low-gray-200`	`#D5D9DC`
`--low-gray-300`	`#B7BDC3`
`--low-gray-400`	`#9BA3AC`
`--low-gray-500`	`#7C8792`
`--low-gray-600`	`#646E78`
`--low-gray-700`	`#4A5259`
`--low-gray-800`	`#31363A`
`--low-gray-900`	`#191C1F`
`--low-gray-950`	`#0C0D0E`
`--low-neutral-50`	`#FAFAFA`
`--low-neutral-100`	`#F5F5F5`
`--low-neutral-200`	`#E6E6E6`
`--low-neutral-300`	`#C9C9C9`
`--low-neutral-400`	`#ABABAB`
`--low-neutral-500`	`#8F8F8F`
`--low-neutral-600`	`#737373`
`--low-neutral-700`	`#545454`
`--low-neutral-800`	`#383838`
`--low-neutral-900`	`#1A1A1A`
`--low-neutral-950`	`#0D0D0D`
`--low-red-50`	`#FCE9EB`
`--low-red-100`	`#F9D2D6`
`--low-red-200`	`#F2A6AD`
`--low-red-300`	`#EC7985`
`--low-red-400`	`#E54D5C`
`--low-red-500`	`#DF2033`
`--low-red-600`	`#B21A29`
`--low-red-700`	`#86131F`
`--low-red-800`	`#590D14`
`--low-red-900`	`#2D060A`
`--low-red-950`	`#160305`
`--low-orange-50`	`#FEF0E6`
`--low-orange-100`	`#FEE1CD`
`--low-orange-200`	`#FDC49B`
`--low-orange-300`	`#FBA66A`
`--low-orange-400`	`#FA8938`
`--low-orange-500`	`#F96B06`
`--low-orange-600`	`#C75605`
`--low-orange-700`	`#954004`
`--low-orange-800`	`#642B02`
`--low-orange-900`	`#321501`
`--low-orange-950`	`#190B01`
`--low-yellow-50`	`#FFF9E5`
`--low-yellow-100`	`#FFF2CC`
`--low-yellow-200`	`#FFE699`
`--low-yellow-300`	`#FFD966`
`--low-yellow-400`	`#FFCC33`
`--low-yellow-500`	`#FFBF00`
`--low-yellow-600`	`#CC9900`
`--low-yellow-700`	`#997300`
`--low-yellow-800`	`#664D00`
`--low-yellow-900`	`#332600`
`--low-yellow-950`	`#191300`
`--low-green-50`	`#E5FBED`
`--low-green-100`	`#CBF6DB`
`--low-green-200`	`#9BEEB9`
`--low-green-300`	`#66E595`
`--low-green-400`	`#36DD73`
`--low-green-500`	`#1FB757`
`--low-green-600`	`#199446`
`--low-green-700`	`#126D34`
`--low-green-800`	`#0D4A23`
`--low-green-900`	`#062311`
`--low-green-950`	`#031108`
`--low-teal-50`	`#E3FCFA`
`--low-teal-100`	`#CCFAF6`
`--low-teal-200`	`#99F5ED`
`--low-teal-300`	`#66F0E4`
`--low-teal-400`	`#33EADB`
`--low-teal-500`	`#15D0C1`
`--low-teal-600`	`#11A79A`
`--low-teal-700`	`#0D7D74`
`--low-teal-800`	`#08534D`
`--low-teal-900`	`#042A27`
`--low-teal-950`	`#021311`
`--low-blue-50`	`#E6F0FF`
`--low-blue-100`	`#CDE1FE`
`--low-blue-200`	`#9BC4FD`
`--low-blue-300`	`#69A6FC`
`--low-blue-400`	`#3789FB`
`--low-blue-500`	`#056BFA`
`--low-blue-600`	`#0456C8`
`--low-blue-700`	`#034096`
`--low-blue-800`	`#022B64`
`--low-blue-900`	`#011532`
`--low-blue-950`	`#000B19`
`--low-indigo-50`	`#ECECFD`
`--low-indigo-100`	`#DEDEFC`
`--low-indigo-200`	`#B8B9F9`
`--low-indigo-300`	`#9799F7`
`--low-indigo-400`	`#7173F4`
`--low-indigo-500`	`#5053F1`
`--low-indigo-600`	`#1316EC`
`--low-indigo-700`	`#0E11B3`
`--low-indigo-800`	`#090B76`
`--low-indigo-900`	`#05063D`
`--low-indigo-950`	`#02031C`
`--low-violet-50`	`#F3ECFE`
`--low-violet-100`	`#E6D8FD`
`--low-violet-200`	`#CEB1FB`
`--low-violet-300`	`#B58BF9`
`--low-violet-400`	`#9C64F7`
`--low-violet-500`	`#843DF5`
`--low-violet-600`	`#610CE9`
`--low-violet-700`	`#4809AF`
`--low-violet-800`	`#300674`
`--low-violet-900`	`#18033A`
`--low-violet-950`	`#0C011D`
`--low-pink-50`	`#FDE8F2`
`--low-pink-100`	`#FBD5E8`
`--low-pink-200`	`#F6ACD1`
`--low-pink-300`	`#F282BA`
`--low-pink-400`	`#ED59A3`
`--low-pink-500`	`#E92F8C`
`--low-pink-600`	`#CB1570`
`--low-pink-700`	`#981054`
`--low-pink-800`	`#650B38`
`--low-pink-900`	`#33051C`
`--low-pink-950`	`#17020D`
`--low-black`	`#000`
`--low-white`	`#fff`
`--low-transparent`	`transparent`
`--low-current`	`currentColor`

Font Family Variables

The font family variables are generated from values in low.$font-families;

Variable name	Value
`--low-font-sans`	`-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif`
`--low-font-serif`	`Georgia,Cambria,Times New Roman,Times,serif`
`--low-font-mono`	`SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace`

Font Size Variables

Font sizes variables were added in v0.23.0.

The font size variables are generated from values in low.$font-sizes;

Variable name	Value
`--low-font-3xs`	`0.5rem`
`--low-font-2xs`	`0.625rem`
`--low-font-xs`	`0.75rem`
`--low-font-sm`	`0.875rem`
`--low-font-base`	`1rem`
`--low-font-lg`	`1.125rem`
`--low-font-xl`	`1.25rem`
`--low-font-2xl`	`1.5rem`
`--low-font-3xl`	`1.875rem`
`--low-font-4xl`	`2.25rem`
`--low-font-5xl`	`3rem`
`--low-font-6xl`	`3.75rem`
`--low-font-7xl`	`4.5rem`
`--low-font-8xl`	`6rem`
`--low-font-9xl`	`8rem`

Font Weight Variables

Font weights variables were added in v0.23.0.

The font weight variables are generated from values in low.$font-weights;

Variable name	Value
`--low-font-thin`	`100`
`--low-font-extralight`	`200`
`--low-font-light`	`300`
`--low-font-normal`	`400`
`--low-font-medium`	`500`
`--low-font-semibold`	`600`
`--low-font-bold`	`700`
`--low-font-extrabold`	`800`
`--low-font-black`	`900`

Tracking Variables

Tracking variables were added in v0.23.0.

The tracking variables (used for letter-spacing) are generated from values in low.$trackings;

Variable name	Value
`--low-tracking-tighter`	`-0.05em`
`--low-tracking-tight`	`-0.025em`
`--low-tracking-normal`	`0`
`--low-tracking-wide`	`0.025em`
`--low-tracking-wider`	`0.05em`
`--low-tracking-widest`	`0.1em`

Leading Variables

Leading variables were added in v0.23.0.

The leading variables (used for line-height) are generated from values in low.$leadings;

Variable name	Value
`--low-leading-3`	`0.75rem`
`--low-leading-4`	`1rem`
`--low-leading-5`	`1.25rem`
`--low-leading-6`	`1.5rem`
`--low-leading-7`	`1.75rem`
`--low-leading-8`	`2rem`
`--low-leading-9`	`2.25rem`
`--low-leading-10`	`2.5rem`
`--low-leading-none`	`1`
`--low-leading-tight`	`1.25`
`--low-leading-snug`	`1.375`
`--low-leading-normal`	`1.5`
`--low-leading-relaxed`	`1.625`
`--low-leading-loose`	`2`

Spacing Variables

Spacing variables were added in v0.23.0.

The spacing variables are generated from values in low.$spacing;

Variable name	Value
`--low-space-0`	`0`
`--low-space-1`	`0.25rem`
`--low-space-2`	`0.5rem`
`--low-space-3`	`0.75rem`
`--low-space-4`	`1rem`
`--low-space-5`	`1.25rem`
`--low-space-6`	`1.5rem`
`--low-space-7`	`1.75rem`
`--low-space-8`	`2rem`
`--low-space-9`	`2.25rem`
`--low-space-10`	`2.5rem`
`--low-space-11`	`2.75rem`
`--low-space-12`	`3rem`
`--low-space-14`	`3.5rem`
`--low-space-16`	`4rem`
`--low-space-20`	`5rem`
`--low-space-24`	`6rem`
`--low-space-28`	`7rem`
`--low-space-32`	`8rem`
`--low-space-36`	`9rem`
`--low-space-40`	`10rem`
`--low-space-44`	`11rem`
`--low-space-48`	`12rem`
`--low-space-52`	`13rem`
`--low-space-56`	`14rem`
`--low-space-60`	`15rem`
`--low-space-64`	`16rem`
`--low-space-72`	`18rem`
`--low-space-80`	`20rem`
`--low-space-88`	`22rem`
`--low-space-96`	`24rem`
`--low-space-px`	`1px`
`--low-space-0.5`	`0.125rem`
`--low-space-1.5`	`0.375rem`
`--low-space-2.5`	`0.625rem`
`--low-space-3.5`	`0.875rem`
`--low-space-half`	`50%`
`--low-space-full`	`100%`

Using CSS Variables

You can access the CSS variables in your CSS or SASS code. For example:

.my-element {
    background-color: var(--low-blue-600);
    color: var(--low-white);
}

Usage

Reset CSS