Component Patterns

This document outlines the standard UI component patterns used in the Happy Sasquatch design system. These patterns ensure consistency across all interfaces and maintain brand cohesion.

Buttons

Buttons are interactive elements that trigger actions. Our button system supports multiple variants for different use cases.

Button Styles

Variant	Background	Border	Text Color	Usage
Primary	--ifm-color-primary	None	--base	Main CTAs, primary actions
Secondary	--secondary	None	--base	Secondary actions
Outline	Transparent	2px solid	Matches border	Tertiary actions
Accent	--accent	None	--base	Special highlights, promotions
Ghost	Transparent	None	--ifm-color-primary	Low-emphasis actions

Button Specifications

Property	Value	Notes
Border radius	50vw (pill)	Creates fully rounded ends
Border width	2px	For outline variants
Padding	0.5em 1.25em	Proportional to font size
Min width	14rem	Ensures consistent button sizing
Font weight	400	Regular weight
Transition	0.3s ease-in-out	Smooth hover effects

Button CSS Examples

/* Base button styles */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5em 1.25em;
  min-width: 14rem;
  border-radius: 50vw;
  font-weight: 400;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

/* Primary button */
.button-primary {
  background-color: var(--ifm-color-primary);
  color: var(--base);
  border: none;
}

.button-primary:hover {
  background-color: var(--ifm-color-primary-dark);
}

/* Outline button */
.button-outline {
  background-color: transparent;
  border: 2px solid var(--ifm-color-primary);
  color: var(--ifm-color-primary);
}

.button-outline:hover {
  background-color: var(--ifm-color-primary);
  color: var(--base);
}

/* Accent button */
.button-accent {
  background-color: var(--accent);
  color: var(--base);
  border: none;
}

.button-accent:hover {
  background-color: var(--accent-hover);
}

Border Radius

Consistent border radius values create visual harmony across components.

Usage	Value	CSS Example
Default	5px	border-radius: 5px;
Cards	11.25px (--radius-xl)	border-radius: 11.25px;
Buttons	50vw (pill)	border-radius: 50vw;
Inputs	5px	border-radius: 5px;
Avatars	50% (circle)	border-radius: 50%;

When to Use Each

• 5px (default): Form inputs, small containers, subtle rounding
• 11.25px (xl): Cards, modals, larger containers
• 50vw (pill): Buttons, tags, badges
• 50% (circle): Avatars, icons, round elements

Shadows

Shadows add depth and visual hierarchy. Use them sparingly and consistently.

Level	CSS Value	Usage
Medium	0 0 40px rgba(0,0,0,0.1)	Cards, dropdowns
Large	0 0 60px rgba(0,0,0,0.2)	Modals, floating elements
Extra Large	0 0 80px rgba(0,0,0,0.3)	Hero cards, prominent elements

Shadow CSS Examples

/* Shadow variables */
--shadow-medium: 0 0 40px rgba(0, 0, 0, 0.1);
--shadow-large: 0 0 60px rgba(0, 0, 0, 0.2);
--shadow-xl: 0 0 80px rgba(0, 0, 0, 0.3);

/* Card with medium shadow */
.card {
  box-shadow: var(--shadow-medium);
}

/* Modal with large shadow */
.modal {
  box-shadow: var(--shadow-large);
}

/* Hero element with xl shadow */
.hero-card {
  box-shadow: var(--shadow-xl);
}

Cards

Cards are container components for grouping related content.

Card Specifications

Property	Value
Background	--base or white
Border radius	11.25px
Padding	var(--space-m)
Shadow	--shadow-medium
Border	None (use shadow for definition)

Card CSS Example

.card {
  background: var(--base);
  border-radius: 11.25px;
  padding: var(--space-m);
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1);
}

.card-header {
  margin-bottom: var(--space-s);
}

.card-title {
  font-size: var(--h4);
  font-weight: 600;
  margin: 0;
}

.card-body {
  color: var(--neutral);
}

.card-footer {
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid var(--neutral-light);
}

