Design System Inspiration of Airbridge

1. Visual Theme & Atmosphere

Airbridge (에어브릿지) is the mobile measurement partner (MMP) built by AB180 (에이비일팔공), a Seoul martech and adtech company whose own name is its brand idea: "A에서 B까지. 가장 빠른 180도의 직선." — the straightest line from point A, struggling with user acquisition, to point B, sustainable growth. Airbridge measures which marketing drove installs and revenue across platforms, links users into the right app screen (deep linking) and guards against ad fraud. AB180's recruiting site calls the company "국내 1위 MMP" and Airbridge "전세계 유일의 Asia Based MMP" (2025).

The product site reads like an instrument panel. Every captured page opens on a near-black canvas (#0a0a0c) with off-white text (#fafafa) and a muted grey (#98989f) for sublines, eyebrows and inactive items. One saturated blue, #155dfc, carries every decisive action — 데모 신청하기 in the header, the hero and the closing band, 구독하기 in the footer, and the round 채팅 열기 launcher — and it is the colour of every authored focus ring. Mid-page, home switches to light comparison sections: headings in #020202, body copy in #171716, cards in #efefef, and 자세히 보기 links in a brighter link blue (#0970ff). The dark hero asserts seriousness; the light bands carry the commercial detail.

The current evolution is AI. The hero now reads "광고 성과 측정, AI로 완성하세요", an Airbridge AI side panel with prompt chips sits on every page, and AB180 describes itself as building "the AI stack for full-funnel growth" — with Airflux, an AI monetization agent for games, beside Airbridge and its DeepLink plan.

Type is Pretendard Variable throughout, with no display/body split: a 72px / 600 hero with -1.08px tracking and a clipped gradient fill, 48px / 700 section headings, 26px / 700 feature tabs, and 16px / 400 body copy on a 26px line. Geometry is soft-square: 8px on calls-to-action, 10px on menu buttons, toggles and FAQ rows, 14px on pricing cards and 18px on content cards.

Key Characteristics:

• Dark canvas #0a0a0c with #fafafa text and #98989f secondary text
• One action blue, #155dfc, for every primary call-to-action and every authored focus ring
• Light comparison bands inside home: #020202 headings, #171716 copy, #efefef cards, #0970ff links
• Pretendard Variable for every role; hierarchy by size and weight
• Hero headline filled from a clipped gradient; its computed colour is transparent
• Translucent white washes for secondary actions and selected toggles, not solid greys
• A soft blue glow on the hero call-to-action; otherwise mostly flat surfaces
• An AI side panel and launcher on every page, in the same blue

Primary tasks

• Measure which marketing actually drove installs and revenue
• Compare Airbridge against other measurement partners before choosing one
• Choose between the MAU-based and attributed-install pricing models
• Look up what a pricing term like MAU means
• Ask the Airbridge AI panel a product question before booking a demo

2. Color Palette & Roles

Primary

• Airbridge Blue (#155dfc): the primary. The site's own stylesheet names it: .dark { --primary: #155dfc }. It fills 20 captured backgrounds across all three pages — the header 데모 신청하기 (100 × 32), the hero 데모 신청하기 (138 × 48), the closing-band 데모 신청하기 (158 × 48), the plan-card 데모 신청하기 (386 × 36), 구독하기, 채팅 열기 and the AI panel's send button. It also turns the FAQ question label on hover and tints every authored focus ring (a 3px ring at 50% opacity). It is the primary because it is the one colour the product renders in its primary action role on every page; hover and pressed only lower its opacity to 90%.
• On Primary (#fafafa): the label colour on every blue action.
• Link Blue (#0970ff): the light theme's --primary (:root { --primary: #0970ff }), rendered only on 자세히 보기 links inside the light comparison sections. On hover it drops to 80% opacity.

Dark surfaces

• Canvas (#0a0a0c): page background of all three pages (.dark --background).
• Surface (#18181b): case-study cards, pricing-model cards, the closing band and the AI panel's message field (.dark --card).
• Surface Raised (#262629): the track behind the MMP 플랜 / 딥링크 플랜 toggle (.dark --secondary).

Text on dark

• Ink (#fafafa): headings, body and button labels (.dark --foreground).
• White (#ffffff): header menu labels.
• Muted (#98989f): hero sublines, eyebrows, inactive feature tabs, the unselected toggle and footer lines (.dark --muted-foreground).

Light sections

• Ink Light (#020202): headings and outlined-button labels in the light comparison sections.
• Body Light (#171716): copy in those sections.
• Surface Light (#efefef): the light feature cards.
• Input Ink (#101828): the text colour of the white footer email field.

Translucent layers (prose only, not tokens)

• Secondary actions and the selected toggle: rgba(255, 255, 255, 0.036) fill with a rgba(255, 255, 255, 0.12) border; hover 6%.
• Menu hover: rgba(0, 0, 0, 0.06).
• Default hairline on dark: rgba(255, 255, 255, 0.08); light cards: rgba(232, 232, 232, 0.4).
• Prompt chips: #155dfc at 5% fill and 20% border.

Declared but not rendered

The stylesheet also declares chart colours (--chart-1 to --chart-5, among them a mint #7eedb8) and light-theme --secondary, --muted and --accent blues. None of them rendered on the captured pages, so none is a token here.

3. Typography Rules

Font Family

• All text: Pretendard Variable (fallback Pretendard, then the system stack). 814 observed uses across headings, body, buttons, inputs, tabs and the dialog.

Font evidence

• Live surface use: Pretendard Variable — loaded, served as dynamic-subset WOFF2 from cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/variable/woff2-dynamic-subset/.
• Official distributed font assets: Pretendard is distributed by Kil Hyung-jin under the SIL Open Font License 1.1 (the project's LICENSE file). Airbridge serves the public jsDelivr build; it does not ship its own face.
• Official product use: no Airbridge or AB180 page opened names its typeface; not claimed.
• Declared only: Geist, Inclusive Sans and Inter (each with a Fallback face) are declared in the stylesheet with 0 observed uses. Do not use them as Airbridge fonts.

Hierarchy

Principles

• One family, weight-driven hierarchy. Headings step from 700 (sections) to 600 (the hero) and 500 (actions); copy is 400.
• Tracking tightens with size. About -1.5% of the size on headings (-1.08px at 72px, -0.72px at 48px, -0.39px at 26px); body and action text stay at normal tracking. Only the small overline tracks out (+0.6px).
• Generous reading lines. Body copy sits on a 26px line at 16px and 29.25px at 18px.

4. Component Stylings

Buttons

Primary call-to-action

• Background: #155dfc
• Text: #fafafa
• Radius: 8px
• Padding: 0px 16px
• Height: 48px
• Font: 15px / 500 / 22.5px Pretendard Variable
• Shadow: 0 0 0 1px rgba(21, 93, 252, 0.15), 0 2px 4px rgba(21, 93, 252, 0.1), 0 8px 24px rgba(21, 93, 252, 0.1)
• Hover: fill at 90% opacity
• Pressed: fill at 90% opacity, scaled to about 98%
• Focus: no change on the hero button (probe, Tab #20)
• Use: 데모 신청하기 in the hero of every page; the closing band repeats it at 158 × 48 with 8px 28px padding

Header call-to-action

• Background: #155dfc
• Text: #fafafa
• Radius: 8px
• Padding: 0px 12px
• Height: 32px
• Font: 14px / 500 / 20px
• Hover / pressed: fill at 90% opacity; pressed also scales to about 98%
• Focus: a 3px ring of #155dfc at 50% opacity
• Use: 데모 신청하기 in the fixed header

Plan-card call-to-action

• Background: #155dfc
• Text: #fafafa
• Radius: 8px
• Padding: 8px 16px
• Height: 36px (full card width, 386px)
• Font: 14px / 500 / 20px
• States: unmeasured (the pricing pseudo-state pass timed out and the probe did not reach it)

Ghost call-to-action (on dark)

• Background: rgba(255, 255, 255, 0.036)
• Text: #fafafa
• Border: 1px solid rgba(255, 255, 255, 0.12)
• Radius: 8px
• Padding: 0px 28px
• Height: 48px
• Font: 15px / 500 / 22.5px
• Hover / pressed: fill rgba(255, 255, 255, 0.06); pressed scales to about 98%
• Focus: a 3px ring of #155dfc at 50% opacity
• Use: 요금 확인하기, 영업팀 문의하기; a 40px version reads 더 많은 성공 사례 보기

Outlined button (light sections)

• Background: #ffffff
• Text: #020202
• Border: 1px solid #020202
• Radius: 8px
• Padding: 0px 16px
• Height: 40px
• Font: 14px / 500 / 20px
• States: rest only
• Use: 자세히 보기 in the light comparison section of home

Subscribe button

• Background: #155dfc
• Text: #fafafa
• Radius: 0px 10px 10px 0px (joined to the email field)
• Padding: 0px 16px
• Height: 36px
• Font: 14px / 500 / 20px
• Hover / pressed: fill at 90% opacity; pressed scales to about 98%
• Focus: browser auto-style outline tinted #155dfc; no authored ring
• Use: 구독하기 in the footer of every page

Chat launcher

• Background: #155dfc
• Icon: #fafafa
• Shape: 56 × 56 circle
• Shadow: a 2px #0a0a0c gap, a 4px ring of #155dfc at 20%, and soft #155dfc drop shadows at 25%
• States: rest only
• Use: 채팅 열기 (open chat), fixed at the bottom right of every page

Prompt chip

• Background: rgba(21, 93, 252, 0.05)
• Text: #155dfc
• Border: 1px solid rgba(21, 93, 252, 0.2)
• Radius: fully rounded
• Padding: 6px 12px
• Height: 30px
• Font: 12px / 500 / 16px
• Use: suggested questions in the AI panel (어떤 플랜이 맞을까요?, 이 기능이 정확히 뭐예요?)

Links

Inline link (light sections)

• Text: #0970ff
• Font: 14px / 500 / 20px
• Padding: 16px 0px 0px (spaced from the card copy)
• Hover / pressed: label and arrow at 80% opacity
• Focus: browser auto-style outline only
• Use: 자세히 보기 at the foot of each light feature card

Navigation & Tabs

Header menu button

• Text: #ffffff
• Radius: 10px
• Padding: 8px 12px
• Height: 36px
• Font: 14px / 500 / 20px
• Hover / pressed: rgba(0, 0, 0, 0.06) wash
• Focus: browser auto-style outline tinted #155dfc; no authored ring
• Use: 기능 소개, 솔루션, 인사이트

Plan toggle

• Track: #262629, 12px radius, 3px padding
• Unselected: transparent, #98989f label
• Selected: rgba(255, 255, 255, 0.036) fill, #fafafa label, 1px rgba(255, 255, 255, 0.12) border, a faint 0 1px 3px rgba(0, 0, 0, 0.1) shadow
• Radius: 10px
• Padding: 4px 24px
• Height: 29px
• Font: 14px / 500 / 20px
• Hover / pressed: the unselected toggle takes the selected look; the selected one does not change
• Focus: 1px solid #155dfc outline plus a 3px ring of #155dfc at 50% opacity
• Use: MMP 플랜 / 딥링크 플랜 on /ko/pricing

FAQ

FAQ row

• Text: #fafafa
• Radius: 10px
• Padding: 24px 0px
• Height: 76px
• Font: 18px / 500 / 28px, letter-spacing -0.18px
• Hover / pressed: question turns #155dfc; the row behind it tints #155dfc at 2%
• Focus: a 3px ring of #155dfc at 50% opacity
• Use: FAQ on home and /ko/pricing

Inputs

Footer email field

• Background: #ffffff
• Text: #101828
• Border: 1px solid #ffffff
• Radius: 10px 0px 0px 10px
• Padding: 0px 12px
• Height: 36px (304px wide)
• Font: 14px / 400 / 20px
• Placeholder: 회사 이메일 주소를 입력하세요.
• States: a form-error pass recorded no change; no error style is declared

Cards & Containers

Case-study card

• Background: #18181b
• Text: #fafafa
• Border: 1px solid rgba(255, 255, 255, 0.08)
• Radius: 18px
• Size: 392 × 476
• Use: 후야호, 삼쩜삼 and 퍼스트 디센던트 stories on home

Light feature card

• Background: #efefef
• Text: #020202
• Border: 1px solid rgba(232, 232, 232, 0.4)
• Radius: 18px
• Use: light comparison sections of home

Pricing-model card

• Background: #18181b
• Text: #fafafa
• Border: 1px solid rgba(255, 255, 255, 0.08)
• Radius: 14px
• Padding: 24px 0px
• Size: 436 × 714
• Use: 월간 활성 유저(MAU) 기반 and 어트리뷰티드 인스톨 기반 on /ko/pricing

Closing band

• Background: #18181b
• Radius: 26px
• Padding: 96px 32px
• Size: 1216 × 393
• Shadow: inset 0 0 60px oklch(0.65 0.1 236.24 / 0.5) — a soft blue inner glow
• Use: the last call-to-action block on every page

Dialog

Airbridge AI panel

• Background: rgba(10, 10, 12, 0.98)
• Size: 480 × 900, fixed to the right edge (role=dialog)
• Contents: "Airbridge에 대해 무엇이든 물어보세요", prompt chips, a #18181b message field (14px radius, 8px padding) and a 32 × 32 #155dfc send button (12px radius, disabled at rest)

---

Verified: 2026-09-30 (deterministic collector capture of three public, logged-out pages of airbridge.io plus fixed keyboard-probe state reads on home and /ko/pricing, reconciled against AB180's company, recruiting and engineering pages) Tier 1 sources: https://www.airbridge.io/ko ; https://www.airbridge.io/ko/pricing ; https://www.airbridge.io/ko/product/deep-linking ; https://www.ab180.co/about-us ; https://recruit.ab180.co/ ; https://engineering.ab180.co/ Tier 2 sources: getdesign.md/airbridge (HTTP 200, the name does not appear in the response) and styles.refero.design/?q=airbridge (HTTP 200, the name appears only as the echoed query), requested 2026-09-30; no Tier 2 value used Conflicts unresolved: none

5. Layout Principles

Spacing System

• Calls-to-action: 16px horizontal padding at 48px (hero), 28px at 158px wide (closing band), 12px at 32px (header)
• Menu buttons: 8px 12px; plan toggles: 4px 24px inside a 3px track
• FAQ rows: 24px vertical padding
• Detail cards on pricing: 20px padding
• Closing band: 96px vertical, 32px horizontal
• Most frequent spacing values in the capture: 8, 4, 12, 16 and 6px

Grid & Container

• Content sits in a 1216px column at the 1440px viewport (the closing band spans it).
• Home: centred hero with a primary/ghost pair, a feature section with tab headings on the left (576px) and a visual on the right, light comparison sections with three 392px cards per row, case-study cards in threes, an FAQ block (702px rows inside a 768px panel), the closing band and the footer.
• /ko/pricing: a toggle, two 436px pricing-model cards side by side, feature groups in 596px detail cards and the FAQ.
• A fixed header (menu buttons plus the header call-to-action), a fixed 채팅 열기 launcher and the AI panel sit over every page.

Whitespace Philosophy

• Dark authority, light detail: dark bands for claims and product, light bands for comparisons and plan logic.
• Tone before lines: surfaces separate by fill (#0a0a0c → #18181b → #262629) and faint white hairlines rather than heavy borders.

Border Radius Scale

• 0px: the default (641 of the recorded radii)
• 8px: calls-to-action and the outlined button
• 10px: menu buttons, plan toggles, FAQ rows, the email field and subscribe button (joined)
• 12px: the toggle track and the AI send button
• 14px: pricing-model and detail cards, the AI message field
• 18px: case-study and feature cards
• 26px: the closing band
• Fully rounded: prompt chips and the chat launcher

6. Depth & Elevation

Shadow Philosophy: the pages are mostly flat. The one decorative shadow is the blue glow under the primary call-to-action, which makes the action colour spill slightly onto the canvas; the chat launcher gets a blue ring and drop shadow for the same reason, and the closing band an inner blue glow. Everything else separates by tone.

7. Do's and Don'ts

Do

• Use #155dfc for the primary action on every page, with #fafafa labels
• Drop the blue to 90% opacity for hover and pressed, and scale pressed buttons to about 98%
• Use a 3px #155dfc ring at 50% for focus, adding a 1px solid #155dfc outline on toggles
• Use #0970ff only for inline links on light sections
• Put secondary actions on a translucent white wash (rgba(255, 255, 255, 0.036)) with a 12% white border
• Set everything in Pretendard Variable and tighten heading tracking to about -1.5% of the size
• Keep soft-square radii: 8px actions, 10px controls, 14px pricing cards, 18px content cards

Don't

• Don't add a second saturated accent; the stylesheet's chart colours never render on the pages
• Don't use #0970ff for filled buttons; every filled action is #155dfc
• Don't render another font as Pretendard, and don't use the declared-only Geist, Inclusive Sans or Inter
• Don't use pure black for text in the light sections; use #020202 and #171716
• Don't invent focus styles for menu buttons and inline links; they show only the browser's outline
• Don't make actions pill-shaped; only prompt chips and the launcher are fully rounded

8. Responsive Behavior

Breakpoints

Only the 1440 × 900 desktop viewport was captured. Class names such as sm:w-[480px] and sm:px-8 show that the pages restyle at Tailwind breakpoints; no breakpoint value was measured.

Touch Targets

• Primary and ghost calls-to-action: 48px
• Chat launcher: 56 × 56
• FAQ rows: 76px
• Header menu buttons: 36px; subscribe button and email field: 36px; plan-card call-to-action: 36px
• Header call-to-action: 32px
• Plan toggles: 29px

Collapsing Strategy

Not captured. The AI panel is w-full below the sm breakpoint and 480px above it, according to its classes.

Image Behavior

Product visuals sit inside #18181b cards and the feature section without borders or shadows.

9. Agent Prompt Guide

Quick Color Reference

• Primary action: #155dfc, label #fafafa; hover and pressed at 90% opacity
• Canvas #0a0a0c; cards #18181b; toggle track #262629
• Text on dark: #fafafa; menu #ffffff; secondary #98989f
• Light sections: headings #020202, copy #171716, cards #efefef, links #0970ff
• Footer email field text: #101828

Example Component Prompts

• "Create a dark hero on #0a0a0c: a 72px Pretendard Variable headline at weight 600 with -1.08px tracking and a gradient fill, a 20px #98989f subline, then a 48px call-to-action (#155dfc, #fafafa 15px / 500 label, 8px radius, 0 16px padding, blue glow shadow; hover at 90% opacity) beside a ghost button (rgba(255, 255, 255, 0.036) fill, 1px rgba(255, 255, 255, 0.12) border, 0 28px padding)."
• "Build a pricing toggle: a #262629 track with 12px radius and 3px padding holding two 29px tabs (10px radius, 4px 24px padding, 14px / 500). Selected: rgba(255, 255, 255, 0.036) fill, #fafafa label, 12% white border. Unselected: #98989f label. Focus: 1px solid #155dfc outline plus a 3px #155dfc ring at 50%."
• "Design a light feature card: #efefef, 18px radius, 1px rgba(232, 232, 232, 0.4) border; an 18px / 700 #020202 title with -0.27px tracking, 16px #171716 copy on a 26px line, and a 자세히 보기 link in #0970ff 14px / 500."
• "Create an FAQ row: 702px wide, 76px tall, 24px vertical padding, an 18px / 500 #fafafa question; on hover the question turns #155dfc and the row tints #155dfc at 2%."

Iteration Guide

1. One blue (#155dfc) for every filled action and every authored focus ring
2. Dark canvas first; light bands only for comparisons and plan detail
3. Pretendard Variable everywhere; tight tracking on headings only
4. Translucent white washes for secondary actions, never a second colour
5. 8px actions, 10px controls, 18px cards
6. The only glow belongs to the primary call-to-action

---

10. Voice & Tone

Airbridge's voice is declarative and evidence-led: short imperatives that promise measurement, plain technical feature names, and claims tied to scope ("글로벌 스탠다드", "한국 데이터 서버"). It speaks to marketers as analysts and leans on its Korean home market.

Voice samples (verbatim, opened 2026-09-30):

• "크로스 플랫폼 성과 측정도 AI로 완성하세요 | Airbridge" — airbridge.io/ko page title.
• "광고 성과 측정, AI로 완성하세요" — home hero headline.
• "감이 아닌 데이터를 근거로 의사결정하세요" — home section heading.
• "한국 마케팅 시장을 가장 잘 아는 MMP예요" — home section heading.
• "클릭 한 번으로 원하는 앱 페이지로 유저를 연결하세요" — deep-linking page hero.
• "A에서 B까지. 가장 빠른 180도의 직선." — AB180 company page.

Forbidden register: hype superlatives without a figure, fear-based urgency, unexplained martech jargon, stacked exclamation marks.

11. Brand Narrative

AB180 (주식회사 에이비일팔공) describes itself as a martech and adtech company that provides full-stack AI solutions for data-driven business success — from deep linking and attribution to product analytics, customer engagement and intelligent monetization. Its name is the pitch: the fastest, straightest line from A, where user acquisition is hard, to B, sustainable growth. The company is headquartered at 테헤란로 419 in Seoul's Gangnam district, and Airbridge's own home page sells "한국 데이터 서버" and "한국 본사 전문가".

The company is led by co-CEOs 남성필 (Roi Nam) and 정헌재 (Hunjae Jung). Both were named among Korea's top software engineers in the 2015 Software Maestro programme; 남성필 has consulted on more than 1,000 apps and was named to Forbes Asia's 30 Under 30 (media, marketing and advertising) in 2020, and 정헌재 was previously AB180's CTO and CPO. The English company page says AB180 turns "10+ years of MarTech, AdTech, and AI/MLops mastery" into AI solutions for "600+ apps and games worldwide". The newsroom lists a ₩12 billion Series B led by Storm Ventures (2023), the MGS 2024 marketing conference, a G-STAR 2024 appearance and Airflux's AI game monetization results (2025).

The recruiting site tells the arc in its own words: seven years to become an official global MMP, then three to become Korea's number one — "글로벌 공식 MMP까지 7년, 그리고 3년만에 대한민국 1위 MMP". Its 2025 figures: over 600 clients at home and abroad, 31 countries, 160 million mobile devices tracked daily and 3.6 billion real-time events a day. The engineering blog opens with the scale it builds for: "10억 개 이상의 이벤트 데이터, 1억 대 이상의 디바이스, 100만 이상의 RPM". Culture, as the recruiting site states it, is about systems rather than blame: when something goes wrong, the team fixes the process instead of treating it as one person's mistake.

The design follows the positioning. A dark, instrument-like canvas frames measurement as a serious tool; one blue marks the next step; the light bands spell out comparisons against other MMPs and the plan logic; and the AI panel and launcher on every page show where the company says it is heading.

12. Principles

1. Evidence over gut feel. "감이 아닌 데이터를 근거로 의사결정하세요." UI implication: lead with the measurement claim and its scope; keep the chrome dark and quiet so figures and product views read first.
2. One decisive action. UI implication: #155dfc fills only the action that moves a buyer forward (a demo, a subscription, a question to the AI); everything secondary is a translucent wash.
3. A to B, straight. AB180's name promises the shortest path. UI implication: each page ends in the same closing band with the same call-to-action; there is one route to a demo.
4. Explain the model. UI implication: pricing gets a toggle, two cards and a FAQ that decodes terms like MAU — plain explanation over sales copy.
5. Local strength, global standard. UI implication: Korean copy and Korean-market claims sit beside "글로벌 스탠다드에 부합하는 MMP"; the system itself stays neutral. (An editorial reading of the captured pages, not an Airbridge statement.)

13. Personas

Personas below are fictional archetypes informed by publicly observable Airbridge user segments (Korean app marketers, game and commerce growth teams, regional UA managers comparing MMPs), not individual people.

박지훈, 33, 서울. Performance marketing lead at a mobile game studio. Needs cross-platform numbers across iOS and Android, and PC and console since the studio's latest launch; wants one measurement view instead of stitched spreadsheets.

이서연, 29, 판교. Growth analyst at a commerce app. Uses funnel and lifetime-value predictions to defend budget allocation; values that pricing and features are explained plainly.

Marcus Lee, 38, Singapore. Regional UA manager evaluating MMPs. Reads the vs. AppsFlyer, vs. Adjust and vs. Singular comparisons before booking a demo.

14. States

Only these states were observed on the captured pages; nothing else is specified here.

Pricing-page bundle frames are missing because the collector's pseudo-state pass stalled there; the states above for /ko/pricing come from the probe. Loading, empty and success states were not captured and are not described.

15. Motion & Easing

The probe read the transitions the controls compute. Blue and ghost calls-to-action transition all 0.15s cubic-bezier(0, 0, 0.2, 1); inline links and the subscribe button transition colour, background, border and SVG fill and stroke over 0.15s with cubic-bezier(0.4, 0, 0.2, 1); plan toggles use all 0.15s cubic-bezier(0.4, 0, 0.2, 1); header menu buttons all 0.3s cubic-bezier(0.4, 0, 0.2, 1); FAQ rows colour and background over 0.3s with the same curve. Pressed buttons shrink to about 98%. Light-section cards reveal on scroll: when the probe's Tab brought one into view, its wrapper moved from translateY(20px), opacity 0 and blur(4px) to no transform, opacity 1 and blur(0px). Nothing else about motion was measured; honour prefers-reduced-motion in any build.