Design System Inspiration of Asleep

1. Visual Theme & Atmosphere

Asleep (에이슬립) is a KAIST-born sleep-tech AI company, and its marketing site reads exactly like that lineage suggests: a dark, cinematic, research-grade surface where a single electric blue does all the persuading. The hero canvas is a near-black #121212, text is pure white (#ffffff), and the one saturated accent — an electric blue #2a75fc — is reserved almost entirely for the primary call-to-action. The effect is a page that feels like a laboratory at night: quiet, precise, technically confident, letting sleep-data visualizations glow against the dark rather than competing with decorative color.

The typographic voice is unmistakably Korean-modern: everything runs in Pretendard Variable, the de-facto Korean product typeface, with headlines at weight 600 and large sizes (52px on the hero, 40px on section titles) projecting a calm, declarative authority ("수면으로의 영역 확장, 어렵지 않습니다" / "Expanding into sleep is not difficult"). Body and UI text drop to a quiet 14px / weight 400 with a generous 20px line-height, optimized for dense hangul legibility. There is no second display font and no weight above 600 — the hierarchy comes from size and the dark/light contrast, not from typographic flourish.

The most distinctive geometric choice is what is absent: the marketing chrome is sharp-cornered and shadowless. Live inspection found border-radius: 0px on the primary CTA, the outlined button, and the feature cards, and box-shadow: none across the hero, nav, and cards. Nothing is a pill, nothing floats on elevation — separation comes from the dark canvas, thin outlines, and the blue accent alone. The developer documentation (docs.asleep.ai, a ReadMe-hosted surface) is the deliberate counterpoint: it flips to light mode with a slightly different accent blue #3a61f2, softer 6–8px rounded controls, muted slate navigation (#444e57), and an informational tint blue #118cfd. Two surfaces, one company — the marketing site is the confident dark pitch; the docs are the calm, legible workbench.

Key Characteristics:

