TogetherOS Design System

Warm Minimalism

Clean, joyful, and restful. Lots of white space, soft neutrals, one lively accent, and a gentle warm companion. Text stays dark and readable; accents do the emotional work.

Component Library

Buttons

Badges

DefaultBrandJoySuccessInfoWarningDanger

Alerts

Default Alert

This is a default alert message.

Success!

Your changes have been saved successfully.

Information

Please review the updated terms of service.

Warning

Your session will expire in 5 minutes.

Error

Failed to save changes. Please try again.

Progress Bars

Progress65%

Progress45%

Spinners

Form Components

Tabs

Overview content goes here...

Accordion

TogetherOS is a cooperation-first operating system stack designed to support collective action and mutual aid.

Dropdown

Tooltip

Modal

Dialog

Toast Notifications

Breadcrumb

Pagination

Page 1 of 20

Without first/last buttons:

Avatar

Sizes:

With images:

Avatar Group:

Skeleton Loader

Loaded Content

This is the actual content that would be displayed after loading.

Content Image

Empty State

No data available

Get started by adding your first item to see it appear here.

No results found

Try adjusting your search or filters to find what you're looking for.

Command Palette

Press Cmd/Ctrl + K to open the command palette

Color Palette

Backgrounds

bg-0 (page)

#FAFAF9

bg-1 (cards)

#FFFFFF

bg-2 (panels)

#F5F5F4

Text & Neutrals

ink-900 (primary)

#0F172A

ink-700 (secondary)

#334155

ink-400 (muted)

#94A3B8

border

#E5E7EB

Brand (Cooperative Green)

brand-600

#059669

brand-500

#10B981

brand-100

#D1FAE5

Joy (Apricot)

joy-600

#F59E0B

joy-500

#FDBA74

joy-100

#FFF7ED

Semantic

Success

#16A34A

Info

#0EA5E9

Warning

#D97706

Danger

#DC2626

Typography

Heading 1 (36px, Bold)

Heading 2 (28px, Bold)

Body text (18px, Regular). Maximum line length of 68-72 characters keeps reading comfortable. Line height of 1.6+ gives the text room to breathe.

Muted text (16px, Regular) for secondary information and captions.

Dashboard Example

Active Members

↗

147

+12 this week

Open Proposals

→

3 need your vote

Mutual Aid Requests

↘

5 unfulfilled

Treasury Balance

↗

$12,450

+8% this month

Design Principles

One accent per screen — Choose either brand or joy as the hero, not both
Big, breathable panels — Default padding ≥ 2rem, line height 1.6+
Space first, borders second — Separate sections with whitespace
Typography cap — Max 68-72 characters per line for readability
Micro transitions — 150-200ms ease-out, no parallax or looping animations
Accessibility — Body text ≥ WCAG AA (aim 7:1 contrast)

Warm Minimalism

Clean, joyful, and restful. Lots of white space, soft neutrals, one lively accent, and a gentle warm companion. Text stays dark and readable; accents do the emotional work.

Component Library

Buttons

Badges

DefaultBrandJoySuccessInfoWarningDanger

Alerts

Default Alert

This is a default alert message.

Success!

Your changes have been saved successfully.

Information

Please review the updated terms of service.

Warning

Your session will expire in 5 minutes.

Error

Failed to save changes. Please try again.

Progress Bars

Progress65%

Progress45%

Spinners

Form Components

Tabs

Overview content goes here...

Accordion

TogetherOS is a cooperation-first operating system stack designed to support collective action and mutual aid.

Dropdown

Tooltip

Modal

Dialog

Toast Notifications

Breadcrumb

Pagination

Page 1 of 20

Without first/last buttons:

Avatar

Sizes:

With images:

Avatar Group:

Skeleton Loader

Loaded Content

This is the actual content that would be displayed after loading.

Content Image

Empty State

No data available

Get started by adding your first item to see it appear here.

No results found

Try adjusting your search or filters to find what you're looking for.

Command Palette

Press Cmd/Ctrl + K to open the command palette

Color Palette

Backgrounds

bg-0 (page)

#FAFAF9

bg-1 (cards)

#FFFFFF

bg-2 (panels)

#F5F5F4

Text & Neutrals

ink-900 (primary)

#0F172A

ink-700 (secondary)

#334155

ink-400 (muted)

#94A3B8

border

#E5E7EB

Brand (Cooperative Green)

brand-600

#059669

brand-500

#10B981

brand-100

#D1FAE5

Joy (Apricot)

joy-600

#F59E0B

joy-500

#FDBA74

joy-100

#FFF7ED

Semantic

Success

#16A34A

Info

#0EA5E9

Warning

#D97706

Danger

#DC2626

Typography

Heading 1 (36px, Bold)

Heading 2 (28px, Bold)

Body text (18px, Regular). Maximum line length of 68-72 characters keeps reading comfortable. Line height of 1.6+ gives the text room to breathe.

Muted text (16px, Regular) for secondary information and captions.

Dashboard Example

Active Members

↗

147

+12 this week

Open Proposals

→

3 need your vote

Mutual Aid Requests

↘

5 unfulfilled

Treasury Balance

↗

$12,450

+8% this month

Design Principles

One accent per screen — Choose either brand or joy as the hero, not both
Big, breathable panels — Default padding ≥ 2rem, line height 1.6+
Space first, borders second — Separate sections with whitespace
Typography cap — Max 68-72 characters per line for readability
Micro transitions — 150-200ms ease-out, no parallax or looping animations
Accessibility — Body text ≥ WCAG AA (aim 7:1 contrast)