minimal set of CSS variables and utilities

Typography

Type scale

Ag · 12px/16px
Ag · 16px/24px
Ag · 22px/32px
Ag · 36px/40px
Ag · 44px/48px
Variables
--fontSize-xs
--lineHeight-xs

--fontSize-s
--lineHeight-s

--fontSize-m
--lineHeight-m

--fontSize-l
--lineHeight-l

--fontSize-xl
--lineHeight-xl
Utility classes
.textSize-xs
.textSize-s
.textSize-m
.textSize-l
.textSize-xl

Weights

Ag · 400
Ag · 700
Variables
--fontWeight-400
--fontWeight-700
Utility classes
.fontWeight-400
.fontWeight-700

Spacing

Spaces

Use spaces to define any apacing, widths and heights.
Spaces use x2 increment, each space is twice as big as the previous one to make sure there is a consistent contrast between.

Variables
--space-s
--space-m
--space-l
--space-xl
--space-2xl
--space-3xl
--space-4xl
--space-5xl
Utility classes
.width- s | m | l | xl | 2xl | 3xl | 4xl | 5xl
.minWidth- s | m | l | xl | 2xl | 3xl | 4xl | 5xl
.maxWidth- s | m | l | xl | 2xl | 3xl | 4xl | 5xl

.heght- s | m | l | xl | 2xl | 3xl | 4xl | 5xl
.minHeght- s | m | l | xl | 2xl | 3xl | 4xl | 5xl
.maxHeght- s | m | l | xl | 2xl | 3xl | 4xl | 5xl

Spaceframes

Use spaceframes to define inner space in a container element.

Variables
--spaceframe-s
--spaceframe-m
--spaceframe-l
--spaceframe-xl
Utility classes
.spaceframe-s
.spaceframe-m
.spaceframe-l
.spaceframe-xl

Spacers

Use spacer to define margins between elements.

Utility classes
.spacerBottom-s
.spacerBottom-m
.spacerBottom-l
.spacerBottom-xl

.spacerTop-s
.spacerTop-m
.spacerTop-l
.spacerTop-xl
Utility classes
.spacerRight-s
.spacerRight-m
.spacerRight-l
.spacerRight-xl

.spacerLeft-s
.spacerLeft-m
.spacerLeft-l
.spacerLeft-xl

Color

Greyscale

Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Variables
--c-grey-1
--c-grey-2
--c-grey-3
--c-grey-4
--c-grey-5
--c-grey-6
--c-grey-7
--c-grey-8
Utility classes
.c-grey-1
.c-grey-2
.c-grey-3
.c-grey-4
.c-grey-5
.c-grey-6
.c-grey-7
.c-grey-8

.bg-grey-1
.bg-grey-2
.bg-grey-3
.bg-grey-4
.bg-grey-5
.bg-grey-6
.bg-grey-7
.bg-grey-8
To edit the greyscale change this variables
--initialGreyLightness: 93%
--greyscaleLightnessIncrement: 11%

Color shades

Aa
Aa
Aa
Aa
Aa
Aa
Aa
Variables
--c-primary-2xlight
--c-primary-xlight
--c-primary-light

--c-primary

--c-primary-dark
--c-primary-xdark
--c-primary-2xdark
Utility classes
.c-primary-2xlight
.c-primary-xlight
.c-primary-light

.c-primary

.c-primary-dark
.c-primary-xdark
.c-primary-2xdark
To edit the primary color and its shades change this variables
--colorLightnessIncrement: 10%
--c-primary-hue: 215
--c-primary-saturation: 46%
--c-primary-lightness: 50%

Get Poco

Poco is ment to be customized and adapted to each project's needs.
Copy the poco.css to your project. Additionally you can get the utilities corresponding to each variable from poco-utilities.css.

Meta

All variables
--unit: 8px;
--fontFamily: -apple-system, BlinkMacSystemFont, sans-serif;

--spaceIncrement: 2;

