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

Primary tasks

• Discover and buy products that match your personal taste
• Browse taste categories beyond fashion into beauty, home, stationery and food
• Start and run a market as a seller on the platform

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): the 1px outline of the mobile-web category chips (re-measured 2026-09-29). In July it also outlined the compact app-entry action; the rebuilt control has no border.
• 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

Rest values are the July 2026-07-12 capture unless marked. Hover, pressed and keyboard focus were measured on 2026-09-29 with the fixed live state probe (one load per surface, logged out, keyboard walk first); "no change" below means no computed change across the control, its ::before/::after, every descendant and 3 ancestor levels.

Consumer mobile web

The declared m.a-bly.com now redirects to mobile.a-bly.com, a React Native Web build that renders as a 600px column at desktop width.

Compact app-entry action (앱에서 보기)

• White / #1f1f1f label, 20px radius, 62×28px, 0px 8px
• Re-measured 2026-09-29: no border on the control or its 3 ancestors, and a 10px/400 label (the pressable itself computes 16px/400). July read a bordered button (1px #dddddd, Pretendard 12px/600); the site has since been rebuilt.
• Hover and pressed: no change within scope (1 descendant). Keyboard focus: the browser's default ring only.
• No native purchase meaning is attached

Category chip (probe rest reading, 2026-09-29)

• Transparent, 1px #dddddd outline, 18px radius, 48×36px, 9px 12px; visible label #777777 13px/400
• Hover: no change within scope (2 descendants). Pressed: fill #eeeeee, on press only. Keyboard focus: browser default ring.

ABLY Team

Primary action

• #ff5160 / white, 12px radius, 160×56px, Pretendard 18px/600
• Hover = pressed: fill #db3b57. Keyboard focus: browser default ring (not a brand token).

Soft action

• #fff2ea / #ff5160, 12px radius, 312×48px, 16px/600
• Hover = pressed: fill #ffe5dc. Keyboard focus: browser default ring.

Editorial pill

• White / #4e4e4e, 24px radius, 105×48px, 14px 16px, 16px/400
• Hover and pressed: no change within scope (0 descendants). Keyboard focus: browser default ring.

Mission and carousel card (non-interactive)

• White / near-black, 12px radius
• 0 4px 48px rgba(0,0,0,.08) shadow on list items with no Tab stop: the white mission cards and the image carousel item that holds the editorial pill. It is not a link, and the pill's hover and press change nothing on it.

News story card

• One link wrapping image, title and meta; 464×544px, no radius, no shadow; title #1f1f1f 24px/600, meta #757575 16px/400
• Hover = pressed: the image scales to 1.05 (matrix(1.05, 0, 0, 1.05, 0, 0)); the link's own fill, border, radius and shadow do not change. Keyboard focus: browser default ring.

News row

• White, 12px radius, 16px padding, 960×104px; title #1f1f1f 24px/600, date #757575 18px/400
• Default only (July capture); not probed

Header link (probe rest reading, 2026-09-29)

• Transparent, #1f1f1f 16px/600, 24px radius, 14px 16px, 76×48px
• Hover = pressed: fill rgba(0,0,0,0.05). Keyboard focus: browser default ring.

Seller Square

Primary entry action

• #ff5160 / white, full-pill, 114×49px, 13px 30px
• Visible label Noto Sans Korean 16px/400 (the link itself computes the 14px/400 that July recorded)
• Hover = pressed: fill #bf3c47, a different darkening from ABLY Team's. Keyboard focus: nothing within scope (1 descendant).

Header navigation item (probe rest reading, 2026-09-29)

• Transparent, label #1f1f1f Noto Sans Korean 18px/700, 0px 17px, 90px tall
• Hover = pressed: label #ff5160. Keyboard focus: nothing within scope (1 descendant).

The Channel.io chat launcher on Seller Square is third-party and excluded. Native consumer product cards, price stacks, shipping/deal badges, native 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 non-interactive cards: the mission cards and the image carousel item. The clickable news story card has no radius and no shadow, and its hover scales the image instead of lifting the card. 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. Keep state values on their own surface: the ABLY Team primary darkens to #db3b57, the Seller Square pill to #bf3c47. Keyboard focus is the browser's default ring or nothing, so supply an accessible focus style without presenting it as ABLY's.

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

Hover, pressed and keyboard focus were measured on 2026-09-29 with the fixed live state probe; nine controls have all three.

No control has an authored focus style. The browser's default ring (auto 1px, #005fcc) is recorded as what renders, not as an ABLY token, and Seller Square shows no focus indication at all within the compared scope. "In scope" means the control, its ::before/::after, every descendant and 3 ancestor levels; a menu opened as a sibling, canvas and pixels are outside it. Loading, empty, cart, payment, order-success and error states remain absent.

15. Motion & Easing

No reusable duration or easing curve is promoted. Measured transitions are surface-local: all 0s on the consumer and ABLY Team controls, all 0.3s on Seller Square, and a 400 ms image transition inside the ABLY Team news story card. Native app motion and a cross-domain animation system remain unobserved.

---

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