Design System Inspiration of Ably (에이블리)

1. Visual Theme & Atmosphere

ABLY is a Korean style-commerce platform organized around personal taste, discovery, and the connection between consumers and sellers. Its official product story describes an AI-personalized commerce experience that expanded beyond fashion into beauty, home, stationery, food, and community/content. The current company mission frames this more broadly as expanding style commerce and a chain platform globally: people should be able to discover, buy, make, and sell styles with lower friction. Personalization and an accessible seller ecosystem are presented as two connected sides of that next-commerce direction.

The current public ecosystem has three visibly different surfaces. The consumer mobile web is narrow and app-directed, using a Next.js-loaded Pretendard alias, dense 11–16px type, white, #1f1f1f, and a compact 28px app-entry action. ABLY Team is a large editorial brand and recruiting surface with Pretendard, 40–48px headings, wide story cards, pale peach accent panels, and #ff5160 actions. Seller Square uses Noto Sans Korean and its own information architecture for onboarding, market operations, advertising, guides, and global expansion.

The stable cross-surface signal is the current coral-pink #ff5160, not the older #fa2e5f snapshot. Even this shared color does not make the component systems interchangeable. A Seller Square pill, an ABLY Team recruiting CTA, and a native consumer purchase button are three different claims. The current public capture verifies the first two and only a compact app-entry action on mobile web; native shopping cards, price stacks, checkout actions, bottom navigation, badges, and sheets remain absent.

Key Characteristics:

• Current coral-pink #ff5160 across consumer/corporate/seller identity moments
• Consumer mobile web: dense Pretendard, 11–16px type, app-directed entry
• ABLY Team: editorial Pretendard, 40–48px headings, story cards, 12–24px control geometry
• Seller Square: Noto Sans Korean and full-pill onboarding actions
• Personal taste and recommendation as the consumer narrative
• Seller/user ecosystem and global chain-platform expansion as the company narrative
• Strict separation of consumer web, native app, corporate, and seller evidence

2. Color Palette & Roles

