oh-my-design-cli 1.6.7 → 1.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -6
- package/data/reference-fingerprints.json +1318 -10
- package/package.json +1 -1
- package/web/references/11st/DESIGN.md +400 -0
- package/web/references/17live/DESIGN.md +43 -0
- package/web/references/29cm/DESIGN.md +41 -0
- package/web/references/91app/DESIGN.md +31 -0
- package/web/references/ably/DESIGN.md +54 -0
- package/web/references/airbnb/DESIGN.md +58 -0
- package/web/references/airtable/DESIGN.md +39 -0
- package/web/references/alipay/DESIGN.md +50 -0
- package/web/references/amazingtalker/DESIGN.md +434 -0
- package/web/references/appier/DESIGN.md +45 -0
- package/web/references/apple/DESIGN.md +47 -0
- package/web/references/baemin/DESIGN.md +142 -43
- package/web/references/banksalad/DESIGN.md +67 -0
- package/web/references/bilibili/DESIGN.md +45 -0
- package/web/references/bithumb/DESIGN.md +38 -0
- package/web/references/bmw/DESIGN.md +37 -0
- package/web/references/brandi/DESIGN.md +414 -0
- package/web/references/bunjang/DESIGN.md +47 -0
- package/web/references/cakeresume/DESIGN.md +29 -0
- package/web/references/cal/DESIGN.md +52 -0
- package/web/references/catchtable/DESIGN.md +79 -19
- package/web/references/cathay/DESIGN.md +432 -0
- package/web/references/channeltalk/DESIGN.md +48 -0
- package/web/references/class101/DESIGN.md +51 -0
- package/web/references/classting/DESIGN.md +41 -0
- package/web/references/classum/DESIGN.md +43 -0
- package/web/references/claude/DESIGN.md +157 -70
- package/web/references/clay/DESIGN.md +56 -0
- package/web/references/clickhouse/DESIGN.md +50 -0
- package/web/references/cloudflare/DESIGN.md +637 -0
- package/web/references/cohere/DESIGN.md +48 -0
- package/web/references/coinbase/DESIGN.md +139 -5
- package/web/references/coinone/DESIGN.md +39 -0
- package/web/references/composio/DESIGN.md +46 -0
- package/web/references/cookpad/DESIGN.md +37 -0
- package/web/references/coupang/DESIGN.md +57 -2
- package/web/references/cursor/DESIGN.md +44 -0
- package/web/references/dabang/DESIGN.md +57 -19
- package/web/references/dcard/DESIGN.md +57 -0
- package/web/references/dell/DESIGN.md +636 -0
- package/web/references/devsisters/DESIGN.md +29 -0
- package/web/references/discord/DESIGN.md +604 -0
- package/web/references/dji/DESIGN.md +39 -0
- package/web/references/drnow/DESIGN.md +52 -0
- package/web/references/duolingo/DESIGN.md +563 -0
- package/web/references/elevenlabs/DESIGN.md +39 -0
- package/web/references/expo/DESIGN.md +39 -0
- package/web/references/fastcampus/DESIGN.md +50 -0
- package/web/references/ferrari/DESIGN.md +47 -0
- package/web/references/figma/DESIGN.md +44 -0
- package/web/references/finda/DESIGN.md +413 -0
- package/web/references/flex/DESIGN.md +28 -0
- package/web/references/flo/DESIGN.md +43 -0
- package/web/references/framer/DESIGN.md +38 -0
- package/web/references/freee/DESIGN.md +48 -0
- package/web/references/fugle/DESIGN.md +41 -1
- package/web/references/gangnamunni/DESIGN.md +57 -1
- package/web/references/genie/DESIGN.md +415 -0
- package/web/references/github/DESIGN.md +727 -0
- package/web/references/gmarket/DESIGN.md +51 -0
- package/web/references/gogolook/DESIGN.md +25 -1
- package/web/references/gogoro/DESIGN.md +38 -0
- package/web/references/grip/DESIGN.md +39 -0
- package/web/references/hahow/DESIGN.md +26 -0
- package/web/references/hashicorp/DESIGN.md +42 -0
- package/web/references/hogangnono/DESIGN.md +41 -0
- package/web/references/hp/DESIGN.md +563 -0
- package/web/references/hyperconnect/DESIGN.md +393 -0
- package/web/references/hyundaicard/DESIGN.md +24 -0
- package/web/references/ibm/DESIGN.md +44 -0
- package/web/references/ichef/DESIGN.md +44 -0
- package/web/references/ikala/DESIGN.md +400 -0
- package/web/references/inflearn/DESIGN.md +38 -0
- package/web/references/intercom/DESIGN.md +38 -0
- package/web/references/jandi/DESIGN.md +382 -0
- package/web/references/jkopay/DESIGN.md +35 -1
- package/web/references/jobkorea/DESIGN.md +39 -0
- package/web/references/jumpit/DESIGN.md +37 -0
- package/web/references/kakao/DESIGN.md +64 -0
- package/web/references/kakaobank/DESIGN.md +55 -1
- package/web/references/kakaopay/DESIGN.md +59 -0
- package/web/references/kakaot/DESIGN.md +53 -0
- package/web/references/karrot/DESIGN.md +49 -0
- package/web/references/kbank/DESIGN.md +39 -0
- package/web/references/kdan/DESIGN.md +34 -1
- package/web/references/kintone/DESIGN.md +586 -0
- package/web/references/kkbox/DESIGN.md +22 -0
- package/web/references/kkday/DESIGN.md +47 -0
- package/web/references/kmong/DESIGN.md +427 -0
- package/web/references/krafton/DESIGN.md +37 -0
- package/web/references/kraken/DESIGN.md +44 -0
- package/web/references/krds/DESIGN.md +63 -0
- package/web/references/kream/DESIGN.md +32 -0
- package/web/references/kurly/DESIGN.md +38 -1
- package/web/references/laftel/DESIGN.md +40 -0
- package/web/references/lamborghini/DESIGN.md +54 -0
- package/web/references/layerx/DESIGN.md +615 -0
- package/web/references/lezhin/DESIGN.md +47 -0
- package/web/references/line/DESIGN.md +36 -0
- package/web/references/linear.app/DESIGN.md +182 -88
- package/web/references/loom/DESIGN.md +396 -0
- package/web/references/lovable/DESIGN.md +38 -0
- package/web/references/lunit/DESIGN.md +47 -19
- package/web/references/mastercard/DESIGN.md +587 -0
- package/web/references/meituan/DESIGN.md +42 -0
- package/web/references/melon/DESIGN.md +26 -0
- package/web/references/mercari/DESIGN.md +41 -0
- package/web/references/mercury/DESIGN.md +589 -0
- package/web/references/meta/DESIGN.md +615 -0
- package/web/references/millie/DESIGN.md +51 -0
- package/web/references/minimax/DESIGN.md +53 -0
- package/web/references/mintlify/DESIGN.md +45 -0
- package/web/references/miro/DESIGN.md +47 -0
- package/web/references/mistral.ai/DESIGN.md +37 -0
- package/web/references/momoshop/DESIGN.md +43 -0
- package/web/references/money-forward/DESIGN.md +42 -0
- package/web/references/mongodb/DESIGN.md +44 -0
- package/web/references/muji/DESIGN.md +605 -0
- package/web/references/musinsa/DESIGN.md +48 -0
- package/web/references/mustit/DESIGN.md +47 -1
- package/web/references/myrealtrip/DESIGN.md +49 -0
- package/web/references/naver/DESIGN.md +50 -1
- package/web/references/naverwebtoon/DESIGN.md +48 -0
- package/web/references/netflix/DESIGN.md +572 -0
- package/web/references/nexon/DESIGN.md +389 -0
- package/web/references/nhncloud/DESIGN.md +33 -0
- package/web/references/nike/DESIGN.md +588 -0
- package/web/references/note/DESIGN.md +28 -0
- package/web/references/notion/DESIGN.md +48 -0
- package/web/references/nvidia/DESIGN.md +50 -0
- package/web/references/ohouse/DESIGN.md +56 -0
- package/web/references/oliveyoung/DESIGN.md +47 -1
- package/web/references/ollama/DESIGN.md +40 -0
- package/web/references/openai/DESIGN.md +641 -0
- package/web/references/opencode.ai/DESIGN.md +37 -0
- package/web/references/payco/DESIGN.md +40 -0
- package/web/references/paypay/DESIGN.md +656 -0
- package/web/references/pchome/DESIGN.md +439 -0
- package/web/references/perplexity/DESIGN.md +546 -0
- package/web/references/piccollage/DESIGN.md +43 -0
- package/web/references/pinkoi/DESIGN.md +55 -0
- package/web/references/pinterest/DESIGN.md +44 -0
- package/web/references/pixiv/DESIGN.md +613 -0
- package/web/references/pixnet/DESIGN.md +430 -0
- package/web/references/posthog/DESIGN.md +50 -0
- package/web/references/publy/DESIGN.md +52 -0
- package/web/references/qanda/DESIGN.md +49 -1
- package/web/references/ragic/DESIGN.md +444 -0
- package/web/references/ramp/DESIGN.md +634 -0
- package/web/references/rayark/DESIGN.md +22 -0
- package/web/references/raycast/DESIGN.md +45 -0
- package/web/references/remember/DESIGN.md +44 -0
- package/web/references/renault/DESIGN.md +42 -0
- package/web/references/replicate/DESIGN.md +39 -0
- package/web/references/resend/DESIGN.md +44 -0
- package/web/references/retool/DESIGN.md +645 -0
- package/web/references/revolut/DESIGN.md +46 -0
- package/web/references/richart/DESIGN.md +465 -0
- package/web/references/ridi/DESIGN.md +47 -0
- package/web/references/riiid/DESIGN.md +32 -0
- package/web/references/robinhood/DESIGN.md +604 -0
- package/web/references/runwayml/DESIGN.md +45 -0
- package/web/references/sanity/DESIGN.md +50 -0
- package/web/references/sansan/DESIGN.md +631 -0
- package/web/references/sendbird/DESIGN.md +46 -0
- package/web/references/sentry/DESIGN.md +48 -0
- package/web/references/shinhancard/DESIGN.md +421 -0
- package/web/references/shopline/DESIGN.md +431 -0
- package/web/references/slack/DESIGN.md +635 -0
- package/web/references/smarthr/DESIGN.md +48 -0
- package/web/references/smartnews/DESIGN.md +29 -0
- package/web/references/socar/DESIGN.md +35 -0
- package/web/references/soomgo/DESIGN.md +326 -0
- package/web/references/spacex/DESIGN.md +27 -0
- package/web/references/spoon/DESIGN.md +46 -0
- package/web/references/spotify/DESIGN.md +49 -0
- package/web/references/starbucks/DESIGN.md +597 -0
- package/web/references/stripe/DESIGN.md +46 -0
- package/web/references/studio/DESIGN.md +602 -0
- package/web/references/supabase/DESIGN.md +41 -0
- package/web/references/superhuman/DESIGN.md +39 -0
- package/web/references/surveycake/DESIGN.md +442 -0
- package/web/references/tada/DESIGN.md +51 -0
- package/web/references/tesla/DESIGN.md +36 -0
- package/web/references/theverge/DESIGN.md +500 -0
- package/web/references/together.ai/DESIGN.md +33 -0
- package/web/references/toss/DESIGN.md +43 -0
- package/web/references/toss-securities/DESIGN.md +54 -19
- package/web/references/tossbank/DESIGN.md +57 -0
- package/web/references/trenbe/DESIGN.md +41 -0
- package/web/references/triple/DESIGN.md +47 -0
- package/web/references/tumblbug/DESIGN.md +48 -0
- package/web/references/tving/DESIGN.md +40 -0
- package/web/references/uber/DESIGN.md +36 -0
- package/web/references/ubie/DESIGN.md +615 -0
- package/web/references/uniqlo/DESIGN.md +575 -0
- package/web/references/upbit/DESIGN.md +42 -0
- package/web/references/upstage/DESIGN.md +38 -0
- package/web/references/velog/DESIGN.md +28 -0
- package/web/references/vercel/DESIGN.md +44 -0
- package/web/references/voicetube/DESIGN.md +39 -0
- package/web/references/voltagent/DESIGN.md +44 -0
- package/web/references/wadiz/DESIGN.md +71 -19
- package/web/references/wanted/DESIGN.md +46 -0
- package/web/references/warp/DESIGN.md +37 -0
- package/web/references/watcha/DESIGN.md +40 -0
- package/web/references/wavve/DESIGN.md +43 -1
- package/web/references/wconcept/DESIGN.md +45 -0
- package/web/references/webflow/DESIGN.md +49 -0
- package/web/references/wired/DESIGN.md +572 -0
- package/web/references/wise/DESIGN.md +41 -0
- package/web/references/x.ai/DESIGN.md +31 -0
- package/web/references/xiaohongshu/DESIGN.md +39 -0
- package/web/references/yanolja/DESIGN.md +45 -0
- package/web/references/yeogiotte/DESIGN.md +42 -1
- package/web/references/yogiyo/DESIGN.md +50 -0
- package/web/references/yourator/DESIGN.md +453 -0
- package/web/references/zapier/DESIGN.md +41 -0
- package/web/references/zigbang/DESIGN.md +33 -0
- package/web/references/zigzag/DESIGN.md +62 -0
- package/web/references/zozotown/DESIGN.md +578 -0
|
@@ -15,6 +15,47 @@ ds:
|
|
|
15
15
|
url: "https://wise.design"
|
|
16
16
|
type: system
|
|
17
17
|
description: Wise's design system covering foundations, components, patterns, and tone of voice.
|
|
18
|
+
tokens:
|
|
19
|
+
source: prose-derived
|
|
20
|
+
extracted: "2026-06-09"
|
|
21
|
+
colors:
|
|
22
|
+
ink: "#0e0f0c"
|
|
23
|
+
primary: "#9fe870"
|
|
24
|
+
dark-green: "#163300"
|
|
25
|
+
light-mint: "#e2f6d5"
|
|
26
|
+
pastel-green: "#cdffad"
|
|
27
|
+
positive: "#054d28"
|
|
28
|
+
danger: "#d03238"
|
|
29
|
+
warning: "#ffd11a"
|
|
30
|
+
bright-orange: "#ffc091"
|
|
31
|
+
warm-dark: "#454745"
|
|
32
|
+
gray: "#868685"
|
|
33
|
+
light-surface: "#e8ebe6"
|
|
34
|
+
canvas: "#ffffff"
|
|
35
|
+
typography:
|
|
36
|
+
family: { sans: "Inter", mono: "Inter" }
|
|
37
|
+
display-mega: { size: 126, weight: 900, lineHeight: 0.85, use: "Wise Sans, max display" }
|
|
38
|
+
display-hero: { size: 96, weight: 900, lineHeight: 0.85, use: "Wise Sans, hero" }
|
|
39
|
+
section: { size: 64, weight: 900, lineHeight: 0.85, use: "Wise Sans, section heading" }
|
|
40
|
+
subheading: { size: 40, weight: 900, lineHeight: 0.85, use: "Wise Sans, sub-heading" }
|
|
41
|
+
card-title: { size: 26, weight: 600, lineHeight: 1.23, tracking: -0.39, use: "Inter, card title" }
|
|
42
|
+
feature-title: { size: 22, weight: 600, lineHeight: 1.25, tracking: -0.4, use: "Inter, feature title" }
|
|
43
|
+
body: { size: 18, weight: 400, lineHeight: 1.44, tracking: 0.18, use: "Inter, body" }
|
|
44
|
+
body-semibold: { size: 18, weight: 600, lineHeight: 1.44, tracking: -0.11, use: "Inter, body default" }
|
|
45
|
+
button: { size: 18, weight: 600, lineHeight: 1.0, tracking: -0.11, use: "Inter, button" }
|
|
46
|
+
caption: { size: 14, weight: 400, lineHeight: 1.5, tracking: -0.08, use: "Inter, caption" }
|
|
47
|
+
small: { size: 12, weight: 400, lineHeight: 1.0, tracking: -0.08, use: "Inter, small" }
|
|
48
|
+
spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 20, xl: 24 }
|
|
49
|
+
rounded: { sm: 16, md: 30, lg: 40, full: 9999 }
|
|
50
|
+
shadow:
|
|
51
|
+
ring: "rgba(14,15,12,0.12) 0px 0px 0px 1px"
|
|
52
|
+
inset: "rgb(134,134,133) 0px 0px 0px 1px inset"
|
|
53
|
+
components:
|
|
54
|
+
button-primary: { type: button, bg: "#9fe870", fg: "#163300", radius: 9999, padding: "5px 16px", use: "Primary green pill, hover scale 1.05" }
|
|
55
|
+
button-secondary: { type: button, fg: "#0e0f0c", radius: 9999, padding: "8px 12px 8px 16px", use: "Subtle pill, dark green 8% bg" }
|
|
56
|
+
card: { type: card, radius: 30, use: "Card, 1px rgba(14,15,12,0.12) border, ring shadow" }
|
|
57
|
+
badge-mint: { type: badge, bg: "#e2f6d5", fg: "#163300", radius: 16, use: "Soft green badge surface" }
|
|
58
|
+
components_harvested: true
|
|
18
59
|
---
|
|
19
60
|
|
|
20
61
|
# Design System Inspiration of Wise
|
|
@@ -10,6 +10,37 @@ logo:
|
|
|
10
10
|
slug: x
|
|
11
11
|
verified: "2026-05-15"
|
|
12
12
|
omd: "0.1"
|
|
13
|
+
tokens:
|
|
14
|
+
source: prose-derived
|
|
15
|
+
extracted: "2026-06-09"
|
|
16
|
+
colors:
|
|
17
|
+
text-primary: "#ffffff"
|
|
18
|
+
canvas: "#1f2228"
|
|
19
|
+
ring-blue: "#3b82f6"
|
|
20
|
+
surface-elevated: "#26292f"
|
|
21
|
+
surface-hover: "#2a2d33"
|
|
22
|
+
border-default: "#2c2f35"
|
|
23
|
+
border-strong: "#3a3d42"
|
|
24
|
+
inverse-near-black: "#0a0a0a"
|
|
25
|
+
typography:
|
|
26
|
+
family: { sans: "universalSans", mono: "GeistMono" }
|
|
27
|
+
display-hero: { size: 320, weight: 300, lineHeight: 1.50, use: "GeistMono, extreme display" }
|
|
28
|
+
section: { size: 30, weight: 400, lineHeight: 1.20, use: "universalSans, section heading" }
|
|
29
|
+
body: { size: 16, weight: 400, lineHeight: 1.50, use: "universalSans, body" }
|
|
30
|
+
button: { size: 14, weight: 400, lineHeight: 1.43, tracking: 1.4, use: "GeistMono, uppercase button" }
|
|
31
|
+
caption: { size: 14, weight: 400, lineHeight: 1.50, use: "universalSans, label/caption" }
|
|
32
|
+
small: { size: 12, weight: 400, lineHeight: 1.50, use: "universalSans, meta" }
|
|
33
|
+
spacing: { xs: 4, sm: 8, base: 24, lg: 48 }
|
|
34
|
+
rounded: { sm: 0, md: 0, lg: 4, full: 9999 }
|
|
35
|
+
shadow:
|
|
36
|
+
none: "none"
|
|
37
|
+
components:
|
|
38
|
+
button-primary: { type: button, bg: "#ffffff", fg: "#1f2228", radius: 0, padding: "12px 24px", font: "14px/400 GeistMono", use: "Primary CTA, uppercase 1.4px tracking, hover 0.9 white" }
|
|
39
|
+
button-ghost: { type: button, fg: "#ffffff", radius: 0, padding: "12px 24px", font: "14px/400 GeistMono", use: "Secondary, 1px rgba(255,255,255,0.2) border" }
|
|
40
|
+
card: { type: card, radius: 0, padding: "24px", use: "Container, 1px rgba(255,255,255,0.1) border, no shadow, hover border 0.2" }
|
|
41
|
+
badge-mono: { type: badge, fg: "#ffffff", radius: 0, padding: "4px 8px", font: "12px GeistMono", use: "Monospace tag, 1px rgba(255,255,255,0.2) border" }
|
|
42
|
+
input-default: { type: input, fg: "#ffffff", radius: 0, padding: "8px 12px", font: "16px universalSans", use: "Form input, 1px rgba(255,255,255,0.2), focus blue ring, placeholder 0.3" }
|
|
43
|
+
components_harvested: true
|
|
13
44
|
---
|
|
14
45
|
|
|
15
46
|
# Design System Inspiration of xAI
|
|
@@ -10,6 +10,45 @@ logo:
|
|
|
10
10
|
slug: xiaohongshu
|
|
11
11
|
verified: "2026-05-19"
|
|
12
12
|
omd: "0.1"
|
|
13
|
+
tokens:
|
|
14
|
+
source: prose-derived
|
|
15
|
+
extracted: "2026-06-09"
|
|
16
|
+
colors:
|
|
17
|
+
primary: "#ff2442"
|
|
18
|
+
red-pressed: "#e01f3d"
|
|
19
|
+
red-tint: "#ffecef"
|
|
20
|
+
canvas: "#ffffff"
|
|
21
|
+
surface: "#f5f5f5"
|
|
22
|
+
text-primary: "#333333"
|
|
23
|
+
text-secondary: "#999999"
|
|
24
|
+
text-tertiary: "#cccccc"
|
|
25
|
+
border: "#eeeeee"
|
|
26
|
+
divider: "#f0f0f0"
|
|
27
|
+
error: "#ff4d4f"
|
|
28
|
+
success: "#52c41a"
|
|
29
|
+
typography:
|
|
30
|
+
family: { sans: "PingFang SC", mono: "PingFang SC" }
|
|
31
|
+
header: { size: 18, weight: 600, use: "Profile names, section titles" }
|
|
32
|
+
note-title: { size: 14, weight: 500, use: "Note title, two-line clamp" }
|
|
33
|
+
body: { size: 15, weight: 400, use: "Note detail reading view" }
|
|
34
|
+
meta: { size: 12, weight: 400, use: "Username, likes, timestamp" }
|
|
35
|
+
caption: { size: 11, weight: 400, use: "Hashtags, fine labels" }
|
|
36
|
+
spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24 }
|
|
37
|
+
rounded: { sm: 8, md: 16, lg: 20, full: 9999 }
|
|
38
|
+
shadow:
|
|
39
|
+
hover: "0 2px 12px rgba(0,0,0,0.06)"
|
|
40
|
+
floating: "0 -2px 16px rgba(0,0,0,0.1)"
|
|
41
|
+
modal: "0 4px 24px rgba(0,0,0,0.12)"
|
|
42
|
+
components:
|
|
43
|
+
button-primary: { type: button, bg: "#ff2442", fg: "#ffffff", radius: 20, padding: "6px 16px", font: "14px/500 PingFang SC", use: "Follow / buy CTA, press #e01f3d" }
|
|
44
|
+
button-secondary: { type: button, bg: "#ffffff", fg: "#333333", radius: 20, padding: "6px 16px", font: "14px/500 PingFang SC", use: "Following state, 1px #eeeeee border" }
|
|
45
|
+
input-search: { type: input, bg: "#f5f5f5", fg: "#333333", radius: 20, padding: "8px 16px", font: "14px/400 PingFang SC", use: "Pill search, red caret" }
|
|
46
|
+
note-card: { type: card, bg: "#ffffff", radius: 8, padding: "8px 10px", use: "Waterfall note card, variable height, no border" }
|
|
47
|
+
chip: { type: badge, bg: "#f5f5f5", fg: "#333333", radius: 16, padding: "4px 12px", font: "12px/400 PingFang SC", use: "Hashtag chip, branded uses #ffecef bg #ff2442 text" }
|
|
48
|
+
like-heart: { type: toggle, fg: "#999999", use: "Outline heart, active fill #ff2442 with scale-pop" }
|
|
49
|
+
action-sheet: { type: dialog, bg: "#ffffff", radius: 16, use: "Bottom sheet, 40% black backdrop" }
|
|
50
|
+
nav-tab: { type: tab, fg: "#999999", use: "Top/category tab", active: "#ff2442 text + red underline" }
|
|
51
|
+
components_harvested: true
|
|
13
52
|
---
|
|
14
53
|
|
|
15
54
|
# Design System Inspiration of Xiaohongshu
|
|
@@ -16,6 +16,51 @@ ds:
|
|
|
16
16
|
type: brand
|
|
17
17
|
description: Yanolja's official brand center — visual identity inspired by the Multiverse of Dreams.
|
|
18
18
|
og_image: "https://www.yanoljagroup.com/common/assets/yanolja_colored_og_image.jpg"
|
|
19
|
+
tokens:
|
|
20
|
+
source: prose-derived
|
|
21
|
+
extracted: "2026-06-09"
|
|
22
|
+
colors:
|
|
23
|
+
primary: "#f54b1e"
|
|
24
|
+
primary-pressed: "#d63e14"
|
|
25
|
+
coral-tint: "#feeae2"
|
|
26
|
+
canvas: "#ffffff"
|
|
27
|
+
heading: "#1e1928"
|
|
28
|
+
body: "#555055"
|
|
29
|
+
caption: "#8c8282"
|
|
30
|
+
light-sand: "#f5ebe1"
|
|
31
|
+
critical: "#e5342b"
|
|
32
|
+
info: "#2d8cff"
|
|
33
|
+
success: "#1fa873"
|
|
34
|
+
warning: "#f2a600"
|
|
35
|
+
typography:
|
|
36
|
+
family: { sans: "Pretendard", mono: "Pretendard" }
|
|
37
|
+
display: { size: 28, weight: 700, lineHeight: 1.29, use: "Hero promo headlines" }
|
|
38
|
+
heading-lg: { size: 22, weight: 700, lineHeight: 1.36, use: "Section headers" }
|
|
39
|
+
heading: { size: 18, weight: 700, lineHeight: 1.44, use: "Card titles, list headers" }
|
|
40
|
+
title: { size: 16, weight: 600, lineHeight: 1.38, use: "Lodging name, list item" }
|
|
41
|
+
body: { size: 14, weight: 400, lineHeight: 1.43, use: "Standard body" }
|
|
42
|
+
body-bold: { size: 14, weight: 700, lineHeight: 1.43, use: "Price, discount label" }
|
|
43
|
+
caption: { size: 12, weight: 400, lineHeight: 1.33, use: "Metadata, neighborhood" }
|
|
44
|
+
caption-bold: { size: 12, weight: 700, lineHeight: 1.33, use: "Discount % badge, status tag" }
|
|
45
|
+
micro: { size: 11, weight: 500, lineHeight: 1.27, use: "Legal, fine print" }
|
|
46
|
+
spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
|
|
47
|
+
rounded: { sm: 4, md: 8, lg: 12, sheet: 16, full: 9999 }
|
|
48
|
+
shadow:
|
|
49
|
+
soft: "0 2px 8px rgba(30,25,40,0.08)"
|
|
50
|
+
standard: "0 4px 16px rgba(30,25,40,0.12)"
|
|
51
|
+
prominent: "0 8px 24px rgba(30,25,40,0.16)"
|
|
52
|
+
components:
|
|
53
|
+
button-primary: { type: button, bg: "#f54b1e", fg: "#ffffff", radius: 8, padding: "16px 24px", font: "16px/700 Pretendard", use: "예약/결제 CTA, pressed #d63e14, disabled #f5ebe1 bg #8c8282 text" }
|
|
54
|
+
button-outline: { type: button, fg: "#1e1928", radius: 8, use: "Secondary, 1px rgba(30,25,40,0.16) border, pressed #f5ebe1" }
|
|
55
|
+
button-weak: { type: button, bg: "#f5ebe1", fg: "#1e1928", radius: 8, use: "Tertiary, 더 보기 / filter" }
|
|
56
|
+
button-critical: { type: button, bg: "#e5342b", fg: "#ffffff", use: "Destructive, 예약 취소" }
|
|
57
|
+
input-default: { type: input, bg: "#ffffff", fg: "#1e1928", radius: 8, use: "Form input, 1px rgba(30,25,40,0.16), focus 2px #f54b1e, placeholder #8c8282" }
|
|
58
|
+
lodging-card: { type: card, bg: "#ffffff", radius: 8, padding: "12px 16px", use: "Image-led card, hover soft shadow" }
|
|
59
|
+
discount-badge: { type: badge, bg: "#f54b1e", fg: "#ffffff", radius: 4, padding: "2px 6px", font: "12px/700 Pretendard", use: "Top-left of image discount %" }
|
|
60
|
+
category-chip: { type: badge, bg: "#f5ebe1", fg: "#1e1928", radius: 9999, font: "12px/500 Pretendard", use: "Category chip, selected #f54b1e bg white text" }
|
|
61
|
+
toast: { type: toast, bg: "#1e1928", fg: "#ffffff", font: "14px/400 Pretendard", use: "Error/success toast, 3s" }
|
|
62
|
+
nav-tab: { type: tab, fg: "#8c8282", use: "Bottom tab bar", active: "#f54b1e icon + label" }
|
|
63
|
+
components_harvested: true
|
|
19
64
|
---
|
|
20
65
|
|
|
21
66
|
# Design System Inspiration of Yanolja (야놀자)
|
|
@@ -8,7 +8,7 @@ homepage: "https://www.yeogi.com"
|
|
|
8
8
|
primary_color: "#000000"
|
|
9
9
|
logo:
|
|
10
10
|
type: favicon
|
|
11
|
-
slug: "https://www.
|
|
11
|
+
slug: "https://www.google.com/s2/favicons?domain=yeogi.com&sz=128"
|
|
12
12
|
verified: "2026-05-15"
|
|
13
13
|
omd: "0.1"
|
|
14
14
|
ds:
|
|
@@ -17,6 +17,47 @@ ds:
|
|
|
17
17
|
type: system
|
|
18
18
|
description: 여기어때 디자인 라이브러리 — A Visual Language for Travel. Foundations, components, and tokens.
|
|
19
19
|
og_image: "https://framerusercontent.com/assets/kA6JROOLbG0jX7SQZl1tLZzahM.jpg"
|
|
20
|
+
tokens:
|
|
21
|
+
source: prose-derived
|
|
22
|
+
extracted: "2026-06-09"
|
|
23
|
+
colors:
|
|
24
|
+
primary: "#1d8bff"
|
|
25
|
+
canvas: "#ffffff"
|
|
26
|
+
heading: "#222222"
|
|
27
|
+
body: "#222222"
|
|
28
|
+
on-primary: "#ffffff"
|
|
29
|
+
tint-blue: "#e3f0ff"
|
|
30
|
+
coupon-red: "#f94239"
|
|
31
|
+
coupon-red-tint: "#ffedea"
|
|
32
|
+
rating-yellow: "#ffc83b"
|
|
33
|
+
member-slate: "#49627a"
|
|
34
|
+
border: "#e6e6e6"
|
|
35
|
+
typography:
|
|
36
|
+
family: { sans: "Pretendard", mono: "Pretendard" }
|
|
37
|
+
hero: { size: 32, weight: 700, lineHeight: 1.2, use: "Home hero H1 over image" }
|
|
38
|
+
page-title: { size: 24, weight: 700, use: "Search-result count headline" }
|
|
39
|
+
section: { size: 18, weight: 700, use: "Section H2 / listing card name" }
|
|
40
|
+
chip: { size: 13, weight: 600, use: "Filter chips, price-range pills" }
|
|
41
|
+
tile: { size: 14, weight: 500, use: "Destination tile caption" }
|
|
42
|
+
body: { size: 16, weight: 400, use: "Card meta, search input, descriptions" }
|
|
43
|
+
button: { size: 14, weight: 600, use: "Utility CTA label" }
|
|
44
|
+
badge: { size: 12, weight: 700, use: "Promo / coupon / member / rating" }
|
|
45
|
+
spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
|
|
46
|
+
rounded: { sm: 3, md: 8, lg: 12, full: 9999 }
|
|
47
|
+
shadow:
|
|
48
|
+
card: "minimal — cards rely on whitespace and photo for separation"
|
|
49
|
+
components_harvested: true
|
|
50
|
+
components:
|
|
51
|
+
button-primary: { type: button, bg: "#1d8bff", fg: "#ffffff", radius: 8, padding: "9px 14px", font: "14/600", use: "Login/회원가입 solid, 지도 보기, hero 검색" }
|
|
52
|
+
button-brand-outline: { type: button, bg: "#ffffff", fg: "#1d8bff", radius: 8, padding: "9px 14px", font: "14/600", use: "Top-right login/회원가입 entry" }
|
|
53
|
+
button-neutral-outline: { type: button, bg: "#ffffff", fg: "#222222", radius: 8, padding: "9px 14px", font: "14/600", use: "Guest reservation lookup, low-emphasis utility" }
|
|
54
|
+
filter-chip: { type: badge, bg: "#ffffff", fg: "#222222", radius: 9999, padding: "0px 16px", font: "13/600", use: "Price range, hashtag/star/amenity filters" }
|
|
55
|
+
search-input: { type: input, bg: "#ffffff", fg: "#222222", radius: 12, font: "16/400", use: "Home search box" }
|
|
56
|
+
listing-card: { type: card, bg: "#ffffff", radius: 12, padding: "0 0 24px", use: "Photo-led search-result / recommendation card" }
|
|
57
|
+
badge-rating: { type: badge, bg: "#ffc83b", radius: 6, padding: "4px 5px 3px 3px", font: "16/400", use: "Review score chip on every listing card" }
|
|
58
|
+
badge-promo: { type: badge, bg: "#e3f0ff", fg: "#1d8bff", radius: 3, padding: "0px 4px", font: "12/700", use: "반짝특가 flash-deal emphasis" }
|
|
59
|
+
badge-member: { type: badge, bg: "#49627a", fg: "#ffffff", radius: 3, padding: "3px 4px", font: "12/700", use: "회원가 member-rate flag" }
|
|
60
|
+
badge-coupon: { type: badge, bg: "#ffedea", fg: "#f94239", radius: 3, padding: "0px 4px", font: "12/700", use: "쿠폰 적용가 discount callout" }
|
|
20
61
|
---
|
|
21
62
|
|
|
22
63
|
# Design System Inspiration of 여기어때 (GoodChoice / Yeogiotte)
|
|
@@ -10,6 +10,56 @@ logo:
|
|
|
10
10
|
slug: "https://www.google.com/s2/favicons?domain=yogiyo.co.kr&sz=128"
|
|
11
11
|
verified: "2026-05-27"
|
|
12
12
|
omd: "0.1"
|
|
13
|
+
tokens:
|
|
14
|
+
source: prose-derived
|
|
15
|
+
extracted: "2026-06-09"
|
|
16
|
+
colors:
|
|
17
|
+
primary: "#fa0050"
|
|
18
|
+
primary-deep: "#e00048"
|
|
19
|
+
canvas: "#ffffff"
|
|
20
|
+
surface: "#f5f5f7"
|
|
21
|
+
surface-strong: "#ececef"
|
|
22
|
+
heading: "#1a1a1a"
|
|
23
|
+
text-strong: "#333333"
|
|
24
|
+
body: "#666666"
|
|
25
|
+
text-secondary: "#999999"
|
|
26
|
+
text-tertiary: "#bbbbbb"
|
|
27
|
+
border: "#dddddd"
|
|
28
|
+
divider: "#ececef"
|
|
29
|
+
rating: "#ffb300"
|
|
30
|
+
success: "#21c17a"
|
|
31
|
+
warning: "#ff8a00"
|
|
32
|
+
error: "#f5444c"
|
|
33
|
+
on-primary: "#ffffff"
|
|
34
|
+
typography:
|
|
35
|
+
family: { sans: "Pretendard", mono: "Pretendard" }
|
|
36
|
+
hero: { size: 28, weight: 700, lineHeight: 1.3, use: "Event/promo banners, onboarding" }
|
|
37
|
+
section: { size: 20, weight: 700, lineHeight: 1.35, use: "Row headers" }
|
|
38
|
+
restaurant: { size: 16, weight: 600, lineHeight: 1.4, use: "Restaurant card title" }
|
|
39
|
+
menu: { size: 15, weight: 500, lineHeight: 1.4, use: "Menu item title" }
|
|
40
|
+
body: { size: 14, weight: 400, lineHeight: 1.5, use: "Descriptions, address" }
|
|
41
|
+
label: { size: 16, weight: 600, lineHeight: 1.4, use: "Button labels (주문하기)" }
|
|
42
|
+
caption: { size: 12, weight: 400, lineHeight: 1.4, use: "Delivery time, review count, fine print" }
|
|
43
|
+
price: { size: 19, weight: 700, lineHeight: 1.2, use: "Item/cart total — tabular numerals" }
|
|
44
|
+
spacing: { xs: 4, sm: 8, md: 12, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
|
|
45
|
+
rounded: { sm: 6, md: 12, lg: 16, full: 999 }
|
|
46
|
+
shadow:
|
|
47
|
+
card: "0px 2px 8px rgba(0,0,0,0.06)"
|
|
48
|
+
elevated: "0px 2px 12px rgba(0,0,0,0.08)"
|
|
49
|
+
toast: "0px 4px 12px rgba(0,0,0,0.16)"
|
|
50
|
+
components_harvested: true
|
|
51
|
+
components:
|
|
52
|
+
button-primary: { type: button, bg: "#fa0050", fg: "#ffffff", radius: 12, padding: "14px 20px", font: "16/600", use: "주문하기, 결제하기 — full-width sticky CTA" }
|
|
53
|
+
button-outline: { type: button, bg: "#ffffff", fg: "#fa0050", radius: 12, padding: "14px 20px", font: "16/600", use: "쿠폰 받기, 메뉴 더보기" }
|
|
54
|
+
button-neutral: { type: button, bg: "#f5f5f7", fg: "#333333", radius: 12, padding: "14px 20px", font: "16/600", use: "취소, 닫기" }
|
|
55
|
+
search-field: { type: input, bg: "#f5f5f7", fg: "#333333", radius: 12, padding: "14px 16px", font: "16/400", use: "음식, 가게 검색" }
|
|
56
|
+
restaurant-card: { type: card, bg: "#ffffff", radius: 16, padding: "16px", use: "Browse workhorse — photo, name, rating, ETA" }
|
|
57
|
+
category-tile: { type: card, bg: "#f5f5f7", radius: 12, padding: "12px", use: "치킨/피자/한식 grid tiles" }
|
|
58
|
+
discount-badge: { type: badge, bg: "#fa0050", fg: "#ffffff", radius: 6, padding: "2px 6px", font: "11/700", use: "할인/쿠폰 promotion flag" }
|
|
59
|
+
filter-chip: { type: badge, bg: "#f5f5f7", fg: "#666666", radius: 999, padding: "6px 14px", font: "13/500", use: "빠른배달/무료배달/별점순 filters" }
|
|
60
|
+
top-tab: { type: tab, fg: "#999999", font: "15/600", active: "#fa0050 text + 2px bottom underline #fa0050", use: "배달/포장/요편의점 switcher" }
|
|
61
|
+
bottom-tab: { type: tab, fg: "#bbbbbb", font: "11/500", active: "#fa0050 icon + label", use: "홈/검색/찜/주문내역/MY" }
|
|
62
|
+
snackbar: { type: toast, bg: "#1a1a1a", fg: "#ffffff", radius: 12, padding: "12px 16px", font: "14/500", use: "Transient feedback, 3s auto-dismiss" }
|
|
13
63
|
---
|
|
14
64
|
|
|
15
65
|
# Design System Inspiration of Yogiyo (요기요)
|