• Near-black #121212 marketing canvas with pure-white (#ffffff) text — a dark, laboratory-at-night atmosphere
• A single electric blue (#2a75fc) reserved for the primary CTA — the system's only "action" color
• Sharp 0px corners on buttons and cards — no pills, no rounding on the marketing surface
• Shadowless marketing chrome — separation via dark canvas, outlines, and color, never elevation
• Pretendard Variable everywhere; weight 600 headlines at 52px, weight 400 body at 14px / 20px line-height
• Light-mode docs surface (ReadMe) with its own accent blue #3a61f2, muted slate nav #444e57, info tint #118cfd, and 6–8px rounding
• Near-black heading (#222222) and dark-grey body (#333333) on light sections; pure #000000 for maximum-contrast docs controls

2. Color Palette & Roles

Primary & Accents

• Asleep Blue (#2a75fc): Primary brand color and CTA background. The saturated electric blue on the "API 도입 문의하기" button — the marketing system's single "action" color.
• Docs Accent Blue (#3a61f2): The accent blue of the ReadMe-hosted docs surface — links, active states, and interactive highlights inside docs.asleep.ai. A close but distinct sibling of the marketing blue.
• Info Blue (#118cfd): Informational highlight/tint blue used in the docs (callout borders, tinted note backgrounds at low alpha).

Dark Canvas & Text

• Ink Black Canvas (#121212): The near-black background of the marketing hero and dark sections.
• Pure White (#ffffff): Text and outlines on the dark canvas, and the background of the light docs surface.
• Heading Grey (#222222): Near-black heading color on light sections — warm, not pure black.
• Body Grey (#333333): Default body/paragraph text color (document default, 14px).
• Pure Black (#000000): Maximum-contrast text for docs controls (search field, high-emphasis labels).

Docs Neutrals

• Muted Slate (#444e57): Docs sidebar navigation text and secondary/muted labels — the quiet neutral of the documentation surface.

3. Typography Rules

Font Family

• Sans (universal): Pretendard Variable (with sans-serif fallback) — used for every headline, nav item, button label, and paragraph across both the marketing site and the docs. There is no separate display face.

Hierarchy

Principles

• One typeface, size-driven hierarchy: Pretendard Variable carries everything. Contrast comes from size (52 → 40 → 18 → 14) and from the dark/light surface split, not from mixing fonts.
• Restrained weight: Headlines top out at weight 600 — confident but never heavy. There is no 700/800 display weight anywhere on the marketing surface.
• Hangul-first body sizing: Body sits at 14px with a 20px line-height — generous for dense hangul legibility while keeping information-rich API content compact.
• Docs nudge to 450: The documentation sidebar uses an intermediate weight (450) — a subtle legibility bump for long navigation lists, distinct from the marketing 400.

4. Component Stylings

Buttons

Primary CTA

• Background: #2a75fc
• Text: #ffffff
• Radius: 0px
• Padding: 8px 12px
• Font: 16px / 400 / Pretendard Variable
• Height: 38px
• Use: Marketing primary action ("API 도입 문의하기") — sharp-edged electric-blue CTA

Outlined (Secondary)

• Text: #ffffff
• Border: 1px solid #ffffff
• Radius: 0px
• Padding: 8px 12px
• Font: 16px / 400 / Pretendard Variable
• Height: 45px
• Use: Secondary action ("API Docs ↗") outlined on the dark hero

Inputs

Docs Search

• Background: #ffffff
• Text: #000000
• Radius: 6px
• Font: 13px / 400 / Pretendard Variable
• Use: Documentation search field (⌘K) on the light docs surface

Cards & Containers

Feature Card (Marketing)

• Background: #121212
• Text: #ffffff
• Radius: 0px
• Use: Product/feature entry card on the dark canvas (Dashboard, Asleep Docs, Sleep Report Design Guide) — sharp corners, shadowless

Docs Callout

• Background: #ffffff
• Border: 1px solid #118cfd
• Radius: 6px
• Use: Documentation info callout / content card with a blue accent edge

Badges

Info Tint

• Background: rgba(17,140,253,0.1)
• Text: #118cfd
• Radius: 6px
• Font: 13px / 500 / Pretendard Variable
• Use: Docs informational tint pill / note highlight

Tabs

Top Nav

• Text (inactive): #ffffff
• Text (active): #2a75fc
• Font: 18px / 400 / Pretendard Variable
• Height: 65px header
• Use: Top navigation on the dark #121212 header ("Products", "Research", "Company", "FAQ")

Navigation

• Marketing header: dark #121212, 65px tall, white 18px nav items, blue #2a75fc accent on the CTA
• Docs sidebar: light surface, muted slate #444e57 rows at 14px / weight 450, 8px radius, active row tinted rgba(255,255,255,0.1)

---

Verified: 2026-07-02 (omd:add-reference CREATE — Tier 1 live inspect, 2 surfaces) Tier 1 sources: https://www.asleep.ai/ | https://docs.asleep.ai/docs/brand-guideline Tier 2 sources: getdesign.md/asleep — 0 DESIGN.md files (not listed); styles.refero.design/?q=asleep — no Asleep match (only sleep-adjacent brands: Eight Sleep, Sandland Sleep) Conflicts unresolved: none

5. Layout Principles

Spacing System

• Base grid: ~4px, with control padding landing at 8px vertical / 10–12px horizontal
• Scale: 4px, 8px, 10px, 12px, 20px, 32px, 48px, 64px
• Notable: buttons use a tight 8px 12px padding; nav items use 0 10px; feature-card headings use 0 20px

Grid & Container

• Dark full-width hero with a centered 52px Pretendard headline as the anchor
• Product/feature entries arranged as a row of large equal-height cards (~450px tall) on the dark canvas
• Sections alternate between the dark #121212 canvas and lighter content bands
• Docs surface uses a fixed left navigation sidebar + wide content column (classic ReadMe three-zone layout)

Whitespace Philosophy

• Dark breathing room: the marketing surface leans on generous negative space filled by the dark canvas, so the single blue CTA and white headline carry the eye.
• Flat segmentation: sections separate by surface tone and thin outlines, not by shadow or heavy borders.
• Docs density: the documentation flips the priority — dense, scannable navigation and compact rows for information-rich API reference.

Border Radius Scale

• None (0px): marketing buttons, feature cards — the sharp-cornered signature
• Small (6px): docs search field, docs callouts
• Medium (8px): docs sidebar navigation rows
• Large (20px): occasional rounded media/containers
• Full (9999px / 100%): circular icons and avatars

6. Depth & Elevation

Shadow Philosophy: Asleep's marketing surface is a near-shadowless system. Live inspection found box-shadow: none across the hero, nav, headings, and feature cards. Depth is communicated by the dark canvas, thin white outlines, and the single blue accent — never by drop shadows or floating card stacks. The only place elevation appears is the docs surface, where ReadMe's chrome adds a barely-there rgba(0,0,0,0.1) lift on interactive controls. This flat, sharp-cornered treatment reads as engineered and technical — appropriate for a company selling a precision measurement API.

7. Do's and Don'ts

Do

• Use the near-black #121212 canvas with white (#ffffff) text for hero and dark sections
• Reserve electric blue (#2a75fc) for the primary CTA — keep it the single "action" color on the marketing surface
• Use sharp 0px corners on marketing buttons and cards — the square edge is the signature
• Keep the marketing surface shadowless — separate with the dark canvas, outlines, and color
• Set every headline in Pretendard Variable at weight 600, sized 40–52px
• Use body text at 14px / weight 400 with a 20px line-height for dense hangul legibility
• On the docs surface, switch to the docs accent blue (#3a61f2), light mode, and 6–8px rounding
• Use muted slate (#444e57) for documentation navigation rows

Don't

• Use drop shadows for elevation on the marketing surface — it is a flat, shadowless system
• Round the marketing CTA or cards — corners stay at 0px, never pills
• Spread the electric blue (#2a75fc) across many elements — it dilutes the single-action signal
• Mix in a second saturated accent hue on the marketing site — blue is the only one
• Use a heavy display weight (700/800) — headlines top out at 600
• Use pure black (#000000) for marketing headings — reserve near-black #222222 / dark-grey #333333
• Carry the marketing dark canvas into the docs — documentation is deliberately light-mode

8. Responsive Behavior

Breakpoints

Touch Targets

• Primary CTA at 38px height, secondary outlined button at 45px — comfortably tappable
• Nav items sit within a tall 65px header for generous hit area
• Docs search and sidebar rows sized for pointer + touch on the documentation surface

Collapsing Strategy

• Hero: 52px Pretendard headline scales down on mobile, weight 600 maintained
• Feature card row: multi-column → stacked single column
• Dark/light sections maintain full-width treatment
• Docs: fixed sidebar collapses to a toggle menu on narrow viewports

Image Behavior

• Product/data visualizations sit on the dark canvas with no shadow at any size, consistent with the flat system
• Marketing cards keep sharp 0px corners across breakpoints

9. Agent Prompt Guide

Quick Color Reference

• Primary CTA: Asleep Blue (#2a75fc)
• Dark canvas: Ink Black (#121212)
• Text on dark: Pure White (#ffffff)
• Heading (light section): Heading Grey (#222222)
• Body text: Body Grey (#333333)
• Docs accent: Docs Accent Blue (#3a61f2)
• Docs info tint: Info Blue (#118cfd)
• Docs nav text: Muted Slate (#444e57)
• Max-contrast control text: Pure Black (#000000)

Example Component Prompts

• "Create a hero on a near-black #121212 canvas. Headline at 52px Pretendard Variable weight 600, line-height 1.31, white #ffffff. Two CTAs: a filled electric-blue button (#2a75fc background, white text, 0px radius, 8px 12px padding, 16px Pretendard) labelled 'API 도입 문의하기', and an outlined button (transparent, 1px solid #ffffff, white text, 0px radius) labelled 'API Docs ↗'. No shadow."
• "Design a feature card on the dark canvas: #121212 background, white #ffffff text, 0px radius, no shadow, ~450px tall, heading in Pretendard 600 with a small 'Dashboard ↗' link at the bottom."
• "Build a light-mode docs layout: white #ffffff surface, muted slate #444e57 sidebar rows at 14px weight 450 with 8px radius, docs accent blue #3a61f2 on links, and an info callout card with a 1px solid #118cfd border at 6px radius."
• "Create a top nav on a #121212 header, 65px tall: white 18px Pretendard nav items ('Products', 'Research', 'Company', 'FAQ'), electric-blue #2a75fc on the active/CTA item."

Iteration Guide

1. Pretendard Variable for everything; headlines weight 600 at 40–52px, body weight 400 at 14px
2. Electric blue (#2a75fc) is the single marketing action color — don't spread it
3. Marketing corners stay at 0px; docs controls use 6–8px
4. No shadows on the marketing surface — separate with the dark canvas and outlines
5. Text on dark is #ffffff; headings on light are #222222, body is #333333
6. Docs surface flips to light mode with accent #3a61f2, info tint #118cfd, slate nav #444e57
7. Keep the atmosphere quiet and technical — the data glows, the chrome recedes

---

10. Voice & Tone

Asleep's voice is calm, credible, and quietly ambitious — a research team that turned a lab breakthrough into an API and talks about it with evidence, not hype. The hero line "수면으로의 영역 확장, 어렵지 않습니다" ("Expanding into sleep is not difficult") sets the register: reassuring and enabling, framed around the partner's ease rather than Asleep's cleverness. Claims are backed with numbers ("세계에서 가장 정확한 수면 AI 모델", 2,201,145 training instances, 74 patent applications, 22 papers, KFDA Class-2 certification) rather than adjectives. The tone treats the reader — usually a developer or product team integrating sleep measurement — as a capable peer.

Voice samples (verbatim from live surfaces):

• "수면으로의 영역 확장, 어렵지 않습니다" — hero headline, homepage. (verified live 2026-07-02)
• "세계에서 가장 정확한 수면 AI 모델을 사용하여" — product section, homepage. (verified live 2026-07-02)
• "서비스에 Asleep 브랜드를 활용하는 방법" — brand guideline heading, docs.asleep.ai. (verified live 2026-07-02)

Forbidden register: fear-based health scare marketing, undefined medical jargon left unexplained, exclamation-heavy hype, and unquantified superlatives ("revolutionary", "magical") — accuracy claims must carry a number.

11. Brand Narrative

Asleep (에이슬립) was founded in 2020 as a spin-out of a KAIST research lab, led by CEO 이동헌 (Lee Dong-heon) — a KAIST AI graduate — with CTO 홍준기 (Hong Jun-ki) and a founding group of KAIST electrical-engineering researchers. The company describes itself as "잠이 부족한 세상을 기술로 혁신하고 있는 슬립테크 스타트업" (a sleep-tech startup innovating a sleep-deprived world through technology), and its founding conviction was blunt about the science: as the CEO put it, "호흡음이 실제로 가장 정확할 거라는 근거는 없었지만... 확신을 가지고 진행시켰습니다" ("there was no initial evidence that breathing sounds would be the most accurate signal — but we proceeded with conviction"). That bet — measuring sleep stages from breathing sound alone, contactless, with no wearable — became AsleepTrack, the API and SDK the company now licenses to partners.

The founding pain point was access: a proper polysomnography sleep study historically cost around a million won and required a clinic. The CEO frames the mission around removing that barrier — "누구나 필요하다면 비용걱정 없이 검사를 받았으면 합니다" ("anyone who needs it should be able to get tested without worrying about cost"). Asleep's belief statement makes the philosophy explicit: "잘 자는 세상은 잠 자체를 잘 아는 것에서부터 시작한다" ("a world that sleeps well begins with understanding sleep itself"). Rather than sell a consumer device, Asleep chose to be the measurement layer other products build on — smart home, health/fitness, wellness, and finance partners integrate the sleep model instead of building their own.

What Asleep refuses, visible in its design: the fear-driven, over-decorated aesthetic of much health marketing, and the intimidating chrome of clinical software. What it embraces: a dark, quiet, evidence-first surface where the data visualization is the hero and a single blue CTA points to the one next step; numbers instead of adjectives; and a documentation experience precise enough for a developer to integrate a medically-certified model in an afternoon. As the CTO frames the posture: "혁신을 주도하는 스타트업은 바람을 직접 일으킬 줄도 알아야 합니다" ("a startup that leads innovation has to know how to create the wind itself").

12. Principles

1. Evidence over adjectives. Asleep sells accuracy, so it shows accuracy. UI implication: pair every capability claim with the number behind it (accuracy, training instances, patents, certification) rather than superlatives.
2. The data is the hero; the chrome recedes. UI implication: keep the canvas dark and quiet so sleep visualizations glow; use one blue accent and no decorative color.
3. One action, one color. Electric blue (#2a75fc) means "do this next." UI implication: reserve the saturated blue for the single primary CTA so the next step is never ambiguous.
4. Engineered, not soft. A precision measurement API should look precise. UI implication: sharp 0px corners and a shadowless flat surface on the marketing site; save the softer rounding for the docs.
5. Be the layer, not the app. Asleep succeeds when partners integrate easily. UI implication: the developer documentation is a first-class design surface — legible, exact, and fast to navigate.
6. Access is the mission. Sleep measurement should not require a clinic. UI implication: copy and flows emphasize ease of adoption ("어렵지 않습니다") over technical gatekeeping.

13. Personas

Personas below are fictional archetypes informed by publicly observable Asleep customer segments (developers and product teams integrating sleep measurement, smart-home and wellness partners), not individual people.

정민석, 33, 서울. A mobile engineer at a smart-home company adding sleep tracking to a bedside device. Values that AsleepTrack is contactless and API-first, so he can ship a sleep feature without building an ML pipeline. Judges the product by how fast he can get a first measurement working from the docs.

Hannah Cho, 38, Seoul. A product manager at a wellness app evaluating sleep vendors. Cares about the KFDA Class-2 certification and the published accuracy numbers because her app makes health-adjacent claims. Trusts the evidence-first tone over competitors who lead with lifestyle imagery.

이서연, 29, 대전. A founder building a fitness-recovery product who needs sleep-stage data but has no hardware budget. Chose Asleep because measuring from breathing sound means her users need nothing but a phone by the bed. Reads the brand guideline to place the partnership logo correctly.

14. States

15. Motion & Easing

Durations:

Easings:

Motion rules: Motion is functional and restrained — consistent with the flat, evidence-first aesthetic. Sections and data cards fade in from slightly below at motion-standard / ease-enter; the primary blue CTA responds to press with a subtle opacity/scale shift. No bounce or spring — a precision measurement product signals steadiness, not playfulness. Under prefers-reduced-motion: reduce, all transitions collapse to instant and the product remains fully functional.