Form Elements

Form inputs and controls follow consistent styling patterns.

Input Specifications

Property	Value
Border	1px solid --neutral-light
Border radius	5px
Padding	0.75em 1em
Background	white
Font size	var(--text-m)
Focus outline	2px solid --ifm-color-primary

Form CSS Examples

/* Text input */
.input {
  width: 100%;
  padding: 0.75em 1em;
  border: 1px solid var(--neutral-light);
  border-radius: 5px;
  font-size: var(--text-m);
  font-family: inherit;
  background: white;
  transition: border-color 0.3s ease-in-out;
}

.input:focus {
  outline: none;
  border-color: var(--ifm-color-primary);
  box-shadow: 0 0 0 2px var(--ifm-color-primary-lighter);
}

.input::placeholder {
  color: var(--neutral-semi-light);
}

/* Label */
.label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 500;
  color: var(--neutral);
}

/* Form group */
.form-group {
  margin-bottom: var(--space-s);
}

Focus States

All interactive elements must have visible focus states for accessibility.

Element	Focus Style
Buttons	outline: 2px solid var(--ifm-color-primary); outline-offset: 2px;
Links	outline: 2px solid var(--ifm-color-primary); outline-offset: 2px;
Inputs	border-color: var(--ifm-color-primary); box-shadow: 0 0 0 2px var(--ifm-color-primary-lighter);

/* Focus-visible for keyboard navigation */
.button:focus-visible,
.link:focus-visible {
  outline: 2px solid var(--ifm-color-primary);
  outline-offset: 2px;
}

Transitions

Smooth transitions improve the user experience. Use consistent timing functions.

Property	Duration	Easing
Color changes	0.3s	ease-in-out
Transform	0.3s	ease-in-out
Opacity	0.3s	ease-in-out
Box-shadow	0.3s	ease-in-out

/* Standard transition */
.interactive-element {
  transition: all 0.3s ease-in-out;
}

/* Specific transitions */
.button {
  transition: background-color 0.3s ease-in-out,
              color 0.3s ease-in-out,
              transform 0.3s ease-in-out;
}

.button:hover {
  transform: translateY(-2px);
}

.button:active {
  transform: translateY(0);
}

Layout Patterns

Grid System

Use CSS Grid for page layouts with our gutter variable.

.grid {
  display: grid;
  gap: var(--gutter);
}

.grid-2-col {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3-col {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4-col {
  grid-template-columns: repeat(4, 1fr);
}

/* Responsive grid */
@media (max-width: 768px) {
  .grid-2-col,
  .grid-3-col,
  .grid-4-col {
    grid-template-columns: 1fr;
  }
}

Container

Standard content container with max-width and centered alignment.

.container {
  max-width: 136.6rem;
  margin-inline: auto;
  padding-inline: var(--section-padding-x);
}

Stack (Vertical Spacing)

Consistent vertical spacing between elements.

.stack > * + * {
  margin-block-start: var(--space-m);
}

.stack-s > * + * {
  margin-block-start: var(--space-s);
}

.stack-l > * + * {
  margin-block-start: var(--space-l);
}

Docusaurus-Specific Components

When building custom components for this Docusaurus site, follow these patterns:

Feature Section

import styles from './styles.module.css';

function Feature({title, description}) {
  return (
    <div className={styles.feature}>
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  );
}

/* styles.module.css */
.feature {
  padding: var(--space-m);
  text-align: center;
}

.feature h3 {
  font-size: var(--h4);
  margin-bottom: var(--space-xs);
}

Custom Callout

.callout {
  padding: var(--space-m);
  border-radius: 5px;
  border-left: 4px solid;
  margin: var(--space-m) 0;
}

.callout-info {
  background-color: var(--ifm-color-primary-lightest);
  border-color: var(--ifm-color-primary);
}

.callout-warning {
  background-color: var(--accent-ultra-light);
  border-color: var(--accent);
}

.callout-success {
  background-color: var(--secondary-ultra-light);
  border-color: var(--secondary);
}