SOROUSH™
MODE
SYSTEM_SHOWCASE_V1.0

Design System

A comprehensive documentation of the Soroush Design System — scalable components, strict structural consistency, and production-grade developer experience.

01 . Layout & Surfaces

PRIMITIVE_CONTAINERStructural Layering & Scale
POS: 0,0,1 / Z: 10
ASPECT: 16:9
TOKEN_SPACE_8VALID
ASPECT: 1:1
TOKEN_SPACE_12VALID
RADIUS_TOKENS
SMALLSM
MEDIUMMD
LARGELG
DEFAULTSQ
CUSTOMLEGACY_INTERACTION
ROUNDAVATAR
PAPERSTORYBOOK
Paper is an Surface components and shadow styles emulate physical surfaces and depth.
ELEVATION_1
ELEVATION_3
ELEVATION_4
ELEVATION_5
VIEW / FLEXSTORYBOOK
View is the base layout primitive — a div with all styled-system props. Flex extends it with display:flex and column direction by default.
CELL_1
CELL_2
CELL_3
FLEX_ROW / JUSTIFY_BETWEENVALID
GRIDSTORYBOOK
Extends View with display:grid. Adds gap and the full set of CSS Grid layout props.
1
2
3
4
5
6
3_COL / GAP_2
APP_BARSTORYBOOK
A top-level header container with a theme elevation shadow. size presets the padding; blur applies a frosted-glass backdrop filter.
SIZE_SM
SOROUSH.TECH
SIZE_MD
SOROUSH.TECH
SIZE_LG
SOROUSH.TECH
DRAWERSTORYBOOK
A temporary panel that slides in from a screen edge, built on Modal — portal, backdrop, focus trap, scroll lock, and Escape/backdrop-click close are inherited.

02 . Content & Data Display

TYPOGRAPHYSTORYBOOK
The variant prop controls both the HTML element and the visual scale.
h1

Heading 1

h2

Heading 2

h3

Heading 3

h4

Heading 4

h5
Heading 5
h6
Heading 6
body1

Body 1

body2

Body 2

captionCaption
overlineoverline
COLOR_SYSTEMSTORYBOOK
Primary#00FC40
Default#0E0E0E
FONT_SYSTEMSTORYBOOK
BODYSpace Grotesk Variable
Aa
MONOJetBrains Mono Variable
Aa
TYPOGRAPHY_COLOREach text color token mapped to a Typography body2 sample.
initial

The quick brown fox jumps over the lazy dog

primary

The quick brown fox jumps over the lazy dog

secondary

The quick brown fox jumps over the lazy dog

disabled

The quick brown fox jumps over the lazy dog

error

The quick brown fox jumps over the lazy dog

success

The quick brown fox jumps over the lazy dog

info

The quick brown fox jumps over the lazy dog

warning

The quick brown fox jumps over the lazy dog

LINKSTORYBOOK
Renders as an a tag and composes Typography. Auto-injects noopener noreferrer for "_blank".
alwaysAlways underlined
hoverUnderline on hover
noneNo underline
AVATARSTORYBOOK
User image, initials, or icon in a consistently sized container. Three shapes (circular, rounded, square), four preset sizes, optional ring outline, and an automatic image-error fallback chain.
Soroush mascot
RING
Soroush mascot
XL
Soroush mascot
LG
Soroush mascot
MD
Soroush mascot
SM
Soroush mascot
RING
Soroush mascot
XL
Soroush mascot
LG
Soroush mascot
MD
Soroush mascot
SM
IMAGESTORYBOOK
A styled-system <img> primitive with objectFit/objectPosition and built-in source recovery — a failing src advances to fallback before onError fires.
OBJECT_FIT_COVERSoroush mascot debugging, object-fit cover
OBJECT_FIT_CONTAINSoroush mascot debugging, object-fit contain
FALLBACK_RECOVERYSoroush mascot exploring, loaded via fallback
TABLESTORYBOOK
Semantic table primitives with context-driven th/td cells, sortable headers, hoverable rows, and a footer pagination control.
RegionStatus
webfra1healthy42
apifra1healthy87
workeriad1degraded213
croniad1healthy55
edgesin1healthy12
Rows per page:
1–5 of 12

