Neudash Design System

This is the interactive testbed for validating our typography, color tokens, and core components.

Typography

Display / Headings (Momo Trust Display)

Heading 1: Build the future of business

Heading 2: Automate your workflows

Heading 3: Seamless integrations

Heading 4: Real-time sync

Body / Sans (Momo Trust Sans)

Lead Paragraph (text-lg): Neudash is the definitive platform for small businesses seeking to automate their internal processes. Stop doing manual data entry and start focusing on growth.

Standard Body (text-base): By leveraging advanced language models and deterministic workflows, our system can read your emails, update your CRM, and notify your team in Slack, all without human intervention.

Small Body (text-sm): Terms and conditions apply. Please consult our documentation for detailed integration steps.

Color Palette

primary

50
100
200
300
400
500
600
700
800
900
950

secondary

50
100
200
300
400
500
600
700
800
900
950

tertiary

50
100
200
300
400
500
600
700
800
900
950

success

50
100
200
300
400
500
600
700
800
900
950

warning

50
100
200
300
400
500
600
700
800
900
950

error

50
100
200
300
400
500
600
700
800
900
950

surface

50
100
200
300
400
500
600
700
800
900
950

Surface & Card Colors

Surface token scale

surface-50 bg-surface-50
surface-100 bg-surface-100
surface-200 bg-surface-200
surface-300 bg-surface-300
surface-400 bg-surface-400
surface-500 bg-surface-500
surface-600 bg-surface-600
surface-700 bg-surface-700
surface-800 bg-surface-800
surface-900 bg-surface-900
surface-950 bg-surface-950

Approved card recipes

Default card

Forms, tables, bounded workflow sections.

card preset-outlined-surface-200-800 bg-surface-50-950

Muted card

Secondary sections inside a larger surface.

card preset-outlined-surface-200-800 bg-surface-100 dark:bg-surface-900

Inset card

Quiet grouped content, notes, empty rows.

card preset-tonal-surface

Inverse card

Rare high-contrast preview panels.

card bg-surface-950 text-surface-50 dark:bg-surface-100 dark:text-surface-950

Page Grouping & Headers

Workspace

Plain section boundaries, direct headers, and row dividers instead of a rounded enclosing box.

Workspace name

Shown in product headers and workspace lists.

Workspace ID

Use for support and API diagnostics.

01KRD4S4PTX2XZG7G82N6D7M3D

Apps

App state sits in rows with badges and switches. The section owns the grouping, not each row.

Enabled · 2

Matter
Enabled

Intake, deadlines, document requests, and a client portal.

Automation
Enabled

Connect inboxes and Slack, automate replies, hand off to an agent.

Not on your plan · 1

Insights
Upgrade required

Dashboards across matters, channels, and automation runs.

Danger zone

Use color and copy for the risk. Keep the layout in the same section system.

Compact section

Useful for short lists where a full action row would be too much.

Members

4 active members

Billing

Add-ons enabled

Header with icon

Reserved for pages where the icon adds recognition, not decoration.

Workspace Product Directory

Workspace access

3 workspaces available

Choose a workspace

Open Automation or Matter directly from any workspace with that product enabled.

Westbridge Advisory

Matter enabled

Matter

Components: Buttons

Primary

Secondary

Tertiary

Success

Warning

Error

Surface

Base Button Component

Primary actions

Semantic actions

Universal Action Buttons

Base actions

Semantic actions

Context labels

Icon only

Action Menus

Group actions

Tooltips

Email needed

Chips

Presets

Matter case key

CASE-G3PGA7AV CASE-G3PGA7AV

Document request statuses

Waiting on client Pending review Changes requested Complete

File review statuses

Accepted Rejected

Segmented Filters

Milestone state

Milestone state

Selected: all

Search Field

Value: empty

Workspace Switcher

Matter practice selector

Current: Eastgate Migration

Shared Operational Primitives

Notices

Surface notice for neutral operational context.
Success notice for completed changes.
Warning notice for pending or constrained actions.

Selectable cards

Role selection example

Text input

Textarea field

Paginated Table

Less than 10 records

Aisha Khan

Principal applicant

Waiting on client

Updated Today

Ben Walker

Sponsor

Pending review

Updated Apr 28

Carla Nguyen

Migration agent

Complete

Updated Apr 27

Diego Santos

Family member

Changes requested

Updated Apr 26

Evelyn Hart

Employer contact

Waiting on client

Updated Apr 25

Farah Ali

Principal applicant

Pending review

Updated Apr 24

Grace Miller

Sponsor

Complete

Updated Apr 23

50 records, cursor-backed

Request cursor: initial

Aisha Khan 1

Principal applicant

Waiting on client

Updated Today

Ben Walker 1

Sponsor

Pending review

Updated Apr 29

Carla Nguyen 1

Migration agent

Complete

Updated Apr 28

Diego Santos 1

Family member

Changes requested

Updated Apr 27

Evelyn Hart 1

Employer contact

Waiting on client

Updated Apr 26

Farah Ali 1

Principal applicant

Pending review

Updated Apr 25

Grace Miller 1

Sponsor

Complete

Updated Apr 24

Hugo Costa 1

Migration agent

Changes requested

Updated Apr 23

Irene Novak 1

Family member

Waiting on client

Updated Apr 22

Jamal Reed 1

Employer contact

Pending review

Updated Apr 21

1-10 of 50

Loading next cursor

Aisha Khan 2

Principal applicant

Complete

Updated Apr 20

Ben Walker 2

Sponsor

Changes requested

Updated Apr 19

Carla Nguyen 2

Migration agent

Waiting on client

Updated Apr 18

Diego Santos 2

Family member

Pending review

Updated Apr 17

Evelyn Hart 2

Employer contact

Complete

Updated Apr 16

Farah Ali 2

Principal applicant

Changes requested

Updated Apr 15

Grace Miller 2

Sponsor

Waiting on client

Updated Apr 14

Hugo Costa 2

Migration agent

Pending review

Updated Apr 13

Irene Novak 2

Family member

Complete

Updated Apr 12

Jamal Reed 2

Employer contact

Changes requested

Updated Apr 11

11-20 of 50

Components: Cards

Standard Card

Perfect for showcasing features, pricing tiers, or small pieces of content.

Highlighted Card

Use this variation to draw attention to a specific feature or a recommended plan.

Section Surfaces

Default surface

Use for forms, tables, list shells, and bounded page sections.

The shared surface radius is 8px.

Muted surface

Use for quieter secondary sections inside dense workflows.

Controls inside still use the base 4px radius.

Components: Form Elements

Components: Chat Primitives

AI

Hello! I've analyzed your CRM data. I found 12 leads that haven't been contacted this week.

ME

Draft an email to all 12 of them offering a 10% discount.

Branding & Logos

Standard

by by by by

Inverse

by by by by