TidewaterDESIGN.md alpha

Tidewater is for sailing schools, surf and kitesurf camps, SUP and kayak rentals and coastal activity centers. It should feel like a bright, windy morning at the beach: fresh, clean and optimistic, but calm enough to trust with a course booking. Fonts were chosen with full Latin Extended coverage, so Polish, Czech and other Central European diacritics (ą, ę, ł, ż, ř, ů) render correctly in every weight.

primary#16324F
secondary#2C7269
tertiary#F2C57C
neutral#7F8C94
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

displayManrope · 56px · Extra Bold

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

headline-lgManrope · 40px · Extra Bold

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

headline-mdManrope · 28px · Extra Bold

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

headline-smManrope · 22px · Extra Bold

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

body-lgManrope · 18px · Regular

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

body-mdManrope · 16px · Regular

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

body-smManrope · 14px · Regular

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

label-lgManrope · 16px · Bold

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

label-mdManrope · 13px · Bold

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

label-smManrope · 12px · SemiBold

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

statManrope · 32px · Extra Bold

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

Corner Radius

0px
8px
12px
18px
9999px

Spacing

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

Tidewater is for sailing schools, surf and kitesurf camps, SUP and kayak rentals and coastal activity centers. It should feel like a bright, windy morning at the beach: fresh, clean and optimistic, but calm enough to trust with a course booking. 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.

Chips

defaultaccent

eyebrow

default

default

default

default

default

default

default

error

default

success

default

Elevation & Depth

card

Do's & Don'ts

Do

Show live wind and wave conditions near the top of the page.
Keep navy for booking and sun for secondary actions.

Don't

Use saturated tropical colors or neon.
Place white text on sun or mist.
Download .md

License CC-BY
Uploaded yesterday
Version v1
File size 7.3 KB
Downloads 4
Copies 1

Use with MCP

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

Don't have the MCP? Install it here