--space-s: var(--unit);
--space-m: calc(var(--unit) * var(--spaceIncrement));
--space-l: calc(var(--space-m) * var(--spaceIncrement));
--space-xl: calc(var(--space-l) * var(--spaceIncrement));
--space-2xl: calc(var(--space-xl) * var(--spaceIncrement));
--space-3xl: calc(var(--space-2xl) * var(--spaceIncrement));
--space-4xl: calc(var(--space-3xl) * var(--spaceIncrement));
--space-5xl: calc(var(--space-4xl) * var(--spaceIncrement));

--spaceframe-s: var(--space-s);
--spaceframe-m: var(--space-m);
--spaceframe-l: var(--space-l);
--spaceframe-xl: var(--space-xl);

--fontSize-xs: 12px;
--lineHeight-xs: calc(var(--unit) * 2);

--fontSize-s: 16px;
--lineHeight-s: calc(var(--unit) * 3);

--fontSize-m: 22px;
--lineHeight-m: calc(var(--unit) * 4);

--fontSize-l: 36px;
--lineHeight-l: calc(var(--unit) * 5);

--fontSize-xl: 44px;
--lineHeight-xl: calc(var(--unit) * 6);

--fontWeight-400: 400;
--fontWeight-700: 700;

--colorLightnessIncrement: 10%;

--c-primary-hue: 215;
--c-primary-saturation: 46%;
--c-primary-lightness: 50%;

--c-primary: hsl(var(--c-primary-hue), var(--c-primary-saturation), var(--c-primary-lightness));

--c-primary-2xlight: hsl(var(--c-primary-hue), var(--c-primary-saturation), calc(var(--c-primary-lightness) + var(--colorLightnessIncrement) * 3));
--c-primary-xlight: hsl(var(--c-primary-hue), var(--c-primary-saturation), calc(var(--c-primary-lightness) + var(--colorLightnessIncrement) * 2));
--c-primary-light: hsl(var(--c-primary-hue), var(--c-primary-saturation), calc(var(--c-primary-lightness) + var(--colorLightnessIncrement)));

--c-primary-dark: hsl(var(--c-primary-hue), var(--c-primary-saturation), calc(var(--c-primary-lightness) - var(--colorLightnessIncrement)));
--c-primary-xdark: hsl(var(--c-primary-hue), var(--c-primary-saturation), calc(var(--c-primary-lightness) - var(--colorLightnessIncrement) * 2));
--c-primary-2xdark: hsl(var(--c-primary-hue), var(--c-primary-saturation), calc(var(--c-primary-lightness) - var(--colorLightnessIncrement) * 3));

--greyHue: 0;
--greySaturation: 0%;

--initialGreyLightness: 93%;
--greyscaleLightnessIncrement: 11%;

--c-grey-1: hsl(var(--greyHue), var(--greySaturation), var(--initialGreyLightness));
--c-grey-2: hsl(var(--greyHue), var(--greySaturation), calc(var(--initialGreyLightness) - var(--greyscaleLightnessIncrement) * 1));
--c-grey-3: hsl(var(--greyHue), var(--greySaturation), calc(var(--initialGreyLightness) - var(--greyscaleLightnessIncrement) * 2));
--c-grey-4: hsl(var(--greyHue), var(--greySaturation), calc(var(--initialGreyLightness) - var(--greyscaleLightnessIncrement) * 3));
--c-grey-5: hsl(var(--greyHue), var(--greySaturation), calc(var(--initialGreyLightness) - var(--greyscaleLightnessIncrement) * 4));
--c-grey-6: hsl(var(--greyHue), var(--greySaturation), calc(var(--initialGreyLightness) - var(--greyscaleLightnessIncrement) * 5));
--c-grey-7: hsl(var(--greyHue), var(--greySaturation), calc(var(--initialGreyLightness) - var(--greyscaleLightnessIncrement) * 6));
--c-grey-8: hsl(var(--greyHue), var(--greySaturation), calc(var(--initialGreyLightness) - var(--greyscaleLightnessIncrement) * 7));