Coral Stay

Coral Stay mockup preview
Click to expand

A warm, inviting design system built around trust and belonging. Coral Stay uses a signature coral-pink accent against soft, neutral backgrounds to create an emotional connection with users. The aesthetic is rounded, friendly, and photographic — designed to make every interaction feel personal, approachable, and effortlessly welcoming.

Primary#FF5A5F
Secondary#00A699
Neutral#767676
Background#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

Hero TitleNunito Sans · 48px · Extra Bold

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

Section TitleNunito Sans · 32px · Bold

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

Card TitleNunito Sans · 22px · Bold

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

SubtitleDM Sans · 18px · SemiBold

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

Body LargeDM Sans · 16px · Regular

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

BodyDM Sans · 14px · Regular

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

Body SmallDM Sans · 12px · Regular

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

LabelDM Sans · 12px · SemiBold

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

CodeJetBrains Mono · 14px · Regular

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

Spacing

Base: 8px

A warm, inviting design system built around trust and belonging. Coral Stay uses a signature coral-pink accent against soft, neutral backgrounds to create an emotional connection with users. The aesthetic is rounded, friendly, and photographic — designed to make every interaction feel personal, approachable, and effortlessly welcoming.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

DefaultSelectedFilter

Checkbox

Unchecked

Checked

Tooltip

Default

Navigation

Desktop

Search

Desktop Full

Mobile

Elevation & Depth

Level 1
Level 2
Level 3

Do's & Don'ts

Do

Use photography as a primary design element — large, high-quality images drive engagement
Maintain warmth through the coral accent and rounded shapes
Use #222222 as the dominant text color for a warm, non-harsh reading experience
Keep card layouts consistent with image-top, content-bottom pattern
Provide generous touch targets (48px minimum) for all booking-critical actions

Don't

Overuse the coral color — reserve it for primary CTAs and hearts only
Use pure black (#000000) for text — it feels too cold for this system
Use sharp corners — minimum 4px border-radius on all interactive elements
Hide pricing — always show cost prominently with DM Sans weight 700
Download .md

License MIT
Uploaded 1 months ago
Version v1
File size 6.3 KB
Downloads 75
Copies 10

Use with MCP

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

Don't have the MCP? Install it here