Skip to main content

Figma Passport — All Services

The All Services tab inside #mvpDemo.

  • Source: file Agent (9gjEinYPK6zby7CkShjxTm) · page UI Pages · frame 1:76664 "All Services".
  • Reference: 1920 × 1080. Law: Figma px ÷ 10 = rem. The component keeps its existing vh() sizing — a user decision: visual and text 1:1, layout untouched.
  • Extracted: 2026-08-01 via claude-in-chrome design-mode Properties, read through the DOM — the Figma WebGL canvas froze intermittently; see the caveat below.
  • Code target: frontend/src/components/AllService/AllService.section.{tsx,module.scss}; i18n allService.

Layout​

  • Main frame 1920×1080, vertical, padding 64, gap 64. Frame background gradient rgba(231,239,249) → rgba(124,164,207), provided by the landing page.
  • Frame 186 content: vertical, Fill 1792×824, padding 64, gap 24 → [ header text block, 4 row cards ].

Header text block (1:76681)​

One text node, 710×93. Space Grotesk 400, 24px, LH 100 %, LS 0 %, centred. Colour Lemon Chiffon #FFF2C2 (255,242,194). Effect Text Shadow (Gold) 2/2/4 rgba(0,0,0,0.5).

It is rendered as two <p> elements in code — subtitle and description — with the same style.

Row card — "3 block" (1:76669 …) ×4​

  • Horizontal, Hug 1310 × 152, radius 132, padding 12 / 32 / 12 / 12 (T/R/B/L), gap 24.
  • Shadow "Glass tameplate" = 16 / 16 / 24 / 0 rgba(0,0,0,0.16); effect Glass tameplate (backdrop blur). Angular light rim.
  • Three columns: icon (Planet) · content (title + text, Frame 14, 512 wide, gap 12) · bullets column.

Icon — "Planet 2"​

A circular planet SVG; assets HeadPlanet (120) / TubePlanet, GroupPlanet, GraduationPlanet (128) — the circle fills the viewBox with no baked shadow bleed. Rendered in a vh(120) box. The exact Figma icon box and any icon shadow were not hard-measured, because the canvas froze.

Title (1:76690)​

For example "Personal AI Agent & Assistant": Space Grotesk 700 Bold, 24px, LH 100 %, LS 0. Colour Lemon Chiffon #FFF2C2. Effect Text Shadow (Gold) 2/2/4 rgba(0,0,0,0.5).

Body text (1:76692)​

Space Grotesk 400, 16px, LH 100 %. Fill Prussian gradient rgba(13,36,64,1) → rgba(13,36,64,0.66) (background-clip text).

Bullets​

Prussian gradient, same as the body. Size vh(20) — this was not hard-measured because the canvas froze; it was chosen visually, between the body's 16 and the title's 24. Confirm if precision is needed.

Content 1:1, all locales updated​

KeyWasFigma
video.titleRemote Video Rendering with Avatarswith Agents
video.bullet[3]Customizable for corporate useScalable for individual and corporate use
learning.titleAvatar MarketplaceAgent Marketplace
corporate.titleClient & Team Learning / UpskillingTeam Learning & Upskilling
corporate.text…for employees and organizations.…for employees in businesses and organizations.
corporate.bullet[3]Suitable for education and businessSuitable for both education and business

Deltas applied to the SCSS, keeping vh()​

  • .itemContainer: radius 7rem → vh(132); padding 14/32/14/12 → 12/32/12/12. The drop shadow 16/16/24 @ .16 was already correct.
  • .itemTitle: font-weight 400 → 700; text-shadow 1/1/2 @ .34 → 2/2/4 @ .5. The colour --c-gold-4 = #fff2c2 Lemon Chiffon was already correct.
  • .description: add text-shadow 2/2/4 @ .5; line-height normal → 1.
  • .itemText: line-height normal → 1.
  • .itemBulletsText: font-size 18.5 → 20 (see the bullets caveat).

Verified​

Rendered at 1920×1080, scale ×0.823: radius 108.7 (= 132) · padding 9.88/26.34 (= 12/32) · title w700 19.76 (= 24) #FFF2C2 shadow 1.65/1.65/3.29 (= 2/2/4) · description shadow the same · body 13.17 (= 16) · bullet 16.46 (= 20) · all 4 titles and the reworded bullets present. i18n parity 683 keys ✓. Build tsc + vite exit 0.

Caveat​

The Figma WebGL canvas froze repeatedly during automation — the same class of problem as the globe. Card, title, body, header, and content were measured directly; the icon box/shadow and the bullet font size were not hard-measured — those are reasoned values, flagged in the code.