ThingList Design System

A comprehensive guide to the visual language, components, and patterns that power ThingList.app—your personal inventory and asset management platform.

🎨 Consistent Design

A unified visual language across all touchpoints ensures users feel at home throughout the application.

♿ Accessible First

WCAG 2.1 AA compliant with careful attention to color contrast, keyboard navigation, and screen reader support.

📱 Responsive

Designed to work beautifully across devices from mobile phones to large desktop displays.

Design Foundation

Core design tokens that define the ThingList visual system.

Color System

Our color palette is designed for clarity, accessibility, and emotion. All color combinations meet WCAG AA standards for contrast.

Primary Colors

Primary 600 #2E8B57 Main brand color, primary actions 4.5:1 on white
Primary 700 #1F593A Hover states, emphasis 7.2:1 on white
Primary 50 #EDF7F0 Backgrounds, subtle highlights 1.05:1 on white

Accent Colors

Accent 600 #DAA520 Secondary actions, highlights 4.8:1 on white
Accent 700 #B8860B Accent hover states 6.1:1 on white
Accent 50 #FFF8E1 Accent backgrounds 1.02:1 on white

Neutral Colors

Neutral 900 #2D3B32 Headings, primary text 11.8:1 on white
Neutral 700 #333333 Body text 12.6:1 on white
Neutral 500 #666666 Secondary text, placeholders 5.7:1 on white
Neutral 100 #F8FAF5 Page backgrounds 1.04:1 on white
Neutral 200 #E9ECE7 Borders, dividers 1.1:1 on white
Neutral 300 #C5CDC3 Input borders 1.4:1 on white

Semantic Colors

Success #4CAF50 Success messages, confirmations 4.6:1 on white
Warning #FF9800 Warnings, cautions 3.2:1 on white
Error #E74C3C Errors, destructive actions 4.5:1 on white

Spacing System

Consistent spacing creates rhythm and hierarchy. Our 4px base unit scales predictably.

xs 4px / 0.25rem Tight spacing
sm 8px / 0.5rem Default gap
md 16px / 1rem Standard spacing
lg 24px / 1.5rem Component spacing
xl 32px / 2rem Section spacing
2xl 48px / 3rem Large sections
3xl 64px / 4rem Major sections

Border Radius

Small 4px
Medium 8px
Large 12px
X-Large 16px
Full 9999px

Elevation & Shadows

Small 0 1px 2px rgba(0,0,0,0.05)
Medium 0 4px 6px rgba(0,0,0,0.07)
Large 0 10px 15px rgba(0,0,0,0.1)
X-Large 0 20px 25px rgba(0,0,0,0.15)

Typography

Clear, accessible typography that scales beautifully across devices.

Font Family

Aa
Inter

Primary typeface for all UI elements and body text. Optimized for screens with excellent legibility.

font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

Type Scale

Our type scale provides clear visual hierarchy and maintains readability at all sizes.

Heading 1

Display / H1
Font size: 2.5rem (40px) Line height: 1.2 (48px)
Weight: 700 (Bold) Letter spacing: -0.02em
Page titles, hero headlines

Heading 2

H2
Font size: 2rem (32px) Line height: 1.25 (40px)
Weight: 700 (Bold) Letter spacing: -0.01em
Section titles

Heading 3

H3
Font size: 1.5rem (24px) Line height: 1.33 (32px)
Weight: 600 (Semibold) Letter spacing: -0.01em
Subsection titles, card headers

Heading 4

H4
Font size: 1.25rem (20px) Line height: 1.4 (28px)
Weight: 600 (Semibold) Letter spacing: 0
Component titles
Heading 5
H5
Font size: 1.125rem (18px) Line height: 1.44 (26px)
Weight: 600 (Semibold) Letter spacing: 0
Small headings
Heading 6
H6
Font size: 1rem (16px) Line height: 1.5 (24px)
Weight: 600 (Semibold) Letter spacing: 0
Minor headings

This is a lead paragraph that introduces important content with slightly larger text for emphasis and readability.

Lead Text
Font size: 1.125rem (18px) Line height: 1.67 (30px)
Weight: 400 (Regular) Letter spacing: 0
Introduction paragraphs, important callouts

