Welcome to our Design System
This design system provides a comprehensive set of design tokens, components, and guidelines to ensure consistency across all ChurchWest Insurance Services digital products. It serves as the single source of truth for our design language.
Color Palette
Primary Colors
CW Primary Blue
#005cf6
CW Dark Blue
#001240
Primary Light
#DDEAFF
CW Primary Yellow
#005cf6
CW Secondary Yellow
#005cf6
Neutral Colors
Black
#090607
Dark Gray
#808080
Gray
#BAB9B7
Light Gray
#CDCECE
Eggshell
#F6F6F6
White
#FFFFFF
Semantic Colors
Success
#10b981
Success states
Error
#ef4444
Error states
Warning
#eab308
Warning states
Info
#3b82f6
Info states
Typography
Font Families
Primary Font - Georgia
Georgia - Heading 1
Used for primary headings (H1)
Secondary Font - Poppins
Medium - Headings H2-H5
Regular - H5 variant
Used for section headings
Body Font - Inter
Regular - Body text
Used for body content and captions
ChurchWest Typography Scale
Heading 1 - 42px (Georgia)
class: cw-heading-1
Heading 2 - 32px (Poppins Medium)
class: cw-heading-2
Heading 3 - 24px (Poppins Medium)
class: cw-heading-3
Heading 4 - 20px (Poppins Medium)
class: cw-heading-4
Heading 5 - 18px (Poppins Regular)
class: cw-heading-5
Body Large - 16px (Inter Regular)
class: cw-body-large
Body Regular - 14px (Inter Regular)
class: cw-body-regular
Caption - 12px (Inter Regular)
class: cw-caption
Usage Examples
Sample Article Heading
This is a sample paragraph using the body-large class. It demonstrates how the Inter font looks at 16px size for primary content areas.
This paragraph uses the body-regular class at 14px, perfect for secondary content and descriptions.
Caption text provides additional context or metadata using the smallest text size.
Insurance Services Overview
Property & Casualty
Comprehensive coverage for your church property and operations.
Key Benefits:
- • Tailored for religious organizations
- • Expert claims handling
- • Competitive pricing
Window Card - Variants
HR Guidance
For expert guidance on employment and compliance matters, contact our friends at Church HR Network.
HR Guidance
For expert guidance on employment and compliance matters, contact our friends at Church HR Network.
HR Guidance
For expert guidance on employment and compliance matters, contact our friends at Church HR Network.
HR Guidance
For expert guidance on employment and compliance matters, contact our friends at Church HR Network.
HR Guidance
For expert guidance on employment and compliance matters, contact our friends at Church HR Network.
Typography Guidelines
When to Use Each Style
Implementation
<!-- Primary heading -->
<h1 class="cw-heading-1">Page Title</h1>
<!-- Section heading -->
<h2 class="cw-heading-2">Section Title</h2>
<!-- Body content -->
<p class="cw-body-large">Lead paragraph...</p>
<p class="cw-body-regular">Standard text...</p>
<!-- Metadata -->
<span class="cw-caption">Published on...</span>Spacing System
Extra Small
Small
Medium
Large
Components
Tailwind v4 Test Case
This test verifies that Tailwind v4 auto-detection is working properly. The classes bg-pink-500, p-[13px], and hidden should all be generated in the CSS.
Buttons
Primary Button
<Button>Primary Button</Button>
Button States
Button Variants
Button Sizes
Usage Guidelines
✓ Do
- • Use for primary actions
- • Keep button text concise and action-oriented
- • Ensure adequate contrast ratios
- • Provide feedback for loading states
✗ Don't
- • Use too many primary buttons on one page
- • Make buttons too small for touch targets
- • Use vague button text like "Click here"
- • Override core button styles unnecessarily
Form Elements
Input Fields
Select & Textarea
Cards
Card Variants
Default
Default Card
Basic card with subtle shadow and border.
<Card>...</Card>
Elevated
Elevated Card
Card with more prominent shadow for emphasis.
<Card variant="elevated">...</Card>
Gradient
Gradient Card
Card with subtle gradient background.
<Card variant="gradient">...</Card>
Padding Options
Small Padding
Small Padding
Card with reduced padding (16px).
<Card padding="sm">...</Card>
Medium Padding (Default)
Medium Padding
Card with standard padding (24px).
<Card padding="md">...</Card>
Combined Examples
Elevated + Small Padding
Compact Elevated
Elevated card with compact spacing.
<Card variant="elevated" padding="sm">...</Card>
Gradient + Custom Class
Custom Gradient
Gradient card with additional custom styling.
<Card variant="gradient" className="border-2 border-blue-300">...</Card>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | React.ReactNode | - | Content to be displayed inside the card |
| className | string | '' | Additional CSS classes to apply |
| variant | 'default' | 'elevated' | 'gradient' | 'default' | Visual style variant of the card |
| padding | 'sm' | 'md' | 'md' | Internal padding size (sm: 16px, md: 24px) |
Usage Guidelines
✓ Do
- • Use cards to group related content
- • Choose appropriate variants for visual hierarchy
- • Use small padding for compact layouts
- • Maintain consistent spacing between cards
- • Use elevated variant to emphasize important content
✗ Don't
- • Nest cards too deeply (avoid cards within cards)
- • Use gradient variant excessively on one page
- • Override the rounded corners unnecessarily
- • Make cards too narrow for readability
- • Use cards for single line content items
Services Note
Default Examples
Property Insurance
<ServicesNote
icon="🏢"
title="Property Insurance"
href="#"
/>
Multiple Services
<div class="grid grid-cols-2 gap-2">
<ServicesNote icon="🏢" title="Property" href="#" />
<ServicesNote icon="🛡️" title="Liability" href="#" />
<ServicesNote icon="📚" title="Resources" href="#" />
<ServicesNote icon="👥" title="Benefits" href="#" />
</div>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | React.ReactNode | - | Icon to display (emoji or component) |
| title | string | - | Service title text |
| href | string | - | Link destination |
| className | string | '' | Additional CSS classes to apply |