Component preview

SeoulHabit — Phase 1 Component Preview (390px)
Phase 1 · Checkpoint 2 review

Component library — 9 snippets

Every block is rendered only from design tokens (sh-tokens.css) + sh-components.css — nothing is hard-coded. Shown in a 390px phone frame, since primary traffic is TikTok on phones. Current Fraunces/Inter fonts (the Newsreader/Hanken swap is a separate gate).

390 px · mobile-first

1 · Button

ds-button.liquid

2 · Input

ds-input.liquid

3 · Badge

ds-badge.liquid

✓ Gentle / sensitive-safe Bestseller New Save 15%

4 · Rating

ds-rating.liquid

4.9 · 312 reviews

Sample data — snippet renders only with real verified reviews (FTC).

5 · Tag / filter chip

ds-tag.liquid

6 · Product card

ds-product-card.liquid

7 · Habit card (internal id: set-card)

ds-set-card.liquid

8 · Habit sequence (internal id: step-marker)

ds-step-marker.liquid

1

Cleanse

Gentle gel, lukewarm water.

2

Brighten

A few drops of glow serum.

3

Protect

SPF, every morning.

9 · Quiz option

ds-quiz-option.liquid