Neumorph Design System · Component Library

Foundation — Typography

This system uses the following font families. Every sample below is rendered live — not a screenshot.

display

Quicksand

Headings, buttons, badges

body

Inter

Body copy, inputs, tables

label

Inter

Field labels, captions

Display / Hero — 48px

The quick brown fox

Page title — 32px

Component library overview

Section heading — 24px

Form controls and inputs

Body large — 18px

Base body copy at large size for lead paragraphs and introductory content blocks.

Body base — 15px

Standard body text for descriptions, helper copy, and long-form content within cards and panels.

Caption — 13px

Captions, timestamps, and supplementary metadata rendered at reduced size.

Label / EyebrowSection label sample

Foundation — Color Palette

Background

Surface

Primary

Text primary

Text muted

Border

Success

Error

Foundation — Divider / SectionLabel

This page uses SectionLabel to open every section

Button

Variants

Sizes

Use cases

Badge

Variants

SuccessWarningErrorInfoNeutralNew

Use cases

Ada LovelaceActiveDesign Lead

NewProduct launch flag on a release note

P0Blocked3 openSeverity + count on an issue row

v2.4StableBreaking

DesignBetaInternalUrgent

Avatar

Sizes & shapes

Status dots

Use cases

Margaret Hamilton

Profile header — large avatar + status

Square team strip

+2Group with overflow

Card

Default card

Static container, no interaction.

Clickable card

Click me — fires a real handler.

FeaturedTheme

Neumorph highlights

Card with badge header for featured content.

Grace Hopper

Engineer · Online

Avatar + meta composition for people cards and directory rows.

Actions footer

Card that ends with a real action row.

Input

EmailWe'll only use this for account updates.

Search

Full nameAppears on invoices and invites.

PasswordAt least 8 characters.

Seat count

Website

Workspace IDRead-only identifier.

Textarea

Bio0 / 120

Internal notes0 / 280Visible to your team only.

Checkbox

Select all

DesignEngineeringResearchProduct

Radio

Plan

StarterProEnterprise

Billing cycle

MonthlyYearly — save 20%

Switch

Enable notifications

Channel

Marketing emailsAuto-save drafts

Select

Role

Timezone

MultiSelect

Tags (1/3)

Skills (2/4)

DatePicker

Start date

End date

TimePicker

Meeting time

Reminder15 minutes before the meeting by default.

Table

With data — sortable + selection

		Status
Ada Lovelace	Design Lead	Active
Grace Hopper	Engineer	Active
Alan Turing	Researcher	Pending
Margaret Hamilton	Engineer	Active
Katherine Johnson	Analyst	Idle
Radia Perlman	Architect	Active

Showing page 1 of 2 from 12 rows — use Pagination below.

Loading

			Status

Empty

			Status
No rows to show.

Pagination

Paired with table dataset

Drives the “With data” table above.

Mid-range (page 3 of 8)

Near the end (page 5 of 5)

Skeleton

Avatar + lines

Card block

Table row placeholders

Form field stack

List items

Media / thumb row

Button row placeholders

Graph

Focus sessions completed

Mon

Tue

Wed

Thu

Fri

Sat

Sun

Sample dataset for Neumorph — values scale relative to the highest bar in the series.

Toast

Tabs

Horizontal

Overview panel — summary copy for Neumorph. Use arrow keys to move between tabs.

Vertical

Ada Lovelace

Vertical tabs keep navigation beside the panel.

Composed Flow — Register a Record

A realistic product moment: open the modal, fill fields with validation, submit, and see a toast plus a new table row. Secondary paths prove confirm and info modals stay reachable from the same section.