Style Guide

Last updated: December 17, 2024

this is the generic text heading

Hey again! This is the style guide for my website, and it's still a work in progress. But no worries, it's the perfect place to check out if you want to understand how everything works on my site. I've gathered all the nitty-gritty details right here, so you can easily navigate and make the most out of your experience. Enjoy exploring!

Colors

These are the colors used in the app. They are defined in settings.css and are available as CSS variables which are used throughout the app.

  • Base Colors

    • Paper

      --paper

    • Ink

      --ink

  • Grays

    • Gray Lightest

      --gray-lightest

    • Gray Lighter

      --gray-lighter

    • Gray Light

      --gray-light

    • Gray

      --gray

    • Gray Dark

      --gray-dark

    • Gray Darker

      --gray-darker

    • Gray Darkest

      --gray-darkest

  • Primary Color

    • Primary Lightest

      --color-lightest

    • Primary Lighter

      --color-lighter

    • Primary Light

      --color-light

    • Primary

      --color

    • Primary Dark

      --color-dark

    • Primary Darker

      --color-darker

    • Primary Darkest

      --color-darkest

  • Highlight Color

    • Highlight Lightest

      --highlight-lightest

    • Highlight Lighter

      --highlight-lighter

    • Highlight Light

      --highlight-light

    • Highlight

      --highlight

    • Highlight Dark

      --highlight-dark

    • Highlight Darker

      --highlight-darker

    • Highlight Darkest

      --highlight-darkest

  • Accent Color

    • Accent Lightest

      --accent-lightest

    • Accent Lighter

      --accent-lighter

    • Accent Light

      --accent-light

    • Accent

      --accent

    • Accent Dark

      --accent-dark

    • Accent Darker

      --accent-darker

    • Accent Darkest

      --accent-darkest

  • Semantic Colors

    • Success

      --success

    • Warning

      --warning

    • Error

      --error

    • Info

      --info

  • Gradients

    • Gradient Dark

      --gradient-dark

    • Gradient Light

      --gradient-light

    • Gradient Color

      --gradient-color

  • Patterns

    • Checkers

      --checkers

    • Diagnol

      --diagnol

    • Points

      --points

    • Noise

      --noise

Borders, Shadows and Miscellaneus

These are the styles used in the app. They are defined in settings.css and are available as CSS variables and classes which are used throughout the app.

  • Borders

    • Border

      --border

    • Border light

      --border-light

    • Border Color

      --border-color

    • Border Highlight

      --border-highlight

    • Border gradient

      --border-gradient

  • Shadows

    • Shadow

      --shadow

    • Shadow Inner

      --shadow-inner

Spacing

These are the spacing values used in the app. They are defined in settings.css and are available as CSS variables which are used throughout the app for Margins, Paddings and Gaps

  • XXXS

    --space-3xs

  • XXS

    --space-2xs

  • XS

    --space-xs

  • S

    --space-s

  • M

    --space-m

  • L

    --space-l

  • XL

    --space-xl

  • XXL

    --space-2xl

  • XXXL

    --space-3xl

UI Elements

These are the UI elements used in the app. They are defined in settings.css and are available as CSS variables and classes which are used throughout the app.

  • Primary Button

    .button

    • Default

    • Hover

    • Active

    • Loading

    • Disabled

  • Outline Button

    .button outline

    • Default

    • Hover

    • Active

    • Loading

    • Disabled

  • Icon Button

    .button icon

    • Default

    • Hover

    • Active

    • Loading

    • Disabled

  • Text Button/Link

    .text

    • Default

    • Hover

    • Active

    • Loading

    • Disabled

Typography

