AsleepLegacy format

Asleep answers one question: is it okay to ping them? The interface should feel like checking a night porter’s ledger. Huge local time. One-word verdict. Quiet paper grain. No purple, no glassmorphism, no Inter.

#0B0906#0B0906
#E8A54B#E8A54B
#F3E6C8#F3E6C8
#C45C26#C45C26
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Brand

Surfaces

Verdict

Typography

DisplayFraunces · clamp 56-120 · Regular

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

HeadlineFraunces · 40px · Regular

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

DeckSource Serif 4 · 22px · Regular

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

BodySource Serif 4 · 18px · Regular

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

MetaIBM Plex Sans · 12px · Bold

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

ClockIBM Plex Mono · inherit · Regular

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

Spacing

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

Asleep answers one question: is it okay to ping them? The interface should feel like checking a night porter’s ledger. Huge local time. One-word verdict. Quiet paper grain. No purple, no glassmorphism, no Inter.

Components

Chips

default

Inputs

Buttons

City row

default

Embed badge

default

Do's & Don'ts

Do

Lead every city page with the time, not a navbar speech.
Keep one accent (sodium) except verdict colors.
Write like a night editor, not a growth marketer.
Use tabular lining figures for every clock.
Grain the field; never a flat #000.

Don't

Do not use Inter, Roboto, Space Grotesk, or purple gradients.
Do not card-grid the homepage like a startup landing.
Do not animate the whole page on scroll.
Do not swap city names on identical template copy — blurbs stay unique.
Shape

Radius 0 on chrome and buttons. 2px hairlines in #2A241C. Verdict pills may use 999px only for the status chip. No drop shadows; depth from grain and lamp vignette.

Motion

One page-load stagger (120ms steps) on the clock and verdict. Hover: sodium underline. No bounce. Clocks tick without layout shift (tabular figures).

Do

1. Lead every city page with the time, not a navbar speech.

2. Keep one accent (sodium) except verdict colors.

3. Write like a night editor, not a growth marketer.

4. Use tabular lining figures for every clock.

5. Grain the field; never a flat #000.

Don't

1. Do not use Inter, Roboto, Space Grotesk, or purple gradients.

2. Do not card-grid the homepage like a startup landing.

3. Do not animate the whole page on scroll.

4. Do not swap city names on identical template copy — blurbs stay unique.

Download .md

License MIT
Uploaded 4 days ago
Version v1
File size 3.9 KB
Downloads 10
Copies 4

Use with MCP

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

Don't have the MCP? Install it here