Design System Inspiration of 29CM

1. Visual Theme & Atmosphere

29CM is the editorial select-shop of Korean e-commerce — a curated department store that happens to live online, whose homepage reads more like the cover of a printed lookbook than the landing page of a retailer. The signature surface is pure white (#ffffff) carrying pure black (#000000) display type and quietly minimal chrome: no shadows, no gradients, no decorative iconography. The composition leans on the photography to do the heavy lifting and on typography to do the directing. Where Musinsa is street-utility and Ohouse is interior-lifestyle, 29CM is the magazine — generous margins, oversized image columns, captions that read like editorial blurbs, and an unmistakable belief that white space is the most expensive material in the room.

The defining typographic move is Pretendard Variable running across the entire surface in a tight three-step hierarchy: 30px/700 category headlines, 22px/700 editorial card titles, 12-15px body. There is no display-only face, no decorative weight; the same Korean sans does the magazine title, the product price, and the footer note. Buttons are unornamented — the workhorse CTA is a 1px #C4C4C4 outlined pill on white with 4px corners ("더보기"), and the floating help affordances ("FAQ", "1:1 문의") are solid #000000 rectangles with white text and 2px radius, treated like editorial captions rather than UI controls. There is no "primary blue", no accent purple, no brand red. The brand color is the absence of color.

Image presentation is the second signature: full-bleed editorial photography sets the rhythm, each PT (Presentation) or Showcase tile leads with one large image and one Korean sentence underneath as caption. Prices are demoted — set at 12px/700, sitting under a 12px/400 product title in muted rgba(93,93,93,0.64) (a soft grey nearly invisible until you look for it). The visual order is: photo first, story second, product third, price last. That ordering is the brand's whole thesis.

Key Characteristics:

• Pretendard Variable across all surfaces — one font, three weights (400 / 700 / 800), no display companion
• Pure #ffffff page background, pure #000000 ink — no off-whites, no warm neutrals
• Three-tier display hierarchy: 30px section headline / 22px card title / 12-15px body & price
• Border-radius restraint: 2px for inverted CTAs, 4px for ghost buttons, 0px on most editorial chrome
• Muted secondary text via rgba(93,93,93,0.64) — a single transparent grey, not a swatch
• 1px solid #C4C4C4 outlines for ghost buttons — never colored, never thicker
• 12px/700 prices, 12px/400 product names — both subordinate to the image
• Generous editorial padding: 20-48px page margins, multi-line lh ≈ 1.36-1.5 on Korean body
• No shadow system on the homepage — elevation reads as "raised image", not "elevated card"
• Lowercase, English-leaning category labels (Special-Order, Showcase, Lookbook, 29Magazine) at 24-30px/700 — the brand's editorial register made literal

2. Color Palette & Roles

Primary

• Pure Black (#000000): Body ink, headings, inverted CTA backgrounds, footer headings. The brand's only "color" in the strictest sense.
• Pure White (#ffffff): Page background, ghost-button background, inverted-CTA text. Total white — not #fafafa, not #f5f5f5.

Greys (functional, not branded)

• Muted Grey 64% (rgba(93, 93, 93, 0.64)): Secondary captions, "옵션비 별도" hints, badge counts, inactive nav items. The single most-used non-primary color on the site, and it is a transparency, not a swatch — meaning the actual rendered colour shifts with whatever sits behind it.
• Outline Grey (#c4c4c4): The only border colour used for ghost-style buttons and editorial tile dividers. Mid-light, neutral, no warm tint.

Accent / State (sparse)

• Sale Red (#ff0066 / #ff003c family): Appears only on discount badges and percent-off pills on product cards. Never used for UI affordances or CTAs.
• Brand Black on Brand Black: Floating help CTAs ("FAQ", "1:1 문의") use #000000 background with #ffffff text — the inverse of the page, treated as a high-contrast, low-frequency control.

What 29CM Explicitly Does Not Use

• No brand blue, brand purple, or brand red. The category buttons that read "FAQ"/"1:1 문의" are not "primary" — they are inverted black, the same as the footer.
• No tinted neutrals (no #fafafa, no warm cream). Backgrounds are #ffffff, full stop.
• No semantic colour system beyond the discount-red badge. There is no success-green, warning-yellow, or info-blue on the marketing surface.

3. Typography Rules

Font Family

• Primary: Pretendard Variable, with fallback chain ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"
• Single-family system: There is no separate display face, no serif companion, no monospace. Pretendard Variable handles 100% of legible surfaces.

Hierarchy

Principles

• One family, three weights. Pretendard Variable at 400 (body, captions), 700 (titles, prices, ghost CTAs), and 800 (active navigation). 200 appears on inactive secondary nav as a quiet hint. There is no italic; emphasis is by weight, never style.
• Editorial card title = 22px/700. This is the unit of voice. Most magazine-style tiles on the homepage carry one 22-29px Korean sentence at weight 700, then a 15px/400 description in the same line-height ratio. The pair is the brand's grammar.
• Latin labels at large sizes, Korean at body sizes. Category navigation uses English (Special-Order, Showcase, PT, 29Magazine) at display sizes (24-30px), while Korean dominates body and editorial copy. The mixing is intentional — the English serves as a magazine table-of-contents register.
• Prices are never the loudest thing on a card. 12px/700 is by design subordinate to the 22px title and the photo. Where Coupang puts price first, 29CM puts price last.
• Letter-spacing is normal almost everywhere. No tight tracking, no display-tracking compensation. The font is well-cut enough to carry display sizes without spacing intervention.
• Line-height ≈ 1.36-1.50. Korean bodies need air; the editorial register needs more. 1.36 on titles, 1.50 on prose — never tighter.

4. Component Stylings

Buttons

Ghost Outline (the workhorse — "더보기")

• Background: #ffffff
• Text: #000000
• Border: 1px solid #c4c4c4
• Radius: 4px
• Padding: 16px 16px 16px 20px (asymmetric — slightly larger left for trailing-arrow icon)
• Height: 52px
• Font: 14px Pretendard Variable weight 700
• Use: "더보기 / View more" on every editorial section ending, primary "load more" affordance

Inverted Solid (floating help — "FAQ", "1:1 문의")

• Background: #000000
• Text: #ffffff
• Border: none
• Radius: 2px
• Padding: 4px 8px 4px 14px (asymmetric — leading icon space)
• Height: 31px
• Font: 15px Pretendard Variable weight 400
• Use: Fixed-position floating help controls on the bottom-right; the only persistent solid-fill control on the site

Category Pill (navigation count badges — "63", "175", "6K")

• Background: transparent
• Text: rgba(93, 93, 93, 0.64)
• Border: none
• Radius: 4px (inherited from container)
• Padding: 0
• Height: 52px (tap target, not visual height)
• Font: 16px Pretendard Variable weight 400
• Use: Category nav row count badges — number-only, large tap target, no visual chrome

Sale Discount Pill (product card overlay)

• Background: #ffffff or transparent
• Text: #ff0066 (sale red)
• Border: none
• Radius: 0px
• Font: 12px weight 700
• Use: Percent-off badge on product cards, often paired with the price

Cards & Containers

Editorial Tile (PT / Showcase / Magazine)

• Background: #ffffff
• Border: none
• Radius: 0px on the outer container; image inherits 0px (square / hard-edged)
• Padding: image full-bleed; caption block has 16-20px top padding
• Shadow: none — relies on photography and whitespace for separation
• Title: 22px / 700 / #000000 / lh 29.92px sitting directly under the image
• Body: 15px / 400 / #000000 / lh 22.5px
• Use: The dominant homepage unit — themed brand stories, lookbooks, editor curations

Product Card

• Background: #ffffff
• Border: none
• Radius: 0px
• Image: square or 4:5 portrait, 0px radius
• Title: 12px / 400 / #000000 directly under the image
• Price: 12px / 700 / #000000 (or red #ff0066 if on sale)
• Caption ("옵션비 별도", "무료배송"): 12px / 400 / rgba(93,93,93,0.64)
• Spacing: 8-12px between rows of the card meta block
• Use: Standard catalog item — image-first, text small, no chrome

Inputs & Forms

• Background: #ffffff
• Border: none on the homepage search affordance; bottom-rule only on focus
• Radius: 0px
• Font: Pretendard Variable
• Style: Editorial — search reads as a header-bar input, not a boxed UI control. When boxed elsewhere (PDP, checkout) it uses a 1px #c4c4c4 border and 4px radius matching the ghost button.

Navigation

• Header background: #ffffff (transparent over hero on scroll)
• Layout: logo center / utility links left and right at 16px / weight 200
• Primary category row: 16-30px Latin labels, weight 700-800 active, 200 inactive
• Logo: 29CM wordmark — see Logo asset
• Sticky behaviour: header stays, drops the secondary category row after scroll
• Mobile: hamburger toggle, full-screen sheet with same hierarchy

Footer

• Background: #ffffff
• Padding: 20px 48px 48px (asymmetric — tight top, generous bottom)
• Section headings: 13px / weight 700 / #000000, all-caps Latin (NOTICE, ABOUT US, MY ORDER, MY ACCOUNT, HELP)
• Body links: ~13-14px / weight 400 / #000000
• No background tint, no top border — the footer is just more whitespace with denser type

Decorative Elements

• No iconography on hero/editorial surfaces. Decorative graphics are intentionally absent; the image is the decoration.
• Trailing-arrow on ghost CTAs. "더보기" buttons carry a thin > chevron at the right — the only systematic icon use on marketing surfaces.
• Sale red as the single accent. When a percent-off ribbon appears on a product, it is the only chromatic moment on that tile. The restraint makes it work.

---

Verified: 2026-05-13 (omd:add-reference CREATE) Tier 1 sources: www.29cm.co.kr/ (live DOM inspect, Pretendard Variable + #000/#fff + 22px/700 editorial cards + 1px #c4c4c4 ghost CTAs + 2px-radius floating black CTAs — confirmed via getComputedStyle on home surface, scroll-loaded editorial tiles, footer, and floating help affordances) Tier 2 sources: getdesign.md/29cm — no entry returned ("No designs found for '29cm'"); styles.refero.design/?q=29cm — no 29CM-tagged styles found (search returned generic editorial/gallery references unrelated to 29CM) Conflicts unresolved: none — Tier 2 was silent on every claim, so Tier 1 live observation is the sole source. Token values in this section come exclusively from live getComputedStyle() on www.29cm.co.kr 2026-05-13.

5. Layout Principles

Spacing System

• Base unit: 4px (derived from 4-8-12-16-20-24-32-48 cascade observed in padding values)
• Page horizontal margin: 48px desktop, ~16-20px mobile
• Editorial tile gap: 24-32px between major sections
• Card meta gap (image → title → price): 8-12px between rows
• Footer block padding: 20px top / 48px bottom — asymmetric, generous at the bottom

Grid & Container

• Max content width: ~1280px centered, with full-bleed exceptions for hero editorial
• Editorial grid: 2-column on tablet, 3-4 column on desktop for product tiles, 1-2 column for PT/Magazine stories
• Hero: typically full-bleed image with 30px/700 caption sitting beneath, not overlaid
• Category nav row: horizontal scroll on mobile, fully visible on desktop

Whitespace Philosophy

• Whitespace is the brand asset. 29CM treats empty space the way Apple treats it on iPhone hero pages — as proof that the curation was tight enough to remove rather than add.
• Photography is the second voice. Image columns are oversized relative to text columns; captions stay short and well-set rather than competing with the image.
• Price is not the destination. The vertical rhythm of a product card — image, title, price — keeps price last so the user reads narrative before number.

Border Radius Scale

• 0px: Images, editorial tiles, search inputs, category labels — most surfaces
• 2px: Inverted black CTAs (FAQ, 1:1 문의) — the smallest radius in the system, used on the highest-contrast control
• 4px: Ghost outline buttons (더보기), boxed form inputs on PDP
• No pill shapes, no >8px radii anywhere on the marketing surface

6. Depth & Elevation

Shadow Philosophy. 29CM's marketing surface has no shadow system. The page is flat by design — depth comes from photographic content sitting on white, not from CSS box-shadows. The closest thing to "elevation" is the high-contrast inverted black CTA, which reads as an editorial pull-quote callout rather than a UI button. Adding a 0px 4px 8px rgba(0,0,0,0.1) shadow to a 29CM tile would immediately look off-brand — it would push the page from "magazine" toward "SaaS dashboard".

7. Do's and Don'ts

Do

• Use Pretendard Variable on every text element — there is no second face.
• Pair every editorial tile with one photograph and one short Korean caption at 22px/700.
• Use #000000 and #ffffff as the only structural colours; rgba(93,93,93,0.64) for muted captions.
• Keep border-radius at 0px, 2px, or 4px — nothing above 4px on marketing surfaces.
• Subordinate price (12px/700) to title and image; never invert this order.
• Lean on whitespace for separation — 24-48px between sections, not borders or dividers.
• Use the inverted black CTA (#000000 bg / #ffffff text / 2px radius) sparingly for high-priority, persistent affordances only.
• Mix Latin labels (Special-Order, Showcase, 29Magazine) at display sizes with Korean body copy at smaller sizes.

Don't

• Don't add box-shadows to editorial tiles or product cards — the homepage is flat.
• Don't introduce a brand blue, brand red, or brand purple for CTAs. The brand "colour" is monochrome.
• Don't use pill-shaped buttons or radii above 8px anywhere on marketing surfaces.
• Don't promote price to the top of a card or to the largest size — image first, price last.
• Don't use italic for emphasis; emphasis is by weight (400 → 700).
• Don't tint backgrounds (#fafafa, #f5f5f5) — 29CM is pure white.
• Don't compose hero text overlaid on photography; 29CM almost always sets caption below the image, not on top.
• Don't use decorative iconography on hero — the image is the decoration.

8. Responsive Behavior

Breakpoints

Touch Targets

• Category badge buttons: 52px tap height even when visually smaller
• Floating CTAs ("FAQ", "1:1 문의"): 31px height — minimum acceptable on mobile, paired with 8-12px padding
• Editorial tiles: full tile is tappable, no separate "view" button

Collapsing Strategy

• Section headlines: 30px → 22px on mobile, weight 700 maintained
• Nav row: full horizontal list → hamburger sheet
• Product grid: 4-column → 2-column on mobile, image-aspect maintained
• Page margin: 48px → 16-20px on mobile
• Floating help CTA: stays bottom-right at all viewports — the one consistent control

Image Behavior

• Editorial photography: full-bleed at all sizes; aspect ratio held
• Product cards: square or 4:5 portrait, maintained on mobile
• No lazy-load skeletons styled as cards — placeholder is a flat grey block, no shimmer

9. Agent Prompt Guide

Quick Token Reference

• Page background: #ffffff
• Body text: #000000
• Muted text: rgba(93,93,93,0.64) (transparent grey on white = #5d5d5d at 64% opacity)
• Outline grey: #c4c4c4
• Sale red: #ff0066 family (badge-only)
• Primary CTA: inverted black — #000000 bg, #ffffff text, 2px radius
• Secondary CTA: ghost — #ffffff bg, #000000 text, 1px solid #c4c4c4, 4px radius
• Font family: Pretendard Variable, ui-sans-serif, system-ui, sans-serif
• Section headline: 30px / 700 / lh 1.13
• Editorial title: 22px / 700 / lh 29.92px
• Editorial body: 15px / 400 / lh 22.5px
• Product name: 12px / 400
• Product price: 12px / 700

Example Component Prompts

• "Create an editorial tile: full-bleed photograph on top, then 16px gap, then 22px Pretendard Variable weight 700 Korean headline in #000000, then 8px gap, then 15px weight 400 description in #000000. No border, no shadow, no radius. White page background."
• "Build a 'View more' ghost button: white background, 1px solid #c4c4c4 border, 4px radius, 14px Pretendard Variable weight 700 black text, padding 16px 16px 16px 20px, height 52px. Trailing chevron > right-aligned."
• "Build a product card: square photograph at 0px radius, then 12px Pretendard Variable weight 400 product name in #000000, then 12px weight 700 price in #000000 directly below. Caption row '옵션비 별도' in 12px weight 400 rgba(93,93,93,0.64). No card border, no shadow."
• "Floating help CTA: #000000 background, #ffffff text, 2px radius, padding 4px 8px 4px 14px, height 31px, 15px Pretendard Variable weight 400. Fixed bottom-right, 24px inset."
• "Footer: white background, padding 20px 48px 48px. Column headings in 13px Pretendard Variable weight 700 uppercase Latin (NOTICE, ABOUT US, HELP). Link body 13-14px weight 400 black. No background tint, no top border."

Iteration Guide

1. Always use Pretendard Variable — it is the brand font; do not substitute Noto Sans KR or Apple SD Gothic Neo unless the runtime cannot load Pretendard.
2. Default to #000000 on #ffffff. Reach for rgba(93,93,93,0.64) only for secondary captions. Reach for any other colour only if you can name a specific brand reason.
3. Editorial card titles are 22px/700 with 29.92px line-height. This pair is the single most distinctive typographic unit in the system — replicate it precisely.
4. Product price is 12px/700 and lives under the title, not above. Inverting this order is the most common mistake when adapting other commerce designs to 29CM.
5. Radius scale is 0 / 2 / 4 — never 8, never pill. The 4px ghost button is the largest radius on the marketing surface.
6. White space is the brand. If a layout feels "empty", you are probably close to correct. Resist the urge to fill.
7. The inverted black CTA is high-cost. Use it once or twice per screen at most.
8. Photography does the visual heavy lifting. If you have weak imagery, no amount of typography will recover the 29CM register.

---

10. Voice & Tone

29CM speaks like an editor curating a magazine, not a marketer running a sale — calm, considered, never excited, never urgent. The brand book (Guide to better 29CM) defines the voice as personable but quiet: the brand persona is described as "착하지만 엉뚱한" (kind but offbeat), and the tone is treated as a deliberate craft layer that must stay consistent across every product caption, push notification, and email. Korean is the primary voice; English appears only as section labels and category names (Special-Order, Showcase, 29Magazine) borrowed from print-magazine convention.

Forbidden phrases. 최저가, 초특가, 긴급세일, 오늘만, English exclamatory CTAs (SHOP NOW!, BUY!), emoji of any kind on marketing surfaces, urgency-driven countdowns (마감 임박!), and the corporate-formal ~합니다 ending on consumer-facing voice. (~합니다 is reserved for legal disclosure pages only.) Stacked superlatives on a single product (프리미엄 럭셔리 시그니처 컬렉션) read as Coupang-grade promo and are off-brand.

11. Brand Narrative

29CM was founded in 2011 as a media-commerce hybrid — the C stands for Commerce and the M stands for Media — under the parent operator Cafe24's incubator before passing through several owners. The name itself encodes the thesis: 29 centimeters is, in the brand's own framing, "the closest distance at which two people can open their hearts" — the editorial premise that shopping is less about transaction than about taste, and that 29CM stands at conversational distance from its customer rather than retail distance (NamuWiki / Asiance). The brand's official identity statement is "Guide to Better Choice" — a curated selection promise rather than a discount promise.

The company was acquired by Musinsa (무신사) in 2021 and now operates as the editorial counterweight inside the Musinsa group: where Musinsa is street-utility and scale, 29CM is curation and editorial depth, with a dedicated PT (Presentation) format introduced in 2013 that publishes ~1.5 long-form brand stories per week (29CM Brunch — likenoothers). The 2023 Seongsu offline store and the 2023 BX renewal reinforced the editorial framing — the wordmark uses dotted "2" and "9" digits to express the brand's "착하지만 엉뚱한" (kind-but-offbeat) personality, and the visual identity centres on a ruler-mark motif that frames the wordmark "like a container for the brand".

The internal brand book is titled Guide to better 29CM, 더 나은 29CM를 위한 가이드북 — roughly 180 pages, with four parts: "우리다운 방식" (our way), "우리의 초상" (our portrait — brand persona as a person, complete with imagined clothes and weekend habits), "우리만의 목소리" (our voice — tone-and-manner guide for copy), and "그들의 취향" (their taste — nine taste-based customer personas, explicitly rejecting demographic segmentation) (29CM Brand Book — Brunch).

What 29CM refuses: discount-led merchandising (no permanent sale banners), demographic segmentation (age/gender bins are replaced by taste-based personas), urgency theatre (no countdowns, no "마감 임박"), and decorative chrome (no gradients, no shadows, no brand colour beyond black-on-white). What it embraces: long-form editorial inside the storefront, photography as the primary voice, Korean as the primary language with English borrowed from magazine convention, and the conviction that the customer is a reader first and a buyer second.

12. Principles

1. The image is the headline. Every editorial tile leads with a photograph at 22px-headline scale of visual weight. The Korean caption sits underneath, never overlaid. If the image cannot carry the tile, the tile is not ready. UI implication: Reserve the top 60-70% of every editorial unit for photography. Captions are subordinates, not co-headlines.

2. Price is the punctuation, not the verb. Product prices render at 12px/700 — the same size as the product name. Promoting price violates the editorial hierarchy and reframes the page as discount commerce. UI implication: Price never exceeds product-name size on a card. Discount red is a single accent, used sparingly on percent badges only.

3. Whitespace is more expensive than ink. 29CM's curation is proven by what is removed, not what is added. Page margins of 48px, section gaps of 32px, and an absence of dividers are the brand's structural commitment. UI implication: Default to more padding, fewer borders. If a layout reads "spacious", you are likely close to correct.

4. One face, three weights, no italic. Pretendard Variable is the entire typographic system. Emphasis is by weight (400 → 700 → 800). Adding a serif companion or a display face dilutes the editorial register. UI implication: Reject design contributions that introduce a second family. Bold is the only emphasis primitive.

5. Korean is the primary voice; English is the section label. Body copy, captions, error states, and onboarding are Korean. English appears at display sizes for navigation categories — borrowed from print-magazine convention, not adopted as parallel UI language. UI implication: Avoid English microcopy in body strings. Reserve English for top-level category names where it functions as decoration.

6. Restraint is the brand. The only "colour" is the discount-red badge. The only "elevation" is colour inversion. The only iconography is a trailing chevron. Every additional visual element competes with the photography. UI implication: Before adding a shadow, a border, an icon, or a colour — name a specific editorial reason. If there isn't one, remove.

7. The customer is a reader. PT, Showcase, and 29Magazine treat brand stories as long-form editorial. The site rewards browsing time, not click-through speed. Conversion follows attention; attention follows curation. UI implication: Allow long pages. Don't compress brand stories into "view more" gated cards. The full editorial is the funnel.

13. Personas

Personas below are fictional archetypes informed by 29CM's stated taste-based segmentation (9 personas defined in the internal brand book) and publicly described 29CM user profiles. Not individual people.

지윤 (Jiyoon), 29, Seoul. Marketing manager at a small lifestyle startup. Opens 29CM on her phone during the commute and on desktop at lunch. Reads PT pieces front-to-back before adding anything to cart — the editorial is the reason she's there. Owns one item from at least 12 different niche Korean brands, none of which she would have discovered on Musinsa. Resists discount notifications; deletes the app immediately if it starts pushing "오늘만" banners.

민호 (Minho), 34, Seongsu. Industrial designer. Treats 29CM as a curated showroom rather than a shop. Goes to the Seongsu offline store on weekends to handle objects in person, then buys online a week later. Will spend ₩280,000 on a single ceramic vase without flinching but considers a ₩9,900 cable organizer beneath consideration. The brand-story PT format is the deciding factor on every purchase above ₩100,000.

서연 (Seoyeon), 26, Busan. Recent grad, working her first office job. Uses 29CM as her "taste education" — she follows specific brand collections that 29CM has curated and slowly builds a wardrobe around them. Knows the difference between 29Magazine and Showcase. Reads Lookbook on Sunday evenings like other people read magazines. Has never used a 29CM coupon code.

현우 (Hyeonwoo), 41, Gangnam. Senior consultant. Buys gifts on 29CM — for partners, clients, parents. The site's editorial framing solves a problem ordinary commerce can't: it produces gift recommendations that feel "considered" rather than "expensive". Trusts the 29CM curation enough to buy without comparison shopping. Reads PT for vocabulary he can use in the card.

14. States

15. Motion & Easing

Durations (named, not raw milliseconds):

Easings:

Signature motions.

1. Image hover scale. Hovering an editorial tile scales the image to 1.04 over motion-standard with ease-out; the surrounding tile chrome does not move. The motion is photographic, not interface — the photograph leans toward the cursor.
2. Tile reveal on scroll. Editorial tiles fade in from opacity 0 with a 12px upward translate over motion-editorial with ease-out. The stagger between tiles is 80-120ms, mimicking page-turn rhythm rather than dashboard pop-in.
3. CTA hover (ghost outline). The #c4c4c4 border darkens to #000000 over motion-quick, no fill change. The change is felt, not announced — typical of editorial restraint.
4. CTA hover (inverted black). Background lightens 4% over motion-quick. No transform, no shadow added. The brand never animates depth.
5. Reduce motion. If prefers-reduced-motion: reduce, all motion-* tokens collapse to motion-instant. Image hover scale disables. Cross-fades replace translates. The site stays usable; just less kinetic.