Design system
color
Grouping by "weight"
/* Color: Primary */
--c-pm-900: hsl(204, 96%, 27%);
--c-pm-800: hsl(203, 87%, 34%);
--c-pm-750: hsl(202, 83%, 41%);
--c-pm-700: hsl(201, 79%, 46%);
--c-pm-600: hsl(199, 84%, 55%);
--c-pm-500: hsl(197, 92%, 61%); /* 500 is default */
--c-pm-400: hsl(196, 94%, 67%);
--c-pm-300: hsl(195, 97%, 75%);
--c-pm-200: hsl(195, 100%, 85%);
--c-pm-100: hsl(195, 100%, 95%);
/* Color: Neutrals */
--c-nt-900: hsl(210, 24%, 16%);
--c-nt-800: hsl(209, 20%, 25%);
--c-nt-750: hsl(209, 18%, 30%);
--c-nt-700: hsl(209, 14%, 37%);
--c-nt-600: hsl(211, 12%, 43%);
--c-nt-500: hsl(211, 10%, 53%); /* 500 is default */
--c-nt-400: hsl(211, 13%, 65%);
--c-nt-300: hsl(210, 16%, 82%);
--c-nt-200: hsl(214, 15%, 91%);
--c-nt-100: hsl(216, 33%, 97%);
/* Color: Supporting: Pink */
--c-sp-pnk-900: hsl(320, 100%, 19%);
--c-sp-pnk-800: hsl(322, 93%, 27%);
--c-sp-pnk-750: hsl(324, 93%, 33%);
--c-sp-pnk-700: hsl(326, 90%, 39%);
--c-sp-pnk-600: hsl(328, 85%, 46%);
--c-sp-pnk-500: hsl(330, 79%, 56%); /* 500 is default */
--c-sp-pnk-400: hsl(334, 86%, 67%);
--c-sp-pnk-300: hsl(336, 100%, 77%);
--c-sp-pnk-200: hsl(338, 100%, 86%);
--c-sp-pnk-100: hsl(341, 100%, 95%);units
/* Units */
--u-100: .0625rem; /* 1px */
--u-125: .125rem; /* 2px */
--u-150: .25rem; /* 4px */
--u-175: .375rem; /* 6px */
--u-200: .5rem; /* 8px */
--u-225: .625rem; /* 10px */
--u-250: .75rem; /* 12px */
--u-275: .875rem; /* 14px */
--u-300: 1rem; /* 16px */
--u-325: 1.125rem; /* 18px */
--u-350: 1.25rem; /* 20px */
--u-375: 1.375rem; /* 22px */
--u-400: 1.5rem; /* 24px */
--u-475: 1.875rem; /* 30px */
--u-500: 2rem; /* 32px */
--u-550: 2.25rem; /* 36px */
--u-600: 2.5rem; /* 40px */
--u-700: 3rem; /* 48px */
--u-800: 3.5rem; /* 60px */
--u-850: 4.5rem; /* 72px */
--u-875: 5.25rem; /* 84px */
--u-900: 6rem; /* 96px */fonts
--f-pm: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,
Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
/* Maybe ... */
--f-fz-100: var(--u-200); /* 8px */
--f-fz-125: var(--u-225); /* 10px */
...
/* Fonts: Headers */
--f-h1: var(--f-fz-750);
--f-h2: var(--f-fz-650);box-shadow
/* Box-shadows */
--bxsh-100: 0 1px 3px hsla(0, 0%, 0%, .12), 0 1px 2px hsla(0, 0%, 0%, .24);
--bxsh-200: inset 0 0 0 6px rgba(0, 0, 0, 0.3), inset 0 0 0 10px rgba(255, 255, 255, 0.3);
--bxsh-300: 0 3px 6px hsla(0, 0%, 0%, .15), 0 2px 4px hsla(0, 0%, 0%, .12);
--bxsh-400: inset 0 0 0 0.25em #fff;
--bxsh-600: 0 10px 20px hsla(0, 0%, 0%, .15), 0 3px 6px hsla(0, 0%, 0%, .10);
--bxsh-800: 0 15px 25px hsla(0, 0%, 0%, .15), 0 5px 10px hsla(0, 0%, 0%, .5);
--bxsh-900: 0 20px 40px hsla(0, 0%, 0%, .2);animation timing
/* Animation Timing */
--a-tm-100: 100ms; /* Immediate */
--a-tm-200: 200ms;
--a-tm-300: 300ms; /* Fast */
--a-tm-400: 400ms; /* Slower */
--a-tm-700: 700ms; /* Deliberate */
--a-tm-900: 9000ms; /* Internet Explorer */z-index
/* Scss + function */
$zindex: (
"app": 100,
"dropdown": 500,
"menu": 700,
"overlay": 800,
"modal": 900
);
@function z($layer) {
@return map-get($zindex, $layer);
}
.modal { z-index: z("modal"); }
/* Or as CSS Custom props: */
--z-overlay: 800;
--z-modal: 900;
.modal { z-index: var(--z-modal); }inline icons as utf-8
--i-plus: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 16 16'%3E%3Cpath d='M15 7h-6v-6h-2v6h-6v2h6v6h2v-6h6z'
fill='white'%3E%3C/path%3E%3C/svg%3E");
--i-minus: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 16 16'%3E%3Cpath d='M1 7h14v2h-14v-2z'
fill='white'%3E%3C/path%3E%3C/svg%3E");order: smacss
display
visibility
position
z-index
top
right
bottom
left
box-sizing
grid ...
flex
flex-basis ...
align-content ...
justify-content
order
width
min-width
max-width
height
min-height
max-height
margin ...order: alphabetical
.field {
-moz-appearance: none;
-webkit-appearance: none;
background-color: var(--fld-bgc);
border-color: var(--fld-bdc);
border-radius: var(--fld-bdrs);
border-style: var(--fld-bds);
border-width: var(--fld-bdw);
color: var(--c-txt);
flex: 1;
font-family: inherit;
font-size: var(--fld-fz);
line-height: var(--fld-lh);
padding: var(--fld-p);
}So ... NEVER write inline:
- background-color
- border-color
- color
- font-family
- font-size
- icons
- timing
- z-index
... but point to variables
design-system
By Mads Stoumann
design-system
Suggestion to CSS design-system
