Skip to main content

Figma Passport — Download the Application

The seventh and final landing screen, #application.

  • Source: file Agent (9gjEinYPK6zby7CkShjxTm) · page UI Pages · frame 1:76493 "Main frame".
  • Reference: 1920 × 1070 — the frame itself is 10px shorter than the screen. The layout uses vh(); the horizontal 64 comes from the global .container (192rem, padding 6.4rem → content 1792).
  • Extracted: 2026-08-03 via GET /v1/files/<key>?ids=1:76493 — the same rate-limit workaround used for Collaboration.
  • Code target: frontend/src/sections/Application/Application.section.{tsx,module.scss}, i18n application + footer.

Skeleton​

Main frame 1:76493 — 1920×1070, vertical, padding 64, gap 64, counter CENTER.

  • Heading row 1:76494 — 1792×64 → TEXT 1:76495 "Download the Application", box 840×78, Alexandria 400 64px, lh 78.016 (1.21875), center/middle; fill Logo Gradient (white 1 → white 0.5); effect Meddium Shadow 12/12/blur 12 @ 25 %.
  • Frame 189 1:76496 — 1792×814, vertical, gap 70, CENTER:
    • Column row 1:76497 — 1792×641, horizontal, gap 64, padding 32/64/0/64, SPACE_BETWEEN / CENTER → 3 × "Left side" 512×609.
    • Footer block 1:76554 — 1792×145, vertical, gap −81 (negative, so the rows overlap), CENTER.

Columns (512×609, vertical, items CENTER)​

The vertical rhythm in the mockup: heading 51 → 78 → button block 176 → 84 → long text 220 (sum = 609).

NodeGeometryStyle
Column heading (Desktop Application / Scan the QR Code / Mobile Application)Box 51SG 400 40px, lh 51.04; #FFF2C2; Text Shadow (Gold) 2/2/4 @ 50 %
Download row Frame 128512×72, horizontal, gap 24, CENTER/CENTERIcon 72×72 plus a pill
Pill Navigation 1:76511HUG × 45, radius 36, padding 8/12Stroke 2px INSIDE "Button Stroke (Light)" (angular); text Alexandria 500 24px, lh 29.256, colour #E7F0FA
Long text 1:76525 / 1:76553512×220SG 400 16px, line 20px (1.25), LEFT/TOP; fill white 1 → white 0.66
QR Frame 190 1:76527346×395: heading 51 → 78 → RECTANGLE 266×266Image (image fill), no radius and no shadow
Text under the QR 1:76530354×120, top offset 93SG 400 16px, CENTER/TOP, the same gradient

Button order in the desktop column: Windows first, then macOS.

  • Icon row 1:76555 — 1328×128, horizontal, gap 24, CENTER: 11 groups of 96×96, with the sixth (Reddit) at 128×128 (10×96 + 128 + 10×24 = 1328). An INNER_SHADOW effect sits on the frame; it is not ported, since the icons carry their own assets.
  • Legal row 1:76610 — 1856×98, horizontal, SPACE_BETWEEN → two identical groups Group 189 346×98, at left @32 and right @1542.
    • Link TEXT — box 246×72 (3 rows of 24), SG 400 20px, LEFT/TOP; fill rgba(187,208,231,1) → rgba(187,208,231,0.66).
    • Copyright TEXT — 343×20, the same style, CENTER/TOP, y 78 within the group.
  • Vertically: icons 903…1031, legal 950…1048 — so the rows overlap, because of the negative gap.

