Deep ReefDESIGN.md alpha

Ocean-inspired system for dive centers, liveaboard operators, dive-site guides and underwater photography trips. It should feel like looking down from a boat into clear water: calm, deep and inviting, with one warm spark of coral that says 'book now'. Fonts were chosen with full Latin Extended coverage, so Polish, Czech and other Central European diacritics (ą, ę, ł, ż, ř, ů) render correctly in every weight.

primary#0F2B3D
secondary#16707A
tertiary#E07A5F
neutral#7A8A92
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

displayOutfit · 56px · Bold

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

headline-lgOutfit · 40px · Bold

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

headline-mdOutfit · 28px · Bold

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

headline-smOutfit · 22px · Bold

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

body-lgDM Sans · 18px · Regular

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

body-mdDM Sans · 16px · Regular

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

body-smDM Sans · 14px · Regular

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

label-lgDM Sans · 16px · Bold

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

label-mdDM Sans · 13px · Bold

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

label-smDM Sans · 12px · SemiBold

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

statOutfit · 32px · Bold

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

Corner Radius

0px
6px
10px
16px
9999px

Spacing

Base: 4px
4px
8px
8px
16px
24px
24px
40px
64px
96px
1200px

Ocean-inspired system for dive centers, liveaboard operators, dive-site guides and underwater photography trips. It should feel like looking down from a boat into clear water: calm, deep and inviting, with one warm spark of coral that says 'book now'. Fonts were chosen with full Latin Extended coverage, so Polish, Czech and other Central European diacritics (ą, ę, ł, ż, ř, ů) render correctly in every weight.

Components

Buttons

Inputs

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Eyebrow

default

Chips

defaultaccent

Stat

default

Caption

default

Nav

default

Footer

default

Success Badge

success

Alert Error

error

Divider

default

Muted Icon

default

Elevation & Depth

card

Do's & Don'ts

Do

Use coral only for booking and the single most important action.
Show depth, dive count and required certification on every trip card.

Don't

Use pure white page backgrounds; use warm sand.
Put white text on coral or shallows.
Download .md
Storm Cube Marketing Agency Storm Cube Marketing Agency @stormcube
License CC-BY
Uploaded yesterday
Version v1
File size 7.5 KB
Downloads 1
Copies 0
clean landing-page light modern travel

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/stormcube/deep-reef and implement it in my code

Don't have the MCP? Install it here