Design Language

Forge's design system is built on consistent principles that create cohesive, accessible interfaces.

Colors

Our color palette is designed for both light and dark modes, with semantic colors that communicate meaning.

Brand Colors

Primary

--brand-primary

Secondary

--brand-secondary

Semantic Colors

Success

--success

Warning

--warning

Error

--error

Info

--info

Neutral Colors

Text Primary

--text-primary

Text Secondary

--text-secondary

Text Muted

--text-muted

Background Primary

--bg-primary

Background Secondary

--bg-secondary

Background Tertiary

--bg-tertiary

Border Color

--border-color

Border Subtle

--border-subtle

Typography

We use a system font stack for optimal performance and native feel across platforms.

css

1font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

Heading 1

2.25rem700

Page titles

Heading 2

1.75rem600

Section titles

Heading 3

1.25rem600

Card titles

Heading 4

1rem600

Subsections

Body Large

1.125rem400

Intro text

Body

1rem400

Default text

Body Small

0.875rem400

Secondary info

Caption

0.75rem400

Labels, hints

Spacing

Consistent spacing creates visual rhythm and hierarchy. We use a base-4 scale.

4px

8px

16px

24px

32px

2xl

48px

tsx

1<VStack gap="md">  {/* 16px gap */}
2  <HStack gap="sm"> {/* 8px gap */}
3    <Button />
4    <Button />
5  </HStack>
6</VStack>

Border Radius

Rounded corners soften the interface and create a friendly, modern feel.

None

2px

4px

8px

12px

16px

Full

9999px

Shadows & Elevation

Shadows create depth and establish visual hierarchy. We provide three hardness levels (soft, medium, hard) and six size scales (xs to 2xl), plus special presets for common use cases.

Soft Shadows

High blur, subtle effect - great for light interfaces

soft.xs

soft.sm

soft.md

soft.lg

soft.xl

2XL

soft.2xl

Medium Shadows

Balanced shadows - versatile for most cases

medium.xs

medium.sm

medium.md

medium.lg

medium.xl

2XL

medium.2xl

Hard Shadows

Less blur, sharp edges - more dramatic effect

hard.xs

hard.sm

hard.md

hard.lg

hard.xl

2XL

hard.2xl

Brand & Glow Effects

Colored shadows for emphasis and brand elements

Brand SM

brand.sm

Brand MD

brand.md

Brand LG

brand.lg

Glow SM

glow.sm

Glow MD

glow.md

Glow LG

glow.lg

Inner Shadows

Inset shadows for pressed states and inputs

Inner SM

inner.sm

Inner MD

inner.md

Inner LG

inner.lg

Elevation Presets

Pre-configured shadows for common UI elements

card

elevation.card

dropdown

elevation.dropdown

modal

elevation.modal

toast

elevation.toast

popover

elevation.popover

button

elevation.button

buttonHover

elevation.buttonHover

fab

elevation.fab

Usage

tsx

1import { SHADOWS } from 'wss3-forge'
2 
3// Direct usage with inline styles
4<Card style={{ boxShadow: SHADOWS.soft.md }}>
5  Soft medium shadow
6</Card>
7 
8// Elevation presets for common cases
9<div style={{ boxShadow: SHADOWS.elevation.card }}>Card</div>
10<div style={{ boxShadow: SHADOWS.elevation.modal }}>Modal</div>
11<div style={{ boxShadow: SHADOWS.elevation.dropdown }}>Dropdown</div>
12 
13// Brand-colored shadow for emphasis
14<Button style={{ boxShadow: SHADOWS.brand.md }}>
15  Brand Button
16</Button>
17 
18// Glow effect for focus states
19<Input style={{ boxShadow: SHADOWS.glow.sm }} />

Dark Mode

All components automatically adapt to dark mode. Colors are carefully adjusted to maintain contrast and readability.

Forge uses CSS custom properties for theming. Wrap your app with ForgeProvider and use the theme context to toggle between modes.

tsx

1import { ForgeProvider, useTheme } from 'wss3-forge'
2 
3function App() {
4  return (
5    <ForgeProvider theme="dark">
6      <YourApp />
7    </ForgeProvider>
8  )
9}
10 
11// Toggle theme
12const { mode, toggleTheme } = useTheme()

Installation

Components Overview

Last updated: December 2025