Skip to main content

Figma Passport — Pricing

The fifth landing screen, #pricing.

  • Source: file Agent (9gjEinYPK6zby7CkShjxTm) · page UI Pages · frame 1:76139 "Main frame" (the Pricing screen).
  • Reference: 1920 × 1080. The component keeps its existing vh() layout — the user's decision for landing sections is to correct values, not rewrite the layout. vh($px) = $px/1080 * 100vh, so at 1920×1080 vh(24) = 24px.
  • Extracted: 2026-08-03. Source: the Figma REST call /v1/files/.../nodes?ids=1:76139 (depth 3) for card geometry, layout, fills, and effects, plus the Properties panel (design mode, claude-in-chrome) for text-node typography. The values below are direct reads, not estimates.
  • Code target: frontend/src/sections/Pricing/Pricing.section.tsx + Prising.section.module.scss; i18n pricing.

Frame​

  • Main frame 1:76139 — 1920×1080, vertical Auto Layout, padding 64, gap 64, counter-axis CENTER, clipsContent: true.
  • No fill (fills: []) — the background comes from the landing page.
  • Children: [Texts 1:76140, Frame 186 1:76142]. This frame contains no top or bottom nav bar.

Heading​

  • Texts 1:76140 — 1792×64, horizontal, gap 84, padding L/R 128, space-between, counter CENTER. Its only child is the heading, effectively centred (x = 778 within the 1920 frame).
  • TEXT "Pricing" 1:76141 — box 364×78 Hug, Alexandria 400 Regular 64px, LH 100 %, LS 0 %, H-align Center, V-align Middle.
    • Fill: Logo Gradient = rgba(255,255,255,1) → rgba(255,255,255,0.5) (project token $grad-whiteHalf).
    • Effect: Meddium Shadow = 12 / 12 / blur 12 / spread 0 rgba(0,0,0,0.25).

Card row​

  • Frame 186 1:76142 — 1792×824, horizontal, gap 32, padding L/R 64, primary CENTER, counter CENTER.
  • Four cards: 1 block 1:76143 396×740 · 2 block 1:76151 396×740 · 2 block 1:76159 394×740 · 4 block 1:76167 396×740.
  • The row's total width is 1678, which exceeds the inner 1664 and is therefore centred: within the 1920 frame the row spans x 121…1799, leaving 121 on each side. Vertically the row is centred in the 824 band, so the cards sit at y 234…974.
  • Deliberate deviation: the third card is 394 in Figma, an evident mockup error. In code all four are 396, making the row 1680 with 120/120 margins. The difference is ≤ 1 px per side.

Card — all four share the same material​

  • Vertical Auto Layout, FIXED 396 × 740, radius 20, padding 24 / 12 / 24 / 12, gap 64, primary SPACE_BETWEEN, counter CENTER.
  • Fill = style "Pricing gradient" (1:75194): LINEAR top to bottom (handles (0.5,0) → (0.5,1)), colour #6192C7 = rgba(97,146,199), stops a0 @0% · a0.45 @40% · a0.5 @50% · a0.45 @60% · a0 @100%.
  • No strokes (strokes: []) — there is no border in the mockup.
  • Effects = style "Glass tameplate" (1:72422): GLASS (visible) + NOISE (visible: false) + DROP_SHADOW 16 / 16 / blur 24 / spread 0 rgba(0,0,0,0.16).
    • Browser mapping: backdrop-filter: blur(16px) plus the 16/16/24 @ .16 shadow (as in @mixin fs-glass) plus a thin 1px light rim. Figma's GLASS draws that rim as part of the material and CSS has no equivalent, so this is a browser material mapping, not a layer export.

Upper group — Frame 189 (1:76144 / …52 / …60 / 1:76168)​

Vertical, width FILL 372, height HUG, counter CENTER, gap 64; in the fourth card the gap is 51, an explicit designer value rather than a derived one. The heights 339 / 401 / 432 / 437 are fully explained by the sum of the rows — see line metrics.

NodeGeometryTypographyFill / effect
Plan title 1:76145 ("Explorer" + span "(Free Demo)")Hug 131×56Alexandria 300 Light 32px, LH 100 %, LS 0 %, center/middle; the span is 16px in the same family and weightLemon Chiffon #FFF2C2; Text Shadow (Gold) 2/2/4 rgba(0,0,0,0.5)
Price 1:76146 ("Price: $0")FILL 372 × 31 HugSpace Grotesk 400 24px, LH 100 %, LS 0 %, center"Linear text gradient" rgba(14,37,65,1) → rgba(14,37,65,0.66); no shadow
List 1:76147FILL 372 × 124 Hug (4 rows)Space Grotesk 400 24px, LH 100 %, LS 0 %, left"Text Linear gradient (White)" rgba(231,240,250,1) → rgba(231,240,250,0.66); no shadow

