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 . Typography

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
Aa
MONOJetBrains Mono
Aa

02 . Core Layout

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

03 . Interactive Controls

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
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
LINKSTORYBOOK
Renders as an a tag and composes Typography. Auto-injects noopener noreferrer for "_blank".
alwaysAlways underlined
hoverUnderline on hover
noneNo underline

04 . Media

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
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

05 . Color & Size

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

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