This is standard body text. The quick brown fox jumps over the lazy dog. It demonstrates the default paragraph styling used throughout the application for optimal readability.

Body Text
Font size: 1rem (16px) Line height: 1.5 (24px)
Weight: 400 (Regular) Letter spacing: 0
Default paragraph text, descriptions

This is small text used for metadata, captions, and supplementary information that requires less visual prominence.

Small Text
Font size: 0.875rem (14px) Line height: 1.43 (20px)
Weight: 400 (Regular) Letter spacing: 0
Captions, metadata, helper text

This is tiny text for legal notices, fine print, and minimal UI elements.

Tiny Text
Font size: 0.75rem (12px) Line height: 1.33 (16px)
Weight: 400 (Regular) Letter spacing: 0.01em
Legal text, timestamps, labels

Text Styles

Bold text is used for emphasis and important information.

Italic text is used for subtle emphasis or to denote titles.

Text links are underlined on hover for clarity.

Code text is used for technical references and values.

Muted text appears less prominent for secondary information.

Responsive Typography

Font sizes scale down on smaller screens to maintain readability while conserving space.

Element Desktop (≥768px) Mobile (<768px)
H1 40px / 2.5rem 32px / 2rem
H2 32px / 2rem 28px / 1.75rem
H3 24px / 1.5rem 22px / 1.375rem
Lead 18px / 1.125rem 17px / 1.0625rem
Body 16px / 1rem 16px / 1rem

Components

Reusable UI components with consistent styling and behavior.

Buttons

Buttons communicate actions and guide users through workflows. All buttons meet minimum 44×44px touch target size.

Button Variants

Button Sizes

Button States

<button class="btn btn-primary">Primary Button</button> <button class="btn btn-accent btn-lg">Large Accent Button</button> <button class="btn btn-outline" disabled>Disabled</button>

Form Elements

Accessible form controls with clear labels, helpful placeholders, and proper error states.

Text Inputs

This will appear on your profile
This field is required
Looks good!

Textareas

Maximum 500 characters

Select Dropdowns

Checkboxes & Radios

Alerts & Messages

Contextual feedback messages for user actions with appropriate icons and colors.

Cards

Content containers that group related information.

Feature Card

Cards provide a flexible container for grouping related content and actions.

Inventory Management

Track all your belongings with photos, receipts, and detailed information.

Smart Reminders

Never miss warranty expirations or maintenance schedules again.

Badges

Small labels for status indicators and counts.

Default Primary Success Warning Error Neutral

Tags

Removable labels for categories and filters.

Electronics Furniture Tools

Loading States

Accessibility Guidelines

ThingList is committed to WCAG 2.1 AA compliance and inclusive design.

🎨 Color Contrast

  • All text meets 4.5:1 contrast ratio (AA)
  • Large text (18px+) meets 3:1 ratio
  • UI components meet 3:1 against backgrounds
  • Never rely on color alone for information

⌨️ Keyboard Navigation

  • All interactive elements are keyboard accessible
  • Clear focus indicators on all controls
  • Logical tab order throughout pages
  • Skip links for main content navigation

📱 Touch Targets

  • Minimum 44×44px touch target size
  • Adequate spacing between interactive elements
  • Buttons and links clearly distinguishable
  • Sufficient padding for comfortable tapping

🔊 Screen Readers

  • Semantic HTML with proper headings
  • ARIA labels for complex interactions
  • Alt text for all meaningful images
  • Form labels properly associated with inputs

📝 Content Structure

  • Clear heading hierarchy (H1 → H6)
  • Descriptive link text (no "click here")
  • Proper list markup for grouped content
  • Landmark regions for page sections

⚡ Focus Management

  • Visible focus indicators (3px outline)
  • Focus trapped in modals/dialogs
  • Focus returned after closing overlays
  • Skip navigation for keyboard users

Focus States Example

All interactive elements show clear focus indicators when navigated with keyboard.

Focused Link

ARIA Live Regions

Dynamic content updates are announced to screen readers.

<div role="alert" aria-live="assertive">Error message</div> <div role="status" aria-live="polite">Success notification</div> <button aria-label="Close dialog">×</button>