OUR SHARED FOUNDATION

Soft by nature. Clear by design.

One visual language for every part of DesignMyUI. A quiet canvas, expressive details, and interactions that feel familiar wherever you are.

A calm palette. A clear hierarchy.

White and lilac create the atmosphere. Dark ink does the reading. Pastel shades belong on surfaces and decoration; links and important text use deeper tones.

Canvas

A clean foundation.

--background

Soft surface

Working areas and product previews.

--surface

Tinted surface

A little emphasis, used sparingly.

--surface-tinted

Ink

Headings and primary content.

--foreground

Supporting text

Descriptions, labels and guidance.

--text-secondary

Accent

Links, selection and focus.

--accent

Normal text aims for at least 4.5:1 contrast. Large text and focus indicators aim for at least 3:1. Status always has a readable label alongside its color.

Expressive headings. Comfortable reading.

Manrope gives headings their character. Inter keeps everything else clear. Body text is 15px; captions never fall below 12px. Form input text is 16px on mobile to avoid an unexpected zoom.

Display

Beautiful interfaces.

Page title

A beautiful beginning.

Section title

Small details. Big difference.

Card title

A thoughtful foundation.

Body

Enough room to read. Enough clarity to keep going.

Caption

Supporting details stay legible, even on a small screen.

Room to breathe. Shapes that belong together.

Spacing follows a 4px base: 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80 and 96px. The content container stops at 1160px. Related things sit close together; separate ideas get more room.

Small

12px · inputs & utility panels

Medium

20px · cards & previews

Large

28px · feature panels

Pill shapes are reserved for actions and compact status labels. Borders separate surfaces. Shadows explain hover or elevation; they are never added to every element.

Familiar controls, everywhere.

Primary actions use a dark pill. Secondary actions use a bordered surface. Quiet actions use an accent text treatment. Buttons are 48px tall, or 44px in compact navigation; icon-only actions also have a 44px target and an accessible name.

Explore components Browse UI kits Read the guide

FreePremiumReactTypeScript

These are the same shared controls used by the landing, catalog and product pages. Marketplace components retain their own versioned source, so they remain portable.

Small movements. Clear feedback.

Hover & press

Hover gently raises an action by 2px or deepens its surface. Press settles it by 1px. A disabled control cannot move or accept an action.

Focus & selection

Keyboard focus uses a 3px accent outline with 4px space. Selected controls keep their label and expose their state to assistive technology.

Feedback

Forms show pending, success or error only from a real request. Errors use a readable message and a distinct field border. Copy confirmation follows a successful clipboard write.

Motion

Controls respond in 160ms; surfaces in 240ms. Decorative entrances take at most 700ms. Reduced-motion preferences remove animation, smooth scrolling and movement.

The same language. A little more flexibility.

Desktop · above 1100px

48px outer gutters and 96px section spacing. Component cards use three columns; larger blocks use two.

Tablet · 541–1100px

32px outer gutters and 80px section spacing. Component cards move to two columns at 850px. Large sections stack where their content needs room.

Mobile · up to 540px

20px outer gutters and 64px section spacing. Cards and product details use one column. Text keeps its reading size; navigation uses an explicit menu.

Content comes first

Long labels wrap. Tags flow to the next line. Category tabs scroll inside their own area, and code commands wrap without pushing the page sideways.

Foundation v1.0See it in context