What changed in the code​

  • Section: padding: vh(64) 0 vh(32) — the bottom 32 produces the exact composition 64…1048 within 1080 — and a full-width 1792 container with gap: vh(64); previously the container was artificially narrowed by 22rem.
  • Heading: moved into span.titleText with its natural 1.21875 line plus padding: vh(6) 0 (the same background-clip:text pitfall as in Pricing and Collaboration), and Meddium Shadow was added — there was no shadow before.
  • Column row: a grid of 3 × vh(512) with gap 64 and padding 32/64/0, replacing the former 560/350/560 with a 100px gap; the columns are fixed 512×609 with the 78/84 rhythm, replacing an eyeballed gap of 36 and offsets like padding-left: 80px and justify-self.
  • Buttons: height 60 → 45, font 36 → 24 Alexandria 500, a solid 1px border → a 2px angular stroke ($fs-stroke-appdownload, with stops from the pill's real corners ≈ 340×45: TR 82.5 · BR 97.5 · BL 262.5 · TL 277.5).
  • Column text: width 450 → 512, line 1.25, aligned left (was centred), with white-space: pre-line for multi-line i18n content.
  • QR: the radius 24 and the shadow were removed, since the mockup has neither, and the 78 offset from the heading was added.
  • Footer: the separator line (border-top) was removed, since the mockup has none; the block is 145 tall, icons are 96 (Reddit 128) with gap 24 instead of clamp sizes; the legal block is pinned to the bottom (98 tall) with 20px links at line 1.2 (box 72 = 3×24).
  • Content 1:1 in five languages: "Download application" → "Download the Application"; "Desktop version / Scan QR code / Phone version" → "Desktop Application / Scan the QR Code / Mobile Application"; "Download Win 64 / Download Mac OS" → "Download for Windows (64-bit) / Download for macOS"; "App Store / Google Play" → "Download on the App Store / Get it on Google Play"; the text under the QR follows the mockup; single-line captions were replaced with the mockup's full texts "Performance & Graphics Settings…" and "Cache Management…".
  • Legal font size is 12px (by request; the mockup says 20): vh(20) → vh(12). The block no longer holds the mockup's fixed height of 98 (height: auto, gap: vh(3)), while staying pinned to the bottom-left corner. This is a deliberate deviation from Figma.
  • The legal block is anchored to the corner. Before: 64 from the left (the .container padding) and 32 from the bottom — uneven. Now: left: calc(#{vh(32)} − 6.4rem), giving exactly vh(32) from the viewport edge, matching the section's padding-bottom. Measured: 26.3 / 26.4 px on a 1920×889 viewport (exactly 32/32 at 1080). This also matches the mockup, where the legal group sits 32 from the edge and its bottom at 1048 is 32 from the bottom.
  • Social icons — the sphere is drawn by the container, with no highlight. Each asset has three circle layers as direct children of <svg>: a base gradient #0D2440→#2E5E99, a ring highlight (radial, mix-blend-mode: overlay, white on the outer 5 % of the radius), and a diagonal gloss (soft-light). There were two problems:
    1. the container drew another circle (radial + linear gradients, a 1px border, a shadow) and clipped the embedded highlight through overflow:hidden + border-radius:50%, producing an uneven highlight and pixel artefacts at the edges;
    2. a gradient id collision: the same icons are rendered again in the mobile carousel (.responsiveContent, display:none), so the document contains two elements with the same id, and for some icons (telegram, youtube, instagram, linkedin, facebook — dups: 2) url(#…) resolved to the hidden duplicate → the sphere was not drawn at all, visibly so for LinkedIn and Facebook.
    • Fix: the container draws the sphere with the CSS gradient linear-gradient(180deg, #2E5E99, #0D2440) plus border-radius: 50% — independent of ids and identical for every icon — and all three circle layers in the asset are disabled (svg > path:nth-of-type(-n+3) { display: none }), leaving only the mark itself in <g> with its built-in inner shadow. Clipping was removed (overflow: visible), and hover is only scale(1.12).
    • Verified on all 11: container border-radius 50% with the same gradient, three circle layers display: none, sizes 96 (Reddit 128).
  • A standard "sphere" for every icon in the section (by request). The Collaboration & Partners icons (assets/icons/Group.svg, the Figma group "Planet Goal") have one layer more than the Download icons — a soft blue rim (radial #2E5E99 0 @92 % → #7BA4D0 32 % @100 %) — which makes them look more three-dimensional. That sphere was extracted into its own asset, assets/icons/IconSphere.svg (4 layers: base → blue rim → white overlay rim → diagonal soft-light gloss), and placed as a background-image behind:
    • the footer social icons (.desktopSocialIconContainer);
    • the platform icons (.downloadIcon) — with the assets' own circles disabled: Apple and Google hold the circle as the first direct <path>, Microsoft and macOS as three <path> elements in the first group.
    • The same shadow as in Collaboration was added: drop-shadow(vh(12) vh(12) vh(6) rgba(0,0,0,.25)).
    • background-image was chosen deliberately: the SVG renders in a separate document, so the id collision above does not affect it.

Deliberate deviations​

  • The second (right) legal group is not rendered. In the mockup it duplicates the left one — even with different wording, "GDPR Compliance Policy" versus "GDPR Compliance" — and overlaps the last icons; an evident leftover in the mockup.
  • The long texts "Performance & Graphics Settings" and "Cache Management" were previously compressed to one line on purpose (BACKLOG, session 2026-06-25). The "1:1 with the mockup" requirement restores the full texts; if the shorter variant is wanted again, that is an i18n-only change.
  • In our render these texts take one line fewer than the mockup (220 → ~200) because of differing wrapping metrics; the box width of 512 is preserved.

Verification​

Measured; values are Figma px.

Heading row y 64 h 64, text box 840×78 · column row y 192 h 641 · columns y 224 512×609 · column heading h 51 · button block y 353 h 176, row h 72, pill 400.5×45.2 (Figma 401×45) · long text y 613 w. 512 · QR y 353 266×266 · text under the QR y 712 w. 354 · footer y 903 h 145, icons y 903 h 128, legal y 950 h 98.

Checks: i18n:check 684 keys in parity ✅ · tsc -b exit 0 ✅ · vite build exit 0 ✅ · eslint src/sections/Application = 0 ✅.