Project Name
Style Guide
/ Colors
Primary
--color-primary-lighter
--color-primary-light
--color-primary
--color-primary-dark
--color-primary-darker
Accent
--color-accent-lighter
--color-accent-light
--color-accent
--color-accent-dark
--color-accent-darker
Black
--color-black
White
--color-white
Success
--color-success-lighter
--color-success-light
--color-success
--color-success-dark
--color-success-darker
Error
--color-error-lighter
--color-error-light
--color-error
--color-error-dark
--color-error-darker
Warning
--color-warning-lighter
--color-warning-light
--color-warning
--color-warning-dark
--color-warning-darker
Contrast Scale
--color-bg-lighter
--color-bg-light
--color-bg
--color-bg-dark
--color-bg-darker
--color-bg
--color-contrast-lower
--color-contrast-low
--color-contrast-medium
--color-contrast-high
--color-contrast-higher
/ Typography
Font Family
--font-primary
Inter, system-ui, sans-serif
The quick brown fox jumps over the lazy dog
Heading & Body
Lorem ipsum dolor sit amet
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit ad, veniam voluptatibus molestias impedit dolore eligendi modi dicta, sint nulla consequuntur nisi alias distinctio vero expedita est at soluta et. Sapiente veritatis esse dolore ratione doloremque. Accusantium maiores maxime eum eaque voluptates nisi qui unde, dolores minima repudiandae quos perferendis?
Type Scale
--text-4xl
Display Text Huge
--text-3xl
Display Text
--text-2xl
Heading 1
--text-xl
Heading 2
--text-lg
Heading 3
--text-md
Heading 4
--text-base
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis modi, voluptate temporibus, voluptas dicta quibusdam iste dolores repudiandae aperiam tenetur, delectus laborum nobis nostrum consectetur error perspiciatis. Cum laudantium velit provident veritatis corrupti reiciendis iure, architecto ab perferendis, laboriosam voluptatum minima vero.
--text-sm
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis modi, voluptate temporibus, voluptas dicta quibusdam iste dolores repudiandae aperiam tenetur, delectus laborum nobis nostrum consectetur error perspiciatis.
--text-xs
Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis modi, voluptate temporibus, voluptas dicta quibusdam iste dolores repudiandae aperiam tenetur, delectus laborum nobis nostrum consectetur error perspiciatis.
/ Buttons
Themes
Feedback
Sizes
/ Forms
/ Icons
| Class | Custom Property | Size | |
|---|---|---|---|
| icon--3xs | var(--icon-3xs) | 8px | |
| icon--2xs | var(--icon-2xs) | 12px | |
| icon--xs | var(--icon-xs) | 16px | |
| icon--sm | var(--icon-sm) | 24px | |
| icon--md | var(--icon-md) | 32px | |
| icon--lg | var(--icon-lg) | 48px | |
| icon--xl | var(--icon-xl) | 64px | |
| icon--xl | var(--icon-2xl) | 96px | |
| icon--3xl | var(--icon-3xl) | 128px |