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.

/ Buttons

Themes

Feedback

Sizes

/ Forms

Form Legend

Use helper text to provide additional information.

/ 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