03 . Inputs & Forms

BUTTONSTORYBOOK
Sharp, uppercase, bold. Three visual variants (contained, outlined, text), six semantic palettes, and three sizes.
TEXT_INPUTSTORYBOOK
Theme-aware text input. Supports controlled and uncontrolled usage, multiline, error state, and disabled state.
ACCESS_KEY_PRIMARY
SYSTEM_ERROR_CODE
CRITICAL: CONNECTION_TIMEOUT
BUTTON_GROUPSTORYBOOK
ButtonGroup joins Button children into one cluster and broadcasts variant/color/size via context. ToggleButtonGroup adds selection state — exclusive here, so re-clicking clears it.
VARIANT_CONTAINED
VARIANT_OUTLINED
VARIANT_TEXT
TOGGLE_EXCLUSIVE
VIEW_MODE=GRID
BINARY_CONTROLSSTORYBOOK
Checkbox, Radio, and Switch are all label-wrapped native inputs. Checkbox supports indeterminate state. Radio enforces group exclusivity via name. Switch transitions are CSS-only.
CHECKBOX_STATE
PROP_ACTIVE=TRUE
PROP_ACTIVE=FALSE
RADIO_SELECTION
VAL_01
VAL_02
TOGGLE_STATE
ENABLED
DISABLED
SELECTSTORYBOOK
Select renders a combobox trigger with a themeable portaled listbox of MenuItem options. NativeSelect is the real-<select> counterpart with the same Form/FormControl integration.
CUSTOM_LISTBOX
NATIVE_SELECT
PAGINATIONSTORYBOOK
1-based page navigation with ellipsis ranges and optional first/last controls. Both instances below share one controlled page state.
TEXT_CIRCULAR
OUTLINED_ROUNDED
PAGE_1/12
FORMSTORYBOOK
Form provides field-wide defaults via context; Field bridges to TanStack Form and composes FormControl, FormLabel, and FormHelperText — shown standalone below in the error state.

Visible on the public roster.

INTERACTIVE_COLOR_SIZEButton, Checkbox, Switch, and TextInput across all palette colors and all three sizes.Colors
default
primary
secondary
success
error
info
warning
Sizes
sm
md
lg

04 . Feedback

CIRCULAR_PROGRESSSTORYBOOK
Indeterminate loops continuously with configurable easing. Determinate is value-driven (0–100) on a 10s loop.
default
linear
ease
ease-in
ease-out
ease-in-out
0%
linear
ease
ease-in
ease-out
ease-in-out
LINEAR_PROGRESSSTORYBOOK
The horizontal counterpart of CircularProgress. Value-driven rows follow a shared 10s loop; spinning sends the value segment travelling along the track, wrapping past the end.
INDETERMINATE
QUERY
DETERMINATE_0%
BUFFER_0/20
ROUND_THICK_SPIN
SKELETONSTORYBOOK
Loading placeholders in three shapes. pulse fades opacity so mixed sizes stay in lockstep; wave anchors its shimmer to the viewport. REAL_LOAD is the loaded post the skeletons stand in for.
PULSE
WAVE
REAL_LOAD
Soroush mascot
MASOUD_SOROUSHPRINCIPAL_ENGINEER
Portrait of Masoud Soroush, Principal Software Engineer

05 . Overlay & Behavior

MODALSTORYBOOK
The low-level overlay primitive — portals its content, dims the page with a Backdrop, traps focus, locks body scroll, and closes on Escape or backdrop click.
POPOVERSTORYBOOK
Anchors floating content to an element, portaled above the page. Built on Modal, so backdrop, focus management, and Escape/click-away close come for free.

Cookie-Free by Design. The only cookies we like are the ones that come fresh from the oven.