Buttons
.c-button
Base button component with multiple variants
Primary Button
Outline Button
Ghost Button
Danger Button
Disabled Button
<button class="c-button c-button--primary">Click me</button>
<button class="c-button c-button--outline">Outline</button>
<button class="c-button c-button--danger">Delete</button>
Variants: primary, outline, ghost, danger, disabled
States: default, hover, active, disabled, loading
Accessibility: Keyboard navigable, visible focus indicator, aria-label for icon buttons
Cards
.c-card
Card container for grouping related content
This is the main content of the card. It can contain any HTML content.
<div class="c-card">
<div class="c-card__header">Title</div>
<div class="c-card__content">Content goes here</div>
</div>
Child Elements: __header, __content, __footer
Features: Responsive, theme-aware, shadow on hover
Form Inputs
.c-input
Text input field with focus state and validation support
<input class="c-input" type="text" placeholder="Enter text..." />
Features: Focus ring, validation states, error messaging, accessibility labels
Variants: text, email, password, textarea, select, checkbox, radio
Alerts
.c-alert
Alert box for displaying messages and notifications
Info: This is an informational message.
Success: Your mood has been saved!
Warning: Connection is slow. This may take longer.
Error: Failed to save. Please retry.
<div class="c-alert c-alert--success">
<strong>Success!</strong> Your mood has been saved.
</div>
Variants: info, success, warning, error
Usage: Status messages, notifications, form feedback
Badges
.c-badge
Small label for tags, status indicators, and metadata
Default
Primary
Success
Warning
Error
<span class="c-badge c-badge--primary">Active</span>
Variants: default, primary, success, warning, error
Use Cases: Status labels, category tags, counters
Loading States
.c-spinner
Loading indicator for async operations
<div class="c-spinner"></div>
<p>Loading...</p>
Features: CSS animation, respects prefers-reduced-motion, accessible
Use With: role="status" aria-live="polite" for screen readers
BEM Naming Convention
Block: Standalone component
.c-button { /* ... */ }
Element: Child of block
.c-button__icon { /* child of .c-button */ }
Modifier (Variant): Different look/feel
.c-button--primary { /* variant */ }
Modifier (State): Current state
.c-button--loading { /* state */ }
Full Example:
<button class="c-button c-button--primary c-button--loading">
<span class="c-button__icon">⟳</span>
<span class="c-button__text">Saving...</span>
</button>
CSS Variables Reference
Spacing (8px grid):
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px;
Typography Sizes:
--text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-lg: 18px;
--text-xl: 20px; --text-2xl: 24px; --text-3xl: 32px; --text-4xl: 40px;
Colors:
--color-primary: #9fb3e8; /* Lavender (brand) */
--color-accent: #e5c8b8; /* Peachy-taupe (accent) */
--color-mint: #a8d8ba; /* Mint green */
--color-sage: #b8c9a8; /* Sage green */
--color-coral: #f0b8b0; /* Coral pink */
Shadows:
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
Accessibility Guidelines
Keyboard Navigation: All interactive components must be keyboard accessible
Tab: Move to next interactive element
Shift+Tab: Move to previous element
Enter: Activate buttons
Escape: Close modals/overlays
Arrow Keys: Navigate within groups (tabs, radio buttons, menu)
ARIA Attributes: Add semantic meaning for assistive technologies
aria-label="Button label" — Label for icon-only buttons
aria-live="polite" — Announce dynamic content to screen readers
role="alert" — Important announcements
aria-invalid="true" — Form validation errors
aria-busy="true" — Loading state
Color Contrast: Minimum 4.5:1 for normal text (WCAG AA)
Focus Indicators: Always visible, minimum 2px outline
Semantic HTML: Use <button>, <label>, <input>, <form>