Bare bones style guide page to keep an running index of elements and work through incremental css.

Color

Symiotic Colors

Primary
Complement 1
Complement 2
--darken
--lighten

Contextual Colors

--bg-color
--text-color

Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Body Text

This is a paragraph of body text. The font is Crimson Pro, a variable font that provides excellent readability. The text size is fluid, scaling between 0.75rem and 1.5rem based on viewport width.

This is italic text, also in Crimson Pro.

This is bold text.

This is bold and italic text.

Text Elements

  • Unordered list item

  • Another list item

    • Nested list item

    • Another nested item

  • Back to main list

  1. Ordered list item

  2. Another ordered item

  3. And another

This is a blockquote. It can contain multiple paragraphs and other elements.

This is inline code

This is a code block
with multiple lines
and formatting

Ctrl + C

This is highlighted text

This is small text

Subscript and Superscript

Deleted text and Inserted text

# UI Elements

Internal Link | External Link | Direct Link

Buttons

# Form Elements

Text Inputs

Textarea

Select

Checkboxes

Radio Buttons

Range Input

File Input

Submit Button

Style Practices & Principles

  1. Custom Properties Usage

    • When adding new components, extend the :root variables rather than hardcoding values

    • Follow the OKLCH color model pattern for new color definitions

  2. Typography

    • Use the defined font families:

      • var(--ff-sans) for body text and UI elements

      • var(--ff-serif) for headings and decorative text

    • Maintain the responsive font sizing with var(--font-size)

    • Keep consistent letter-spacing with -.034ch

  3. Layout & Spacing

    • Use the var(--gap) multiplier system for margins and padding

    • Implement responsive grid layouts with minmax() and auto-fit/auto-fill

    • Follow the established breakpoints:

      • Mobile: < 600px

      • Tablet: 600px - 1200px

      • Desktop: > 1200px