• Current ABLY coral (#ff5160): live identity/action color across current official surfaces.
• Canvas (#ffffff) and foreground (#1f1f1f): current consumer and corporate base.
• Consumer secondary (#777777): current mobile-web supporting text.
• Team secondary (#757575): current company/editorial supporting copy.
• Seller body (#5b5b5b): current Seller Square explanatory text.
• Consumer border (#dddddd): compact mobile-web action outline.
• Platform border (#e5e7eb): repeated Team and Seller Square boundary.
• Team accent surface (#fff2ea): current pale peach corporate action surface.

Older hot-deal pink, discount red, shipping mint, success, error, link, tab, and native surface colors are omitted. A yellow Seller Square campaign action was captured as a local promotion, not a canonical ABLY semantic color.

3. Typography Rules

Font evidence boundary

Do not render Noto Sans Korean as the consumer app font or Pretendard as Seller Square truth. Surface ownership matters more than visual similarity.

4. Component Stylings

Consumer mobile web

Compact app-entry action

• White / #1f1f1f, 1px #dddddd, 20px radius
• 62×28px, 0 8px, Pretendard 12px/600
• Only the default baseline was captured; no native purchase meaning is attached

ABLY Team

Primary action

• #ff5160 / white, 12px radius, 160×56px, Pretendard 18px/600

Soft action

• #fff2ea / #ff5160, 12px radius, 312×48px, 16px/600

Editorial pill

• White / #4e4e4e, 24px radius, 105×48px, 14px 16px, 16px/400

Story card

• White / near-black, 12px radius
• 0 4px 48px rgba(0,0,0,.08) shadow; used for mission/story compositions

Seller Square

Primary entry action

• #ff5160 / white, full-pill, 114×49px, 13px 30px
• Noto Sans Korean 14px/400

Native consumer product cards, price stacks, shipping/deal badges, filters, checkout CTAs, bottom tabs, bottom sheets, dialogs, and transactional states are absent until an inspectable native surface verifies them.

5. Layout Principles

• Keep consumer mobile web compact and direct users toward the full app without pretending it is the app.
• Use large editorial sections and paired story cards on ABLY Team.
• Use Seller Square's own content density and onboarding hierarchy for seller tasks.
• Share #ff5160 as identity, not as proof of identical control geometry.
• Let product imagery and taste categories carry consumer variety; do not fabricate their layout from memory.

6. Depth & Elevation

Consumer mobile web and Seller Square promoted controls are flat. ABLY Team uses a specific large-card shadow (0 4px 48px rgba(0,0,0,.08)) on 12px story cards. That corporate editorial shadow is not a native commerce sheet token.

7. Do's and Don'ts

Do

• Use current #FF5160 and name the surface that gives a component its role.
• Keep consumer, corporate, and seller font evidence separate.
• Preserve ABLY's taste-discovery, personalization, and seller-ecosystem narrative.
• Omit native details until an inspectable native path exists.

Don't

• Do not restore the older #FA2E5F as current primary without new proof.
• Do not infer purchase buttons, deal badges, price typography, tabs, or sheets from commerce convention.
• Do not show Noto Sans Korean as the consumer product font.
• Do not turn ABLY Team recruiting cards into consumer product cards.

8. Responsive Behavior

The consumer surface is explicitly mobile web and uses compact type/actions. ABLY Team reflows large editorial stories and card compositions. Seller Square has its own desktop-oriented seller information hierarchy. Native-app safe areas, bottom navigation, checkout keyboards, and product-grid breakpoints remain unresolved.

9. Agent Prompt Guide

Build only the verified ABLY surface: use #ff5160, white, and #1f1f1f; Pretendard for consumer/Team or Noto Sans Korean for Seller Square; apply the exact domain-specific component geometry above. For native shopping UI, omit unverified cards, price stacks, badges, tabs, and checkout controls.

10. Voice & Tone

ABLY's official voice is energetic, friendly, and direct. Consumer and product stories emphasize discovering one's taste quickly; seller content emphasizes starting and operating a market easily; company content speaks in terms of next commerce, ecosystem, and expansion. Category or community copy can be playful, but transactional language should state price, choice, or next action without manufactured urgency. Seller guidance should distinguish onboarding, operations, advertising, and global expansion. Keep Korean copy conversational but task-clear. Avoid invented discounts, conversion claims, urgency phrases, and seller-growth numbers.

11. Brand Narrative

ABLY began as a personalized style-commerce experience and expanded its concept of taste beyond fashion into beauty, life, food, content, and community. The company connects that consumer discovery layer to a seller and production/distribution ecosystem, then frames global expansion through style commerce and a chain platform. The visual system mirrors that ecosystem: a shared coral identity with different tools for consumers, company storytelling, and sellers. Consumer value comes from a feed and discovery experience shaped by taste; seller value comes from easier onboarding, operations, distribution, and access to audiences. ABLY Team explains the mission and culture that connect those sides, while Seller Square turns the seller relationship into a separate operational surface. The shared color signals one company, but the different typography and geometry reveal genuinely different tasks.

12. Principles

1. Start from taste. Discovery should adapt to what a person is trying to express or find.
2. Connect both sides of commerce. Consumer ease and seller opportunity are related, not identical interfaces.
3. Move quickly without inventing truth. Fast commerce language cannot excuse unsupported UI claims.
4. Respect surface ownership. Mobile web, native app, company, and seller systems have distinct evidence.

13. Personas

First-party material establishes task contexts only:

• A consumer discovering and purchasing products aligned with personal taste.
• A seller evaluating onboarding, market operations, advertising, or global expansion.
• A candidate or partner learning about ABLY's mission, culture, and platform direction.

Project-specific names, ages, spending, seller revenue, category preference, conversion rate, and success metrics are intentionally unspecified and must come from the product brief.

14. States

This baseline-only run establishes default components but no reusable consumer hover, focus, pressed, loading, empty, cart, payment, order-success, or error state. Those states remain absent. Default-only boundaries are explicit in machine components.

15. Motion & Easing

No reusable duration or easing curve is promoted. The current capture did not establish native app motion or a cross-domain animation system.

---

Verified: 2026-07-12 (omd:migrate) Tier 1 sources: https://m.a-bly.com/ ; https://ably.team/ ; https://square.a-bly.com/ ; https://ably.team/news/ZS8_IREAACIAr50Y Tier 2 attempts: getdesign.md had no reliable ABLY consumer record; Refero produced no authoritative current ABLY surface Conflicts unresolved: none