jam-boilerplate-codyhouse
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
--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-xxxxl
Display Text Huge
--text-xxxl
Display Text
--text-xxl
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.
/ Forms
/ Icons
Class | Custom Property | Size | |
---|---|---|---|
icon--xxxs | var(--icon-xxxs) | 8px | |
icon--xxs | var(--icon-xxs) | 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--xxl | var(--icon-xxl) | 96px | |
icon--xxxl | var(--icon-xxxl) | 128px |