STYLESHEET

Contains all the styles for every component on this page. Copy once and drop it into your project.

components.css 
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');

/* ... DESIGN block: usage guide and customization instructions ... */

:root {

  /* COLORS - BACKGROUND */
  --bg-main:            hsl(30, 26%, 84%);

  /* COLORS - PRIMARY ACTION */
  --primary-bg:         hsl(32, 25%, 29%);
  --primary-text:       hsl(0, 0%, 100%);

BUTTON

PRIMARY

SECONDARY

TERTIARY

INPUT

ALONE

WITH CHECKBOX

RADIO BUTTON

Sync options

CARD

1

2

3

4

5

ICON

ORIGINAL

Shows the base icon design at 128 pixels with thin strokes, meant for large display.

SIMPLIFIED

Shows the icon at 128 pixels but intentionally simplified with thicker internal lines to prepare for downscaling.

SHRUNK

Shows the simplified icon scaled down to 16 pixels for a favicon. The thicker lines ensure it remains perfectly legible at this tiny size.

EMPTY STATE

Ready when you are

Everything you create will show up here.