The list is a native Figma bullet list: the "•" marker is the same colour as the text, not gold, and there is no extra spacing between items — the rows run continuously at 31 px each.

Lower group — Frame 189 (1:76148 and its analogues)​

Vertical, HUG 310 × 171, counter CENTER, gap 32.

NodeGeometryTypographyFill
Description 1:76149310×93 (3 rows)Space Grotesk 400 24px, LH 100 %, LS 0 %, center"Linear text gradient" rgba(14,37,65,1) → rgba(14,37,65,0.66)
CTA 1:76150 ("Select Plan")Hug 194×46Space Grotesk 400 36px, LH 100 %, LS 0 %, center/middleLogo Gradient white 1 → white 0.5; no shadow

Line metrics​

Measured, not guessed. The Figma panel reports LH "100 %", but the actual boxes match the font's automatic leading. Verified arithmetically against the heights of all four cards:

  • Space Grotesk → a 31px line at 24px (1.2917): price 31 · description 93 = 3×31 · lists 124 = 4×31 / 186 = 6×31 / 217 = 7×31 / 248 = 8×31 ✓
  • The upper-group sums match exactly: 56 + 64 + 31 + 64 + 124 = 339 · +6 rows = 401 · +7 = 432 · card 4: 56 + 51 + 31 + 51 + 248 = 437 ✓
  • Alexandria in the plan title → block 56 = 32 × 1.1667 + 16 × 1.1667 ✓
  • CTA 36px → 46 (≈ 36 × 1.29) · section heading 64px → 78.

Content 1:1 (EN) and the i18n delta​

CardFieldWas in codeFigma
Explorerfeatures[2]"Avatar switching""Agent Switching"
Individualfeatures[4]"All avatars available""All agents available"
Pro / Organizationstag"(Easy Access)""(Early Access)"
all fourcta"click cart to select""Select Plan"

The remaining strings — names, tags, prices, descriptions, and other list items — already match the mockup.

Pitfall: gradient-text clips glyphs​

Fixed 2026-08-03.

The "Pricing" heading was first built as an h2 with line-height: 1 and height: vh(64). Visually the bottoms of the letters (the tail of the "g") were cut off along a straight horizontal line, while the shadow remained — the signature of this specific defect.

  • Cause: @mixin gradient-text = background-clip: text plus -webkit-text-fill-color: transparent. The gradient paints only within the element's background box. Alexandria's natural line is 1.21875 (64px → 78px, and 78 is exactly what Figma shows), while the box at line-height: 1 is 64px — leaving 7px of glyph at the top and bottom with nothing to paint them. The shadow is drawn from the full glyph outline, so it stays visible.
  • Rule: for any text using gradient-text, the background box must cover the whole line. A line-height below the font's natural value means clipped glyphs.
  • Fix here: the text was moved into span.titleText (display:inline-block, line-height: 1.21875 = the Figma box of 78) inside an h2.title of fixed height vh(64) = the Texts row. The 78 box overhangs the 64 row symmetrically by 7px top and bottom — exactly as in Figma, where the text spans 57…135 within the row 64…128 — and the layout does not shift. padding: vh(6) 0 was added because at 1920×1080 the ink margin at the bottom was exactly 0px, so antialiasing would still have eaten the edge; the padding is symmetric, so the glyphs do not move.
  • Checked across the whole page with a detector comparing canvas actualBoundingBox* metrics against the background box for every element using background-clip:text: at the reference 1920×1080 there are no other real clips — only sub-pixel (≤ 0.5px) trims at the top where there are no glyphs. This section's Space Grotesk texts (1.29167) have a −0.5px margin, meaning the box is larger than the line.

QA / open​

  • Hover is not defined in Figma (a static frame). The product hover stays in the code, unified to scale(1.05) as in the other landing sections (Hero / Demo / All Services / Uniqueness). That is a product decision, not a mockup one.
  • The mobile and tablet versions (< 1400px) are out of scope for this port, as in the previous sections.
  • The Figma REST API hard-blocked again after a single request (retry-after ≈ 30 h, x-figma-rate-limit-type: low), so the deeper nodes were captured through the Properties panel.