Colors

Brand Colors

Primary

#89181e

Hover

#a83a2e

Dark

#55161c

Light

#e05545

Neutral Colors

gray-100

gray-200

gray-300

gray-400

gray-500

gray-600

Semantic Colors

Success

Warning

Error

Info

Typography

Heading 1

class="heading-1"

Heading 2

class="heading-2"

Heading 3

class="heading-3"

Heading 4

class="heading-4"

Heading 5

class="heading-5"

Heading 6

class="heading-6"

Lead text - perfect for introductions and important content that needs to stand out.

class="text-lead"

Body text - the default paragraph text used throughout the site for regular content.

class="text-body"

Small text - useful for secondary information and captions.

class="text-small"

Muted text - for less important information.

class="text-muted"

Link with underline | Subtle link

Buttons

Variants

Semantic

Sizes

With Icons

Forms

Text Input

This is helper text for the input field.

Email

Password

Password must be at least 8 characters.

Select

Textarea

I agree to the terms

Send me updates

Choose a size:

Small

Medium

Large

Input with Button

Checkboxes

Checkbox States

Unchecked

Checked

Disabled (unchecked)

Disabled (checked)

Usage Example

Notification Preferences

Email notifications Receive updates via email

Push notifications Receive push notifications on your device

SMS notifications Receive text messages for important updates

Code Example

html

<div class="flex items-center gap-2">
  <input
    type="checkbox"
    id="my-checkbox"
    class="checkbox"
  />
  <label
    for="my-checkbox"
    class="label-inline cursor-pointer"
  >
    Label text
  </label>
</div>

<div class="flex items-center gap-2">
  <input
    type="checkbox"
    id="my-checkbox"
    class="checkbox"
  />
  <label
    for="my-checkbox"
    class="label-inline cursor-pointer"
  >
    Label text
  </label>
</div>

Cards

Simple Card

This is a basic card with just body content. Perfect for simple content blocks.

Card with Header

This card has a header section separated from the body content.

Full Card

This card has all three sections: header, body, and footer.

Hoverable Card

This card has a hover effect for interactive content.

Badges

Badge Variants

Primary Secondary Success Warning Error Info

Usage Example

Recipe: Chocolate Cake

Published

A delicious chocolate cake recipe.

Dessert Baking 30 min

Alerts

Success! Your changes have been saved successfully.

Warning! This action cannot be undone.

Error! There was a problem processing your request.

Info: Your session will expire in 5 minutes.

Modal

Modals use data attributes for simple, intuitive interactions. Just add data-modal-open="modal-id" to any element!

Basic Modal

Custom Header & Sizes

Component Usage

astro

<Modal id="my-modal" title="Title">
  <p>Content here</p>
  <div slot="footer">
    <button data-modal-close="my-modal">
      Close
    </button>
  </div>
</Modal>

<Modal id="my-modal" title="Title">
  <p>Content here</p>
  <div slot="footer">
    <button data-modal-close="my-modal">
      Close
    </button>
  </div>
</Modal>

Triggering Modals

html

<!-- Open modal -->
<button data-modal-open="my-modal">
  Open
</button>

<!-- Close specific modal -->
<button data-modal-close="my-modal">
  Close
</button>

<!-- Close parent modal -->
<button data-modal-close>
  Close
</button>

<!-- Toggle modal -->
<button data-modal-toggle="my-modal">
  Toggle
</button>

<!-- Open modal -->
<button data-modal-open="my-modal">
  Open
</button>

<!-- Close specific modal -->
<button data-modal-close="my-modal">
  Close
</button>

<!-- Close parent modal -->
<button data-modal-close>
  Close
</button>

<!-- Toggle modal -->
<button data-modal-toggle="my-modal">
  Toggle
</button>

Utilities

Loading Spinner

Dividers

Content above divider

Content below divider

Focus Ring

Code Blocks

Code blocks automatically adjust to the current theme.

typescript

type User = {
    name: string;
    email: string;
    age: number;
}

const user: User = {
    name: "John Doe",
    email: "john.doe@example.com",
    age: 30,
}

console.log(user);

type User = {
    name: string;
    email: string;
    age: number;
}

const user: User = {
    name: "John Doe",
    email: "john.doe@example.com",
    age: 30,
}

console.log(user);

python

def greet(name):
    print(f"Hello, {name}!")

if __name__ == "__main__":
    greet("World")

def greet(name):
    print(f"Hello, {name}!")

if __name__ == "__main__":
    greet("World")

Breadcrumbs

Breadcrumbs automatically visualize the current page's path in the router. They help users understand their location in the site hierarchy.

Current Page

Examples

Path: /

Path: /recipes

Path: /recipes/chocolate-cake

Path: /recipes/category/desserts

Usage

astro

<!-- Automatic: Uses current page path -->
<Breadcrumbs />

<!-- Manual: Provide a specific path -->
<Breadcrumbs pathname="/recipes/chocolate-cake" />

<!-- Automatic: Uses current page path -->
<Breadcrumbs />

<!-- Manual: Provide a specific path -->
<Breadcrumbs pathname="/recipes/chocolate-cake" />

Features

✓ Automatically derives navigation from URL path
✓ Proper ARIA labels for accessibility
✓ Smart formatting (capitalizes and replaces hyphens)
✓ Dark mode support
✓ Current page is non-clickable and muted

Layouts

A collection of tailwinds css and pure css layouts.