Design system

Tokens, components, and CSS

Everything from @storeos/design-system: semantic theme, type classes, radii, shadows, buttons, and React primitives. Edit design-tokens.ts, run generate. Logo downloads live on the brand kit.

App CSS import

@import "tailwindcss";
@import "@storeos/design-system/styles.css";

Token quick reference

Tokens

Semantic theme and brand utilities

styles.css maps palette colors onto shadcn variables (bg-background, text-primary, …). Brand utilities expose the raw palette.

background

--background → milk

foreground

--foreground → ink

card

--card → white

primary

--primary → green

secondary

milk + lime mix

muted

milk + green mix

accent

--accent → lime

destructive

--destructive

Brand color utilities

bg-brand-ink

bg-brand-milk

bg-brand-leaf

bg-brand-green

bg-brand-deep-green

bg-brand-lime

bg-brand-sunshine

bg-brand-coral

bg-brand-sky

bg-brand-night

Shape

Radii

Use rounded-brand-sm|md|lg|xl. App icon uses --storeos-radius-icon (24.6%).

sm

rounded-brand-sm

0.625rem

md

rounded-brand-md

0.875rem

lg

rounded-brand-lg

1.25rem

xl

rounded-brand-xl

1.5rem

full

rounded-full

9999px

icon

.storeos-icon-tile

24.6%

Elevation

Shadows

Ink-tinted soft and card shadows. Utilities: shadow-brand-soft, shadow-brand-card.

soft

shadow-brand-soft

0 18px 60px rgb(16 35 26 / 0.12)

card

shadow-brand-card

0 12px 36px rgb(16 35 26 / 0.10)

Components

Buttons

Polaris-style bevels. Add a size modifier to the base class: --medium or --compact.

Variant

Default

base class

Medium

--medium

Compact

--compact

Primary

.storeos-btn-primary

Dark

.storeos-btn-dark

Secondary

.storeos-btn-secondary

Outline

.storeos-btn-outline

Ghost

.storeos-btn-ghost

Destructive

.storeos-btn-destructive

Plain

.storeos-btn-plain

Pairing

<a className="storeos-btn-primary">Create a free store</a>
<a className="storeos-btn-primary storeos-btn-primary--medium">Sign up</a>
<a className="storeos-btn-primary storeos-btn-primary--compact">Compact</a>

Type

Typography

Figtree for Latin UI; Hind Siliguri for Bangla. Classes: .storeos-display … .storeos-caption.

Aa

Light 300

Aa

Regular 400

Aa

Medium 500

Aa

Semi Bold 600

Aa

Bold 700

Aa

Extra Bold 800

Aa

Black 900

display

.storeos-display

64 / 60 · 800 · -5%

Keep every promise.

heading

.storeos-heading

36 / 40 · 700 · -3%

Sell. Ship. Collect.

subhead

.storeos-subhead

22 / 28 · 600

Your order is with the courier.

body

.storeos-body

16 / 26 · 400

Take orders, get paid on delivery, and keep every promise at your own pace.

caption

.storeos-caption

12 / 18 · 500

COD ✓ Cash on delivery

Primary — Figtree

Cash on delivery

Headlines, body copy, and UI.

Get on Google Fonts

Bangla — Hind Siliguri

ক্যাশ অন ডেলিভারি

Bangla text, paired with Figtree at the same weight.

Get on Google Fonts

Embed code (for a website)

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800;900&family=Hind+Siliguri:wght@400;500;600;700&display=swap" rel="stylesheet">

Surfaces

Brand backgrounds

Live BrandBackground variants. Pass withMark for a leaf watermark.

Stripes

stripes

Lime glow

limeGlow

Sunshine pop

sunshinePop

Sky mist

skyMist

Leaf sweep

leafSweep

Bubbles

bubbles

Ripples

ripples

Dots

dots

Fluted

fluted

Fluted coral

flutedCoral

React

Package components

Import from @storeos/design-system. Mark fills with currentColor.

StoreOSLogo

StoreOSMark

StoreOSAppIcon

StoreOSAppIcon solid

import {
  BrandBackground,
  StoreOSAppIcon,
  StoreOSLogo,
  StoreOSMark,
  colors,
} from "@storeos/design-system";

Icons

Iconography

Dimensional 3D icons from the StoreOS console, shipped as transparent 96 px PNGs. Use them where an item needs a face; keep flat line icons for small actions inside buttons and menus.

20 px