These are the typography settings used in the app. They are defined in settings.css and are available as CSS variables which are used throughout the app.

  • Font Family

    • Headings

      The quick brown fox jumps over the lazy dog.

      --font-head

    • Body

      The quick brown fox jumps over the lazy dog.

      --font-body

  • Font Weights

    • Light

      The quick brown fox jumps over the lazy dog.

      --weight-light

    • Regular

      The quick brown fox jumps over the lazy dog.

      --weight-regular

    • Heavy

      The quick brown fox jumps over the lazy dog.

      --weight-heavy

  • Line Heights

    • Heading

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in turpis nec felis ultricies ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in turpis nec felis ultricies ultricies.

      --line-height-head

    • Body

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in turpis nec felis ultricies ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in turpis nec felis ultricies ultricies.

      --line-height-body

  • Letter Spacing

    • Heading

      The quick brown fox jumps over the lazy dog.

      --letter-spacing-head

    • Body

      The quick brown fox jumps over the lazy dog.

      --letter-spacing-body

  • Font Sizes

    • Step -3

      The quick brown fox jumps over the lazy dog.

      --font-size--3

    • Step -2

      The quick brown fox jumps over the lazy dog.

      --font-size--2

    • Step -1

      The quick brown fox jumps over the lazy dog.

      --font-size--1

    • Step 0

      The quick brown fox jumps over the lazy dog.

      --font-size-0

    • Step 1

      The quick brown fox jumps over the lazy dog.

      --font-size-1

    • Step 2

      The quick brown fox jumps over the lazy dog.

      --font-size-2

    • Step 3

      The quick brown fox jumps over the lazy dog.

      --font-size-3

    • Step 4

      The quick brown fox jumps over the lazy dog.

      --font-size-4

    • Step 5

      The quick brown fox jumps over the lazy dog.

      --font-size-5

    • Step 6

      The quick brown fox jumps over the lazy dog.

      --font-size-6

    • Step 7

      The quick brown fox jumps over the lazy dog.

      --font-size-7

Type Voices

  • micro-voice

    this is a regular emphasis sentence.

    This is a strong emphasis sentence.

    This is a strong and regular emphasis sentence.

    This is a sentence with a highlight .

    these are links in the paragraph.

    This is a paragraph that should wrap to the next line. lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.

  • solid-voice

    this is a regular emphasis sentence.

    This is a strong emphasis sentence.

    This is a strong and regular emphasis sentence.

    This is a sentence with a highlight .

    these are links in the paragraph.

    This is a paragraph that should wrap to the next line. lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.

  • whisper-voice

    this is a regular emphasis sentence.

    This is a strong emphasis sentence.

    This is a strong and regular emphasis sentence.

    This is a sentence with a highlight .

    these are links in the paragraph.

    This is a paragraph that should wrap to the next line. lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.

  • calm-voice

    this is a regular emphasis sentence.

    This is a strong emphasis sentence.

    This is a strong and regular emphasis sentence.

    This is a sentence with a highlight .

    these are links in the paragraph.

    This is a paragraph that should wrap to the next line. lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.

  • notice-voice

    this is a regular emphasis sentence.

    This is a strong emphasis sentence.

    This is a strong and regular emphasis sentence.

    This is a sentence with a highlight .

    these are links in the paragraph.

    This is a paragraph that should wrap to the next line. lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.

  • firm-voice

    this is a regular emphasis sentence.

    This is a strong emphasis sentence.

    This is a strong and regular emphasis sentence.

    This is a sentence with a highlight .

    these are links in the paragraph.

    This is a paragraph that should wrap to the next line. lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.

  • attention-voice

    this is a regular emphasis sentence.

    This is a strong emphasis sentence.

    This is a strong and regular emphasis sentence.

    This is a sentence with a highlight .

    these are links in the paragraph.

    This is a paragraph that should wrap to the next line. lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.

  • loud-voice

    this is a regular emphasis sentence.

    This is a strong emphasis sentence.

    This is a strong and regular emphasis sentence.

    This is a sentence with a highlight .

    these are links in the paragraph.

    This is a paragraph that should wrap to the next line. lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.

  • booming-voice

    this is a regular emphasis sentence.

    This is a strong emphasis sentence.

    This is a strong and regular emphasis sentence.

    This is a sentence with a highlight .

    these are links in the paragraph.

    This is a paragraph that should wrap to the next line. lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.