SproutOS — Design System

SproutOS Design System

Every visual value in this plugin references a token from :root in admin-design-system.css. This page renders the live tokens and every shipping component. Color strategy is Restrained — tinted neutrals plus the brand purple used as a ≤10% accent. Status signals use colored text on neutral chips, never colored backgrounds. Depth is borders-only (the one ambient shadow is --so-shadow-xs on cards).

Colors

Every neutral is tinted toward the brand hue. Semantic states (success/warning/error) have a full 4-step ramp. The brand palette is purple; one accent, used ≤10%. Status colors (blue/green/amber) are reserved for the Setup Guide's environment-health UI — distinct from the brand-aligned --so-info alias.

Brand

--so-brand-primary-lightest

#F2EEFF

--so-brand-primary-light

#B8A9FF

--so-brand-primary

#5202FD

--so-brand-primary-dark

#3600AF

--so-brand-gradient

linear-gradient

Backgrounds

--so-bg-white

#FFFFFF · cards, content

--so-bg-lightest

#F9F9FB · shell

--so-bg-light

#F1F1F7 · sidebar

--so-bg-secondary

#E3E3ED · hover

--so-bg-hover-subtle

#F5F5F5

--so-bg-darkest

#0A0A0A

--so-bg-dark

#171717 · active item bg

--so-bg-darker

#202020 · active menu

Text

--so-text-default#0A0A0AAa — Primary text

--so-text-strong#171717Aa — Strong text

--so-text-weak#737373Aa — Secondary / description

--so-text-weaker#A3A3A3Aa — Tertiary / placeholder

--so-text-disabled→ weakAa — Disabled

--so-text-white#FFFFFFAa — On dark

--so-text-inverse-weakrgba(255,255,255,.7)Aa — Secondary on dark

--so-text-inverse-weakestrgba(255,255,255,.5)Aa — Tertiary on dark

Borders

--so-border-weakest

#F1F1F7

--so-border-weak

#E5E5E5 · default field border

--so-border-default

#D4D4D4 · hover

--so-border-strong

#A3A3A3 · focus

--so-border-dark

#737373

--so-border-darker

#404040

Semantic — Success

--so-success-lightest

#E7FFE7

--so-success-light

#A7EAAA

--so-success

#2EA343

--so-success-dark

#0A842A

Semantic — Warning

--so-warning-lightest

#FFE2BF

--so-warning-light

#FFC680

--so-warning

#FFA940

--so-warning-dark

#AA712B

Semantic — Error / Destructive

--so-error-lightest

#FFF2EF

--so-error-light

#FDC9C6

--so-error-bg-strong

#FECACA

--so-error

#F65258

--so-error-hover

#E04248

--so-error-dark

#D12D37

--so-error-active

#B91C2C

--so-error-strongest

#991B1B

Status sub-palette (Setup guide)

--so-status-success

#16A34A

--so-status-success-bg

#F0FDF4

--so-status-warn

#D97706

--so-status-warn-bg

#FFFBEB

--so-status-info

#3B82F6

--so-status-info-bg

#EFF6FF

Tag (slate sub-palette)

--so-tag-bg

#F8FAFC · neutral chip bg

--so-tag-border

#CBD5E1

--so-tag-fg

#334155

--so-tag-muted

#64748B

Code block sub-palette

--so-code-bg

#1E1E2E

--so-code-bar-bg

#16161F

--so-code-tab-bg

#2E2E42

--so-code-fg

#CDD6F4

--so-code-success

#4ADE80

--so-code-accent

#6366F1

Admin bar sub-palette (frontend toolbar)

--so-bar-online

#00D084 · active dot

--so-bar-offline

#CC1818

Typography

System font stack (no web fonts). Hierarchy through size + weight contrast.

Font sizes

--so-text-3xs10pxThe quick brown fox jumps

--so-text-xs11pxThe quick brown fox jumps

--so-text-label12pxThe quick brown fox jumps

--so-text-sm13pxThe quick brown fox jumps

