NotiPulse Design System

NotiPulse Design System mockup preview
Click to expand

Notification-heavy and alert management apps. Bold severity colors, elevated cards, and a visual hierarchy for rapid triage. Material shadows and animated elevation for urgency. All patterns for second-scale interaction.

Primary#EF4444
Secondary#3B82F6
Tertiary#F59E0B
Background#F9FAFB
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

displayAlbert Sans · 30px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

headlineAlbert Sans · 24px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

subheadAlbert Sans · 19px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

body-largeInter · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyInter · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

body-smallInter · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

captionInter · 12px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

overlineInter · 11px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

codeSource Code Pro · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 6px

Notification-heavy and alert management apps. Bold severity colors, elevated cards, and a visual hierarchy for rapid triage. Material shadows and animated elevation for urgency. All patterns for second-scale interaction.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

Filter (active)Filter (default)Status (critical)Status (high)Status (medium)Status (low)

Elevation & Depth

Subtle
Medium
Large
Overlay
Alert Lift

Do's & Don'ts

Do

Use severity-colored left borders on notification cards for instant visual triage
Animate card elevation when a new alert arrives to draw attention without being disruptive
Display timestamps in relative format ("2m ago") for glanceability
Support batch actions (select all, dismiss selected, snooze selected) for efficiency
Group notifications by source or severity with clear section headers
Provide a clear "mark all as read" action accessible within one tap

Don't

Use the primary red color for non-alert UI elements -- reserve it for urgency
Stack more than 3 unread critical alerts before prompting the user to triage
Auto-dismiss critical alerts -- always require explicit user acknowledgment
Play sound or haptic for every notification level -- reserve strong feedback for critical alerts only
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 7.3 KB
Downloads 0
bold clean dashboard light mobile-app

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/notipulse and implement it in my code

Don't have the MCP? Install it here