Styleguide

A living reference for all design tokens, components, and patterns used in weareonhire!

# Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is body text. It inherits the font and color from the root.

This is subtle text, used for secondary info.


This text is separated with horizontal rule

# Spacing

--space-1 (0.25rem)
--space-2 (0.5rem)
--space-3 (0.75rem)
--space-4 (1rem)
--space-5 (1.25rem)
--space-6 (1.5rem)
--space-8 (2rem)
--space-12 (3rem)

# Colors

--color-text
--color-text-secondary
--color-text-tertiary
--color-text-muted
--color-text-placeholder
--color-bg
--color-bg-elevated
--color-bg-hover
--color-border
--color-border-input
--color-accent
--color-backdrop

# Shadows

--shadow-md
--shadow-xl

# Icons

icon-plus
icon-pencil
icon-trash
icon-check
icon-minus-circle
icon-website
icon-github
icon-linkedin
icon-email
icon-location
icon-menu
icon-x
icon-copy
icon-upload
icon-print
icon-heart
icon-users
icon-chevron-down
icon-bluesky
icon-telegram
icon-discord
icon-clock
icon-sun

# Buttons

# Chips

TypeScript Svelte Remote Verified

# Form Elements

# Alerts

Success! Your profile has been updated.
Error! Something went wrong. Please try again.
Info! This is an informational message.

# Dialog

Dialog Title

This is a dialog using the .dialog, .dialog-header and .dialog-content classes.

# Popover Menu

# Spinner

Loading...

# Pickers

Selected: none

Selected: 2024-06

TypeScript