--so-text-base14px · defaultThe quick brown fox jumps

--so-text-md15pxThe quick brown fox jumps

--so-text-body16pxThe quick brown fox jumps

--so-text-lg18pxThe quick brown fox jumps

--so-text-xl-tight20pxThe quick brown fox jumps

--so-text-xl22pxThe quick brown fox jumps

--so-text-2xl24pxThe quick brown fox

--so-text-3xl28pxThe quick brown fox

--so-text-4xl32pxThe quick brown

Weights

--so-weight-normal400The quick brown fox jumps

--so-weight-medium500The quick brown fox jumps

--so-weight-semibold600The quick brown fox jumps

--so-weight-bold700The quick brown fox jumps

Spacing

4px base scale. Use multiples — don't introduce ad-hoc values.

--so-space-0-52px

--so-space-14px

--so-space-1-56px

--so-space-28px

--so-space-312px

--so-space-416px

--so-space-520px

--so-space-624px

--so-space-832px

--so-space-1040px

--so-space-1248px

Border radii

xs4px

sm6px

md · controls8px

mlg10px

lg · cards12px

xl · modals16px

full · pills9999px

Shadows

Borders-only depth strategy. Ambient shadows are rare and intentional.

xs · cards

sm-soft

tooltip

popover

modal

Focus rings

Icon sizes

Motion

--so-transition-fast150ms easeHover / focus state changes

--so-transition-base200ms easeModal fade, sidebar slide

--so-transition-slow300ms easeProgress meter fill

Z-index hierarchy

--so-z-sidebar100Sidebar layer

--so-z-header110Sticky header

--so-z-dropdown200Page-level dropdown menus

(WP admin bar)99999Browser default — we sit above this

--so-z-modal-backdrop100000Modal overlay

--so-z-modal100001Modal card

--so-z-modal-dropdown100100Dropdowns inside modals

Buttons

Form controls

One canonical pattern: 36px height, --so-radius-md, --so-border-weak at rest → --so-border-default on hover → --so-border-strong + faint neutral ring on focus. Placeholder always --so-text-weaker in --so-font.

Custom dropdown

The canonical dropdown component. Use this instead of native <select> so the menu and trigger styling stay identical across pages. Closed state matches form controls.

.so-dropdown--block — full-width variant for form fields.

Toggle switch

Badges

Status pills used in the Request Details modal and similar. All badges share the same neutral chip background — only the text color signals state.

SUCCESS ERROR WARNING INFO NEUTRAL POST GET

Tags & filter pills

Used for risk categorization on AI abilities. Same muted treatment: neutral chip + colored text.

Read Only Create / Info Caution High Risk Idempotent Code Exec

Filter pills

Read Only Create / Info Caution High Risk Dimmed (inactive filter)

Stat cards

Summary metrics. Both the older modifier pattern (.error, .success) and the custom-property override pattern (--stat-value-color) work — they compose.

152

Total Calls

148

Active

Failed

Brand-tinted

sprout-bridge-discover-tools

Most Used Ability

Status pills (Analytics log rows)

Success Error

Cards

Card title

Card description text — used for sub-titles and explanations inside cards.

Memory card

White body + grey footer strip with bottom-rounded corners. The footer uses a small grey dot separator.

External resources

Pointers to your brand guide, content style guide, and any external systems.

Code block

PHP

add_action( 'wp_dashboard_setup', function () {
    wp_add_dashboard_widget(
        'hi_dashboard_widget',
        'Hi (from sandbox)',
        function () { echo '<p>hi</p>'; }
    );
} );

Setup status cards

The blue/green/amber palette used in the Setup Guide. Distinct from semantic success/warning to keep the brand-aligned states separate from environment-health UI.

✓

PHP Version

8.2 — OK

Memory Limit

128 MB — Tight

WordPress

6.6 — Detected

SproutOS MCP — Design System. Tokens live in sprout-ui/admin-design-system.css. Component docs auto-update when the CSS does (this file <link>s it directly).