Skip to main content

Figma Passport — Collaboration & Partners

The sixth landing screen, #collaboration.

  • Source: file Agent (9gjEinYPK6zby7CkShjxTm) · page UI Pages · frame 1:76212 "Collaboration & Partners" (1920×1080, fill linear rgba(13,36,64,1) → rgba(46,95,152,1)).
  • Reference: 1920 × 1080; the layout stays on vh() (vh($px) = $px/1080*100vh, so 1:1 at 1080 px).
  • Extracted: 2026-08-03 via REST GET /v1/files/<key>?ids=1:76212&geometry=paths — that endpoint sits in a different rate-limit bucket from /v1/files/.../nodes, which was returning 429 with retry-after ≈ 26 h. The full subtree came back with Auto Layout, typography, fills, strokes, and effects.
  • Code target: frontend/src/sections/CollabAndPartner/CollabAndPartner.section.{tsx,module.scss}, components/PartnersGroup/*, i18n collaboration.

Skeleton​

  • Main frame 1:76218 — 1920×1080, vertical, padding 64, gap 64, counter CENTER.
    • Collaboration & Partners 1:76219 — row 1792×64, horizontal, gap 84, padding L/R 128, SPACE_BETWEEN / CENTER.
      • TEXT 1:76220 — box 775×78, Alexandria 400 64px, line height 78.016px (= 1.21875), LS 0, center/middle; fill Logo Gradient white 1 → white 0.5 (handles bottom to top → token $grad-whiteHalf); effect Meddium Shadow 12/12/blur 12 rgba(0,0,0,0.25).
    • Frame 189 1:76221 — 1792×824, horizontal, gap 64, counter CENTER → two columns of 864×824.
  • The frame's sibling layers (Mountain Background, Upper/Down transition, Navigation bar, Navigation (Not active)) are page decorations and the global right rail — not part of this section.

Left column — Left side 1:76222​

Vertical, gap 32, padding 0/64/64/64, SPACE_BETWEEN, items CENTER.

NodeGeometryTypography / material
TEXT "Partners & Media" 1:76223Box 326×40SG 400 40px, lh 51.04; Lemon Chiffon #FFF2C2; Text Shadow (Gold) 2/2/4 @ 50 %
Frame 190 1:76224456.01×468, vertical, gap 24Three groups
Group Partners & Media (×3)456.01×140, vertical, gap 12, CENTER—
Group heading TEXT (EdTech Media / Partners / Foundations)Box 261×32SG 400 24px, lh 30.624; #FFF2C2; gold shadow
Icon row EdTech Media Icons456.01×96, horizontal, gap 24, CENTER4 × Planet Goal 96×96
Block Partners & Media (Press) 1:76390712×172, vertical, gap 12, CENTER—
TEXT "Press" 1:76391Box 261×32SG 400 40px (the text deliberately overflows the box); #FFF2C2; gold shadow
Row 1:76392712×128, horizontal, gap 24, CENTER[Arrow Left 64×64] · [Planet Goal 128×128] · [TEXT 384×124] · [Arrow Right 64×64]
Press description TEXT 1:76409384×124 = 4 rows of 31SG 400 24px, lh 30.624, LEFT/TOP; fill white 1 → white 0.66 ($grad-white); no shadow

Right column — Left side 1:76413​

Vertical, gap 64, padding 0/64/64/64, SPACE_BETWEEN, items CENTER.

warning

The content (208 + 509) is taller than the 760 band, so the actual gap in the mockup is 43, not 64 — space-between wins over itemSpacing. The code therefore uses gap: 0 with justify-content: space-between.

Frame 189 1:76414 — 630×208, vertical, gap 24 → two blocks of 630×92 (vertical, gap 12, CENTER):

  • TEXT "Contacts & Partnerships" 1:76416 — 468×40 · SG 400 40px · #FFF2C2 · gold shadow
  • Description TEXT 1:76417 — 630×40 (2 rows) · SG 400 16px, lh 20.416 · LEFT/TOP · white 1 → white 0.66
  • TEXT "Press & Partnership Inquiries" 1:76419 — 548×40 · the same heading style
  • Email TEXT 1:76420 — 630×40 · SG 400 16px · the same gradient

Form card — Collaboration request 1:76421​

  • 428×509, radius 36, vertical, padding 24, HUG.
  • Fill: linear 180° rgba(46,94,153): 0 @0% · 0.5 @44.2% · 0 @100%, with layer opacity 0.75 (folded into the alphas in CSS: 0 / 0.375 / 0).
  • No stroke. Effects = style "Glass tameplate": GLASS + NOISE (visible: false) + DROP_SHADOW 16/16/24 rgba(0,0,0,0.16).
  • Information layout 1:76422 — 380×461, vertical, gap 12, FILL/HUG:

    • TEXT "Collaboration Request" 1:76423 — box 258×24 · SG 400 24px · fill white @ 30 % → rgba(153,153,153,.5) @ 100 % ($grad-whiteGray)

    • 5 × Type row — 380×51, radius 36, horizontal, gap 12, padding 8, CENTER; fill linear 90° rgba(231,240,250,.25) → rgba(231,240,250,0)

      • inside, Country — 364×35, radius 24, padding 2 top and bottom, fill white, effect INNER_SHADOW 0/4 blur 4 rgba(0,0,0,.25)
      • placeholder — SG 300 24px, lh 30.624, LEFT/CENTER, colour #0D2440 at opacity 0.5
      • strings: First name... · Last Name · Email... · Country... · Collaboration Type

    • 6th Type row 1:76439 — the same, but padding 8/8/8/12: TEXT "Message:" 110×31 (SG 400 24px) plus Country 238×35 with radius 4/24/24/4 and the placeholder Type a text...

    • Reg Buttons group 1:76443 — 380×47, horizontal, gap 24:

      ButtonBoxStroke (2px, INSIDE, angular)Text
      Send 1:76444107×47, r32, pad 4/12Bitton stroke (Gold): #E6B84C 1@15.9%, .25@39.9%, 1@64.9%, .25@87.5%"Send" Alexandria 500 32px (lh 39.008), #E6B84C
      Reset 1:76446114×47Button Stroke (Light): #FFF 0@16%, 1@39.9%, #F5F9FD 0@64.9%, #E7F0FA 1@87.5%; layer opacity 0.5"Reset" Alexandria 500 32px, #E7F0FA
      Close 1:76448111×47The same light stroke, opacity 1"Close" Alexandria 500 32px, #E7F0FA

    • The buttons have no fill.

Line metrics​

The Figma panel reports "100 %", but the actual boxes use the font's automatic leading; the values below come from lineHeightPx in the JSON:

Alexandria 64px → 78.016 (1.21875) · 32px → 39.008 · Space Grotesk 40px → 51.04 · 24px → 30.624 (counted as 31 per row in wrapped boxes) · 16px → 20.416 (1.276).

What changed in the code​

  • The section heading was moved into span.titleText with its natural 1.21875 line — otherwise gradient-text (background-clip:text) would clip the glyphs, the same pitfall as in Pricing. The same was done for .FormTitle, whose 24px box is smaller than the natural 30.62.
  • Left column: added gap: vh(32); the three groups were wrapped in .groupsStack (gap: vh(24) = Figma's Frame 190).
  • Right column: the two text blocks were wrapped in .contactsGroup (gap: vh(24), width 630); the column uses space-between with gap: 0 — see the note about 43 above.
  • .collabText lh 1.24 → 1.276; .pressInfoText lh 1.18 → 1.29167; .pressTitle was given a vh(32) box.
  • Form card: the invented stroke, inset shadow, and glow were removed and replaced with the Figma fill plus backdrop-filter: blur(16px) and the 16/16/24 @ 16 % shadow; flex: 0 0 auto keeps space-between from squeezing the 509.
  • Form: rows use gap: vh(12) instead of space-between, the input is 24px (was 20), the Message row has padding 8/8/8/12, and the select has no CSS chevron, since the mockup has none.
  • Buttons: height 47 (the transparent 2px border that added 4px was removed; the stroke is drawn by ::before with inset: 0), transparent background, gap 24, "Reset" at opacity .5; on desktop the shared platform-close-button was neutralised for "Close", since it was imposing its own height, padding, border, and shadow.
  • Fields 1:1: Name/Organization → First name... / Last Name / Country...; the select hint "Select type..." → "Collaboration Type" (i18n in five languages).
warning

The backend contract (contactSchema) has only organization, so the Country value is sent in organization to avoid a database migration. The name is assembled from firstName + lastName.

  • Text 1:1 (EN): the contacts description "…working together" → "…working with AMADEQ — let's talk."; the small print "(For media requests, partnership inquiries…)" → "(for media requests, partnerships, and collaboration proposals)"; the press description → "AMADEQ combines real-time AI, avatars, and interactive environments to create a more human learning experience." The other languages follow.

Verification​

Measured at 1920×1080; values are Figma px.

Heading row @64,64 1792×64, text 775×78 · Frame 189 @64,192 1792×824 · columns 864×824 @64 and @992 · group stack @268,272 456×468, groups of 140 (272/436/600) · Press @140,780 712×172, row @824 712×128, text @380,826 384×124 · contacts group @1109,192 630×209.6 (Figma 208) · form card @1210,443 428×509 · form rows at 503/566/629/692/755/818 (step 63 = 51 + 12) · buttons @881 380×47: Send 106.2 (Figma 107), Reset 113.7 (114, opacity .5), Close 110.4 (111) · textarea 238.7×35, radius 4/24/24/4.

Pitfall: the angular button stroke "underlined" the text​

Fixed 2026-08-03.

The Send / Reset / Close buttons had a horizontal line in the text colour beneath their labels — it looked like text-decoration: underline.

  • Cause: the stroke was drawn with a fixed conic-gradient(from 180deg …) whose stops were given in percentages (16/40/65/88). A CSS conic gradient is angular in pixel space, whereas a Figma angular gradient is normalised to the layer's box — so on a wide, low pill (110×47) the bright stops land not on the corners but on the bottom edge, and the bright segment reads as an underline. Confirmed by disabling ::before (the line disappeared along with the outline) and by replacing the mask with a solid fill (the pseudo-element geometry turned out to be correct).
  • Fix: use the project's existing mechanism — compute the stops from the button's real corner angles (TR = atan(w/h), BR = 180 − TR, BL = 180 + TR, TL = 360 − TR). For these buttons (≈ 110×47) that is TR 67 · BR 113 · BL 247 · TL 293, with opaque stops at TL and BR and alpha at TR and BL, as in $fs-stroke-signin / $fs-stroke-signup. $fs-stroke-collab-gold and $fs-stroke-collab-light were added to styles/_mixin.scss.
  • Note: _mixin.scss is not picked up by HMR — restart the dev server after editing it.

QA / open​

  • Hover and focus states are not defined in the mockup; the product states were left unchanged.
  • The compact version (< 1440px) was not ported, as in the previous sections; the modal form shares the same classes, so the button changes were checked not to break it.
  • The "planet" icons kept their existing assets (Group.svg); in Figma they are the vector groups Planet Goal 96×96 / 128×128, and the sizes match.