Stoneware CSS

Colors

The color palette is intentionally neutral-focused. Use grays for most UI, reserve color for semantics.

Typography

System font stack with a clear hierarchy. Weights: 400 (body), 500 (medium), 600 (semibold).

Spacing

Based on a 4px grid. Use consistent spacing tokens for margins and padding.

Shadows

Subtle, layered shadows for depth. Use sparingly - most elements don't need shadows.

Border Radius

Consistent rounding. 8px for most elements, 12-16px for cards and modals.

Buttons View Details →

Dark primary buttons for main actions. Secondary for alternatives, ghost for minimal.

<button class="sw-btn sw-btn-primary">Primary</button>
<button class="sw-btn sw-btn-secondary">Secondary</button>
<button class="sw-btn sw-btn-danger">Danger</button>
<button class="sw-btn sw-btn-ghost">Ghost</button>

Inputs View Details →

Clean inputs with subtle backgrounds. Focus state uses dark border.

<input class="sw-input" type="text" placeholder="Enter text here...">

<!-- Select Options (Card Style) -->
<div class="sw-select-option selected">
  <input type="radio" name="brand" class="sw-radio" checked>
  <label>Brand A - Cardiovascular</label>
</div>

<!-- Checkboxes (Grid) -->
<div class="sw-select-option selected">
  <input type="checkbox" class="sw-checkbox" checked>
  <label>Healthcare Providers</label>
</div>

Cards View Details →

Elevated containers for grouped content. Use for forms, dialogs, content sections.

<div class="sw-card">
  <h3 class="sw-card-title">Card Title</h3>
  <p class="sw-card-subtitle">Supporting description</p>
  <p>Card content here...</p>
  <button class="sw-btn sw-btn-primary">Continue</button>
  <button class="sw-btn sw-btn-secondary">Cancel</button>
</div>

Modals View Details →

Overlay dialogs for confirmations, forms, and focused tasks.

<div class="sw-modal-overlay active">
  <div class="sw-card">
    <h3 class="sw-card-title">Confirm Action</h3>
    <p class="sw-card-subtitle">Are you sure?</p>
    <button class="sw-btn sw-btn-danger sw-btn-sm">Delete</button>
    <button class="sw-btn sw-btn-secondary sw-btn-sm">Cancel</button>
  </div>
</div>

Chat Messages View Details →

Conversational UI with user (dark) and assistant (light) bubble styles.

<div class="sw-chat-message assistant">
  <div class="sw-message-bubble">Assistant message</div>
</div>
<div class="sw-chat-message user">
  <div class="sw-message-bubble">User message</div>
</div>

Panels View Details →

Sidebar containers for navigation, data sources, and supplementary content.

<div class="sw-panel-header">
  <span class="sw-panel-title">Data Sources</span>
  <button class="sw-btn-icon">...</button>
</div>
<div class="sw-panel-content">
  <div class="sw-list-item">...</div>
</div>

Collapsible Modules View Details →

Expandable sections for organizing grouped content.

<div class="sw-module expanded">
  <div class="sw-module-header">
    <div class="sw-module-title">
      <span class="sw-module-icon">...</span>
      Module Title
    </div>
    <svg class="sw-module-chevron">...</svg>
  </div>
  <div class="sw-module-content">...</div>
</div>

List Items View Details →

Clickable list rows for files, documents, conversations.

<div class="sw-list-item">
  <span class="sw-list-item-icon">...</span>
  <div class="sw-list-item-content">
    <div class="sw-list-item-title">Item Title</div>
    <div class="sw-list-item-meta">Meta info</div>
  </div>
</div>

Chips & Tags View Details →

Clickable tags for suggestions, filters, or status indicators.

<button class="sw-chip">Chip text</button>

<span class="sw-tag">Default</span>
<span class="sw-tag sw-tag-success">Success</span>
<span class="sw-tag sw-tag-warning">Warning</span>
<span class="sw-tag sw-tag-danger">Danger</span>

Progress Indicators View Details →

Show progress through steps or loading states.

<div class="sw-progress-dots">
  <div class="sw-progress-dot completed"></div>
  <div class="sw-progress-dot active"></div>
  <div class="sw-progress-dot"></div>
</div>

<div class="sw-spinner"></div>

Banners View Details →

Contextual alerts for warnings, updates, or status messages.

<div class="sw-banner sw-banner-warning">
  <span class="sw-banner-text">You have pending changes</span>
  <div class="sw-banner-actions">
    <button class="sw-btn sw-btn-sm sw-btn-outline">Dismiss</button>
    <button class="sw-btn sw-btn-sm sw-btn-primary">Update</button>
  </div>
</div>

Avatars View Details →

Circular placeholders for user or persona images.

<div class="sw-avatar sw-avatar-xs">A</div>
<div class="sw-avatar sw-avatar-sm">BC</div>
<div class="sw-avatar">JD</div>
<div class="sw-avatar sw-avatar-lg">XY</div>

Layout Patterns

Common page structures used throughout applications.

Animations

Subtle motion for feedback and delight. Keep it fast (0.15-0.3s).