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:
┌───── Short code indicating what this variable is for
│
│ ┌── Step of the scale this variable controls
│ │
--XX-##
Numeric steps go from smaller to larger by default, and you are advised to adhere to this convention.
Border widths
Border widths
| Variable | Default Value |
|---|---|
--bw-1
|
0.125rem |
--bw-2
|
0.25rem |
--bw-3
|
0.5rem |
--bw-4
|
1rem |
--bw-5
|
2rem |
Font Scale
Font scale, with size 2 being the body font size
| Variable | Default Value |
|---|---|
--fs-1
|
0.875rem |
--fs-2
|
1rem |
--fs-3
|
1.25rem |
--fs-4
|
1.5rem |
--fs-5
|
2.25rem |
--fs-6
|
3rem |
--fs-7
|
4.25rem |
--fs-8
|
5rem |
--fs-9
|
6rem |
Fonts
Fonts to use for sans, serif, etc.
| Variable | Default Value |
|---|---|
--ff-sans
|
Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif |
--ff-serif
|
Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif |
--ff-mono
|
'Nimbus Mono PS', 'Courier New', monospace |
--ff-cursive
|
'Snell Roundhand', 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive |
--ff-fantasy
|
'Party Let', fantasy |
Indent
Indent
| Variable | Default Value |
|---|---|
--ident-1
|
1em |
--ident-2
|
1.5em |
--ident-3
|
2em |
--ident--1
|
-1em |
--ident--2
|
-1.5em |
--ident--3
|
-2em |
Leading
Leading or line-heights
| Variable | Default Value |
|---|---|
--lh-solid
|
1 |
--lh-title
|
1.25 |
--lh-copy
|
1.5 |
Measure
Width for reading text
| Variable | Default Value |
|---|---|
--tw
|
60ch |
--tw-wide
|
75ch |
--tw-narrow
|
50ch |
Spacing
Spacing scale for margins, paddings, widths, positions, etc.
| Variable | Default Value |
|---|---|
--sp-1
|
0.25rem |
--sp-2
|
0.5rem |
--sp-3
|
1rem |
--sp-4
|
2rem |
--sp-5
|
4rem |
--sp-6
|
8rem |
--sp-7
|
12rem |
--sp-8
|
16rem |
Tracking
Tracking or letter-spacing
| Variable | Default Value |
|---|---|
--ls
|
0.1em |
--ls-tight
|
-0.05em |
--ls-mega
|
0.25em |
--ls-none
|
normal |
Black
Blacks
| Variable | Default Value |
|---|---|
--black
|
#000000 |
--black-ish
|
#131313 |
Blue
Tints/Shades for blue
| Variable | Default Value |
|---|---|
--blue-100
|
#000E1C |
--blue-200
|
#00172F |
--blue-300
|
#002E5E |
--blue-400
|
#004E9E |
--blue-500
|
#0069d5 |
--blue-600
|
#50A6FF |
--blue-700
|
#A9D3FF |
--blue-800
|
#E4F1FF |
--blue-900
|
#F9FCFF |
Gray
Tints/Shades for gray
| Variable | Default Value |
|---|---|
--gray-100
|
#0F0F10 |
--gray-200
|
#1A1A1B |
--gray-300
|
#333336 |
--gray-400
|
#56565B |
--gray-500
|
#74747B |
--gray-600
|
#ADADB1 |
--gray-700
|
#D7D7D9 |
--gray-800
|
#F2F2F3 |
--gray-900
|
#FCFCFC |
Green
Tints/Shades for green
| Variable | Default Value |
|---|---|
--green-100
|
#071B0E |
--green-200
|
#0C2D17 |
--green-300
|
#175A2E |
--green-400
|
#27984D |
--green-500
|
#37CB69 |
--green-600
|
#89E0A6 |
--green-700
|
#C5F0D4 |
--green-800
|
#EDFAF2 |
--green-900
|
#FBFEFC |
Orange
Tints/Shades for orange
| Variable | Default Value |
|---|---|
--orange-100
|
#1E0E00 |
--orange-200
|
#331800 |
--orange-300
|
#673000 |
--orange-400
|
#AD5000 |
--orange-500
|
#EA6C00 |
--orange-600
|
#FFA75C |
--orange-700
|
#FFD4AF |
--orange-800
|
#FFF2E6 |
--orange-900
|
#FFFCF9 |
Purple
Tints/Shades for purple
| Variable | Default Value |
|---|---|
--purple-100
|
#0E071B |
--purple-200
|
#170C2D |
--purple-300
|
#2E175A |
--purple-400
|
#4D2798 |
--purple-500
|
#6937cb |
--purple-600
|
#A689E0 |
--purple-700
|
#D4C5F0 |
--purple-800
|
#F2EDFA |
--purple-900
|
#FCFBFE |
Red
Tints/Shades for red
| Variable | Default Value |
|---|---|
--red-100
|
#1E0200 |
--red-200
|
#320300 |
--red-300
|
#640600 |
--red-400
|
#A80A00 |
--red-500
|
#E30D00 |
--red-600
|
#FF6258 |
--red-700
|
#FFB2AD |
--red-800
|
#FFE7E6 |
--red-900
|
#FFFAF9 |
White
Whites
| Variable | Default Value |
|---|---|
--white
|
#FFFFFF |
--white-ish
|
#FBFBFB |
Yellow
Tints/Shades for yellow
| Variable | Default Value |
|---|---|
--yellow-100
|
#242402 |
--yellow-200
|
#3D3D04 |
--yellow-300
|
#797907 |
--yellow-400
|
#CCCC0C |
--yellow-500
|
#F3F331 |
--yellow-600
|
#F8F885 |
--yellow-700
|
#FCFCC3 |
--yellow-800
|
#FEFEEC |
--yellow-900
|
#FFFFFB |