Shomorthok design system / alpha

A bright consumer system built to move people from attention to action.

This showcase is the working reference for how Shomorthok should feel in-market: bold red calls to action, clear proof-first hierarchy, generous white space, and friendly utility typography that never drifts into generic SaaS neutrality.

Primary action

#E83330

Standard radius

4 / 8px

Section spacing

48px

Source of truth

Use this page to review the system before shipping new surfaces.

DESIGN.MD defines the approved direction. This route translates that direction into visible hierarchy, component usage, and experience patterns that product and marketing work can share.

Review checklist

Primary CTAs stay red, wide, and immediately legible.
Major copy uses bold headline rhythm rather than tiny utility labels.
Cards, forms, and content blocks preserve air instead of crowding.
Depth comes from subtle borders and soft shadow, not heavy layering.

Brand posture

Bright, dependable, and action-led. Red should pull people toward the next step without making the interface feel noisy.

Visual structure

Wide layouts, generous white space, bold proof points, and restrained depth. Clarity comes from spacing and contrast first.

Source of truth

Use this page alongside DESIGN.MD to judge whether product surfaces feel like one coherent consumer platform.

Design language

The system should feel like a high-visibility everyday utility brand.

This page is the visible catalog for the current display system. It shows how the brand foundations, reusable primitives, and real product surfaces should align across storefront, creator, and admin work.

CTA color

#E83330

Keep commitment moments obvious and consistent.

Standard radius

4 / 8px

Controls stay crisp; panels and overlays cap at 8px.

Section gap

48px

Major blocks breathe without oversized component spacing.

Action-led

Red marks commitment moments and directional movement. It should pull people toward the next step, not decorate the whole interface.

Proof-first

Large numbers, renewal signals, and trust markers should arrive early so the product feels credible before people read deeper.

Bright and open

White space does real work. Most surfaces should feel airy and promotional rather than dense, gray, or administrative by default.

Utility-grade

Small radii, thin borders, and calm controls keep the interface dependable. Use polish, not ornament, to build confidence.

Core palette

The brand stays tightly bound to the red-led core palette. Avoid inventing a parallel accent system.

Primary

#E83330

Primary CTA, key highlights, urgent brand moments

Secondary

#152934

Navigation text, headings, high-contrast detail

Tertiary

#5D6467

Supporting copy, metadata, softer labels

Surface

#FFFFFF

Main canvas, cards, popovers, dialogs

Border

#E5E9EB

Inputs, dividers, light structure

Muted

#F7F8F9

Quiet panels, chips, utility rows

Shape and depth

Most surfaces should rely on thin borders and soft shadow instead of dramatic layering.

`none` / 0px

`sm` / 4px

`full` / chips

Light elevation / low

Light elevation / medium

Cards, inputs, and navigation should feel structured and confident. Reserve full rounding for chips, badges, and compact filter states.

Typography scale

headline-display

46 / 55, major hero statement

Support trusted creators and unlock everything in one clear step.

headline-lg

37 / 55, section headline

Big proof points should land before the details do.

headline-md

30 / 40, module headline

Creator surfaces should feel premium without drifting into luxury styling.

headline-sm

25 / 30, subheadline

Secondary titles stay bold but practical.

body-lg

20 / 30, supporting lead copy

Use large body copy for plain-language explanations around pricing, creator value, and subscriber benefits.

body-md

16 / 24, standard body

Most UI descriptions, helper text, and dashboard explanations should live at this size.

label-md

13 / 20, compact UI label

Labels stay sentence case and readable.

micro

11 / 14, micro copy

Tiny metadata and quiet utility labels.

Spacing rhythm

4px

8px

16px

24px

48px

Major layout decisions should move in deliberate steps. Resist inventing dense micro-spacing for sections that are meant to feel public, promotional, and clear.