Morpheme UI design system

A universal, accessible design system built on a 3-layer token architecture: Foundation primitives, Brand aliases, and Semantic context tokens. Designed for projects of any scale.

Consistent

The same tokens and components are used consistently across the entire interface.

Accessible

Semantic colors follow real-world associations (red = danger, yellow = warning, green = positive) to reduce cognitive load.

Scalable

A layered token system (foundation, brand, semantic) makes theming and customization straightforward.

Clean & light

Default visual style is light mode with crisp typography, subtle shadows, and generous whitespace.

Foundation

Primitive values: #F04438, #1D6EEB

Brand

Brand aliases: colorPrimary500, colorSecondary500

Semantic

Contextual: --color-error, --color-primary

Colors

Morpheme uses a 3-layer color system: Foundation (primitives), Brand (product), and Semantic (contextual UI). Always use semantic tokens in components to preserve theming capability.

Foundation colors

Base colors that remain constant regardless of theme.

#FFFFFF white

#000000 black

#28A0F8 info

#F79009 warning

#12B76A success

#F04438 error

--color-white --color-black --color-info --color-warning --color-success --color-error

Primary scale (blue)

Brand primary color used on all interactive elements. colorPrimary500: #1D6EEB

25#F5F8FF

50#EBF3FF

100#BFDBFE

200#93C5FD

300#60A5FA

400#3B82F6

500#1D6EEB

600#1B69C2

700#1554A1

800#0D4487

900#072D60

--color-primary-25 through --color-primary-900

Secondary scale (orange)

Used sparingly for pills, alerts, accents, and non-primary badges. colorSecondary500: #E55B05

25#FFF9F5

50#FFF3EB

100#FFE0C2

200#FFBC87

300#FF9855

400#FF7320

500#E55B05

600#CC4E00

700#A33E00

800#7A2E00

900#4A1C00

Neutral scale (gray)

Used for text, borders, backgrounds, and UI chrome.

25#FCFCFD

50#F9FAFB

100#F2F4F7

200#EAECF0

300#D0D5DD

400#98A2B3

500#667085

600#475467

700#344054

800#1D2939

900#101828

Semantic colors

Mapped from foundation colors to specific UI contexts. Each category has a 25-900 scale.

Info

25

100

300

500

700

900

Warning

25

100

300

500

700

900

Success

25

100

300

500

700

900

Error

25

100

300

500

700

900

Typography

Morpheme uses Poppins, a geometric sans-serif with clean, modern character. Available in Regular (400), Medium (500), Semibold (600), and Bold (700).

Font family

REGULAR 400

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

MEDIUM 500

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

SEMIBOLD 600

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

BOLD 700

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789

--font-family: "Poppins", -apple-system, sans-serif

Type scale

Display 2xl

72px / 90px / -2%

The quick brown fox

Display xl

60px / 72px / -2%

The quick brown fox

Display lg

48px / 60px / -2%

The quick brown fox

Display md

36px / 44px / -2%

The quick brown fox

Display sm

30px / 38px

The quick brown fox

Display xs

24px / 32px

The quick brown fox

Text xl

20px / 30px

The quick brown fox jumps over the lazy dog

Text lg

18px / 28px

The quick brown fox jumps over the lazy dog

Text md

16px / 24px

The quick brown fox jumps over the lazy dog

Text sm

14px / 20px

The quick brown fox jumps over the lazy dog

Text xs

12px / 18px

The quick brown fox jumps over the lazy dog

Weight usage

Aa

Regular (400)

Body text, descriptions

Aa

Medium (500)

Labels, nav items, secondary headings

Aa

Semibold (600)

Headings, subheadings, important labels

Aa

Bold (700)

Display text, CTAs, emphasis

Spacing

Based on a 4px base unit. All spacing values are multiples of 4.

spacing-1

4px

spacing-2

8px

spacing-3

12px

spacing-4

16px

spacing-5

20px

spacing-6

24px

spacing-8

32px

spacing-10

40px

spacing-12

48px

spacing-16

64px

spacing-20

80px

spacing-24

96px

--space-1: 4px through --space-24: 96px

Border radius

A range of border-radius tokens from sharp corners to fully rounded pills.

radius-none

0px

radius-xs

2px

radius-sm

4px

radius-md

6px

radius-lg

8px

radius-xl

12px

radius-2xl

16px

radius-full

9999px

Shadows

Shadows serve as elevation indicators. From subtle inner shadows to deep 2xl elevation.

shadow-inner

--shadow-inner

shadow-none

--shadow-none

shadow-sm

--shadow-sm

shadow (default)

--shadow

shadow-md

--shadow-md

shadow-lg

--shadow-lg

shadow-xl

--shadow-xl

shadow-2xl

--shadow-2xl

Blur & opacity

Backdrop blur tokens for glassmorphism effects, and opacity tokens for overlays.

Blur scale

blur-sm4px

blur-sm (4px)

blur-md8px

blur-md (8px)

blur-lg16px

blur-lg (16px)

blur-xl32px

blur-xl (32px)

Opacity scale

opacity-sm (~0.20)

opacity-md (~0.40)

opacity-lg (~0.65)

opacity-xl (~0.90)

Buttons

Available in 2 color groups (primary, destructive) x 4 style variants (filled, outlined, text, icon-only) x 4 sizes (lg, md, sm, xs) x 6 states. Font weight is Medium (500) for all sizes. Default size is md (44px).

Primary buttons

Filled - text only

Filled - icon left

Filled - icon right

Filled - icon both sides

Outlined - text only

Outlined - icon left

Outlined - icon right

Outlined - icon both sides

Text (ghost) - text only

Text (ghost) - icon left

Icon-only - square

Icon-only - rounded

Primary filled - states

Default

Hover

Active

Focus

Disabled

Loading

Destructive buttons

Filled - all sizes

Filled - icon left

Outlined - all sizes

Text (ghost) - all sizes

Icon-only - square & rounded

Destructive filled - states

Default

Hover

Focus

Disabled

Loading

Form inputs

All form elements follow a consistent height of 44px, with 1.5px borders, 8px border-radius, and Poppins typography.

Text input states

Default

Focused (click to see)

Error state

Please enter a valid email address.

Disabled

Label and helper text

Email address

We will never share your email with anyone else.

Input with prefix

Website URL

https://

Select dropdown

Country

Textarea

Message

Checkbox and radio

Checkboxes

Accept terms and conditions Subscribe to newsletter

Radio buttons

Monthly plan Annual plan

Cards

Cards use white background, 1px gray-200 border, radius-xl (12px), 24px padding, and shadow-md. Interactive cards elevate to shadow-lg on hover.

Default card

This is a standard card with shadow-md, radius-xl, and 24px padding. No hover effect applied.

Interactive card

Hover over this card to see it elevate to shadow-lg with a subtle translateY(-2px) transition.

Card with image

Cards can include an image placeholder area above the body content.

border-radius: var(--radius-xl) box-shadow: var(--shadow-md) padding: var(--space-6)

Badges

Compact labels at 22px height, pill-shaped (radius-full), using Poppins Medium 12px.

Semantic badges

Info Success Warning Error

Custom badges

Sale New In progress Completed Pending Failed

Alerts

Alert banners with a 4px left border, semantic background color, icon, title, and description.

Information

A new software update is available. See what's new in version 2.0.

Success

Your changes have been saved successfully.

Warning

Your trial period ends in 3 days. Upgrade now to avoid service interruption.

Error

There was a problem processing your payment. Please check your card details and try again.