Design System
A guide to SnapWorks UI components and styling
Color Palette
The SnapWorks theme uses a consistent color palette throughout the app.
Typography
Consistent typography styles for headings and text.
Page Title
.pageTitle
Section Title
.sectionTitle
Section Title with Gradient
.sectionTitleGradient
This is a page subtitle that provides additional context about the current page or section.
.pageSubtitle
Regular paragraph text is rendered at the base font size and weight.
Small text is used for secondary information, captions, and metadata.
Buttons
Button styles for different actions and contexts.
.btn-primary
.btn-secondary
.btn-outline
Small size modifier
Full width modifier
Disabled state
Cards
Card containers for grouping related content.
Standard Card
Basic card layout with padding and shadow.
.card
Interactive Card
Card with hover effects for interactive elements.
.card-interactive
Form Controls
Input controls styled consistently with the theme.
.form-input
.form-select
.form-input (for textarea)
.form-checkbox, .form-radio
Tab Navigation
Tab components for switching between views.
.tab, .tab-active, .tab-inactive
Backgrounds
Background styles and gradients.
Hero Background
.hero-gradient
Section Background
.section-gradient
Spacing and Layout
Consistent spacing units and layout components.
Consistent Spacing Scale
1
2
3
4
5
6
Container Widths
max-w-7xl (Main container)
max-w-4xl (Content container)
max-w-2xl (Narrow container)
Page Components
Reusable page-level components that follow the theme.
Page Header
Use the PageHeader component to create consistent page headers with title, description, and optional icon.
<PageHeader
title="Page Title"
description="Optional page description"
icon={<FiIcon size={24} />}
/>