MelangeCSS - Reference

MelangeCSS's design system uses scales and steps encoded in CSS variables. By default, these values are provided by Melange, however, you can change these variables to suit your own needs. Below are all the varaibles, their default values as provided by Melange, and the currently computed value running in your browser right now.

Each variable conforms to a naming scheme, defined as follows:

    ┌───────── Prefix indicating this is a MelangeCSS variable
    │
    │   ┌───── Short code indicating what this variable is for
    │   │
    │   │  ┌── Step of the scale this variable controls
    │   │  │
  --mg-XX-##

Numeric steps go from smaller to larger by default, and you are advised to adhere to this convention.

Border widths

Variable	Default Value
`--mg-bw-1`	`0.125rem`
`--mg-bw-2`	`0.25rem`
`--mg-bw-3`	`0.5rem`
`--mg-bw-4`	`1rem`
`--mg-bw-5`	`2rem`

Font Scale

Font scale, with size 2 being the body font size

Variable	Default Value
`--mg-fs-1`	`0.875rem`
`--mg-fs-2`	`1rem`
`--mg-fs-3`	`1.25rem`
`--mg-fs-4`	`1.5rem`
`--mg-fs-5`	`2.25rem`
`--mg-fs-6`	`3rem`
`--mg-fs-7`	`4.25rem`
`--mg-fs-8`	`5rem`
`--mg-fs-9`	`6rem`

Fonts

Fonts to use for sans, serif, etc.

Variable	Default Value
`--mg-ff-sans`	`Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif`
`--mg-ff-serif`	`Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif`
`--mg-ff-mono`	`'Nimbus Mono PS', 'Courier New', monospace`
`--mg-ff-cursive`	`'Snell Roundhand', 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive`
`--mg-ff-fantasy`	`'Party Let', fantasy`

Indent

Variable	Default Value
`--mg-ident-1`	`1em`
`--mg-ident-2`	`1.5em`
`--mg-ident-3`	`2em`
`--mg-ident--1`	`-1em`
`--mg-ident--2`	`-1.5em`
`--mg-ident--3`	`-2em`

Leading

Leading or line-heights

Variable	Default Value
`--mg-lh-solid`	`1`
`--mg-lh-title`	`1.25`
`--mg-lh-copy`	`1.5`

Measure

Width for reading text

Variable	Default Value
`--mg-tw`	`60ch`
`--mg-tw-wide`	`75ch`
`--mg-tw-narrow`	`50ch`

Spacing

Spacing scale for margins, paddings, widths, positions, etc.

Variable	Default Value
`--mg-sp-1`	`0.25rem`
`--mg-sp-2`	`0.5rem`
`--mg-sp-3`	`1rem`
`--mg-sp-4`	`2rem`
`--mg-sp-5`	`4rem`
`--mg-sp-6`	`8rem`
`--mg-sp-7`	`12rem`
`--mg-sp-8`	`16rem`

Tracking

Tracking or letter-spacing

Variable	Default Value
`--mg-ls`	`0.1em`
`--mg-ls-tight`	`-0.05em`
`--mg-ls-mega`	`0.25em`
`--mg-ls-none`	`normal`

Black

Blacks

Variable	Default Value
`--mg-black`	`#000000`
`--mg-black-ish`	`#131313`

Blue

Tints/Shades for blue

Variable	Default Value
`--mg-blue-100`	`#000E1C`
`--mg-blue-200`	`#00172F`
`--mg-blue-300`	`#002E5E`
`--mg-blue-400`	`#004E9E`
`--mg-blue-500`	`#0069d5`
`--mg-blue-600`	`#50A6FF`
`--mg-blue-700`	`#A9D3FF`
`--mg-blue-800`	`#E4F1FF`
`--mg-blue-900`	`#F9FCFF`

Gray

Tints/Shades for gray

Variable	Default Value
`--mg-gray-100`	`#0F0F10`
`--mg-gray-200`	`#1A1A1B`
`--mg-gray-300`	`#333336`
`--mg-gray-400`	`#56565B`
`--mg-gray-500`	`#74747B`
`--mg-gray-600`	`#ADADB1`
`--mg-gray-700`	`#D7D7D9`
`--mg-gray-800`	`#F2F2F3`
`--mg-gray-900`	`#FCFCFC`

Green

Tints/Shades for green

Variable	Default Value
`--mg-green-100`	`#071B0E`
`--mg-green-200`	`#0C2D17`
`--mg-green-300`	`#175A2E`
`--mg-green-400`	`#27984D`
`--mg-green-500`	`#37CB69`
`--mg-green-600`	`#89E0A6`
`--mg-green-700`	`#C5F0D4`
`--mg-green-800`	`#EDFAF2`
`--mg-green-900`	`#FBFEFC`

Orange

Tints/Shades for orange

Variable	Default Value
`--mg-orange-100`	`#1E0E00`
`--mg-orange-200`	`#331800`
`--mg-orange-300`	`#673000`
`--mg-orange-400`	`#AD5000`
`--mg-orange-500`	`#EA6C00`
`--mg-orange-600`	`#FFA75C`
`--mg-orange-700`	`#FFD4AF`
`--mg-orange-800`	`#FFF2E6`
`--mg-orange-900`	`#FFFCF9`

Purple

Tints/Shades for purple

Variable	Default Value
`--mg-purple-100`	`#0E071B`
`--mg-purple-200`	`#170C2D`
`--mg-purple-300`	`#2E175A`
`--mg-purple-400`	`#4D2798`
`--mg-purple-500`	`#6937cb`
`--mg-purple-600`	`#A689E0`
`--mg-purple-700`	`#D4C5F0`
`--mg-purple-800`	`#F2EDFA`
`--mg-purple-900`	`#FCFBFE`

Red

Tints/Shades for red

Variable	Default Value
`--mg-red-100`	`#1E0200`
`--mg-red-200`	`#320300`
`--mg-red-300`	`#640600`
`--mg-red-400`	`#A80A00`
`--mg-red-500`	`#E30D00`
`--mg-red-600`	`#FF6258`
`--mg-red-700`	`#FFB2AD`
`--mg-red-800`	`#FFE7E6`
`--mg-red-900`	`#FFFAF9`

White

Whites

Variable	Default Value
`--mg-white`	`#FFFFFF`
`--mg-white-ish`	`#FBFBFB`

Yellow

Tints/Shades for yellow

Variable	Default Value
`--mg-yellow-100`	`#242402`
`--mg-yellow-200`	`#3D3D04`
`--mg-yellow-300`	`#797907`
`--mg-yellow-400`	`#CCCC0C`
`--mg-yellow-500`	`#F3F331`
`--mg-yellow-600`	`#F8F885`
`--mg-yellow-700`	`#FCFCC3`
`--mg-yellow-800`	`#FEFEEC`
`--mg-yellow-900`	`#FFFFFB`

MelangeCSS Reference

Variables