Skip to main content

Figma Passport — Demonstration Page

The second screen of the landing page.

  • Source: file Agent (9gjEinYPK6zby7CkShjxTm) · page UI Pages · frame 1:75413 "Interactive demonstration".
  • Reference: 1920 × 1080. Conversion law: Figma px ÷ 10 = rem (html{font-size:calc(100vw/192)}), desktop rules @media (min-width:1025px).
  • Extracted: 2026-07-28, direct-read from the Design-mode Properties panel via claude-in-chrome (Dev Mode is paywalled/blurred; the REST API was rate-limited for ~65 h). The values below are direct inspector reads, not estimates.
  • Code target: frontend/src/sections/Demo/Demo.section.tsx (OverviewView) plus Demo.section.module.scss; i18n namespace overview.

Frame​

1920 × 1080. Background: linear gradient #305F9A (48,95,154) → #7CA4CF (124,164,207), top to bottom.

Layout skeleton​

  • Main frame (1920×1080, vertical Auto Layout, padding 64, gap 64) → [ title, Frame 186 content row ].
  • Frame 186 content row: horizontal Auto Layout, 1792×810, padding L/R 64, gap 205 → [ left avatar column, right Text zone ].
  • Right Text zone: vertical Auto Layout, Hug 920 wide, gap 24 → [ header group (title + description), items grid ].
  • The panels (About project ×2), Agent vector, and Navigation bar are absolutely placed siblings of the frame, rendered as overlay boxes over the Main-frame content.

Title "Interactive Demo" (1:75420)​

Alexandria 400, 64px, LH 100 %, LS 0 %, centred, top (y ≈ 64 via the Main-frame padding). Box 548×78 Hug. Fill: Logo Gradient = white rgba(255,255,255,1) → white rgba(255,255,255,0.5).

Left column — avatar card​

  • Agent vector (outer decorative border box): 716×809, radius 44, border 2px linear gradient rgba(13,36,64,1)→(13,36,64,0) (Prussian → transparent), Center. Position in the frame ≈ Top 207, Left −24.
  • Agent frame (blur) (avatar image frame): 540×762, radius 20, border 2px style Button Stroke (Light) (angular white: 16 % #FFF @0, 40 % #FFF @100, 65 % #F5F9FD @0, 88 % #E7F0FA @100), Inner. Drop shadow X24 Y48 Blur24 Spread0 rgba(0,0,0,0.25).
  • Star button START DEMO (1:75425): 360×72, radius 36, centred in the 540 image (Left 89.5), Top 608. Padding 12/16, gap 10. Border 2px style Bitton stroke (Gold). Fill Butto Fill (Accent) = gold linear rgba(201,162,39,1) (#C9A227) → rgba(242,210,122,1) (#F2D27A), opacity 1 (solid fill).
    • Text "START DEMO" (1:75426): Alexandria 500 Medium, 48px, LH 100 %, colour Sunflower Gold #E6B84C (230,184,76).
  • Caption "Try your agent right now" (1:75427): Space Grotesk 400, 24px, LH 100 %, centred, white → white 50 %.

Right column — panels and content​

  • Panel "About the Project" box (1:75485): 970.43 × 379.5 at (Left 849, Top 231), radius 44, border 2px linear gradient (13,36,64,0)→(13,36,64,1), Center.
  • Panel "Who It's For" box (1:75486): 970 × 353 at (Left 849, Top 663), radius 44, border 2px, same gradient.
  • Section title "About the Project" / "Who It's For" (1:75430): Space Grotesk 400, 40px, LH 100 %, LS 0 %, centred, colour Lemon Chiffon #FFF2C2, effect Text Shadow (Gold) = 2px 2px 4px rgba(0,0,0,0.5). Floats centred above each panel's top border.
  • Description (1:75431): Space Grotesk 400, 16px, LH 100 %, centred, white → white 66 % (255,255,255,1)→(255,255,255,0.66). Box 643 wide. Header group (title + description): vertical, gap 12.
  • Item (for example Mission, 1:75434): a single text node, box 448×128, in a 2-up grid. Title part Space Grotesk 700 Bold 20px; body span Space Grotesk 400 Regular 20px; LH 100 %; white gradient fill. The gold bullet "•" is a SEPARATE marker before each item title, not part of the text. Wrapper Text zone gap 24; items grid gap ~12–24.

Bottom navigation bar​

Within the bottom-64 zone of the frame.

  • Texts row (1:75493): horizontal Auto Layout 1792 × 64, justify space-between, padding L/R 128.
  • Children: [ « Arrow Left ] [ Marketplace ] [ Demonstration (active) ] [ All Services ] [ Arrow right » ].
    • Active "Demonstration" (1:75498): Alexandria 400, 64px, Logo Gradient (white → white 50 %), opacity 100 %.
    • Dim "Marketplace" / "All Services" (1:75497): Alexandria 400, 32px, Logo Gradient, opacity 50 %.
    • Arrow Left/right: chevron vector assets « », dim.

Named colour styles​

Prussian #0D2440 · Baltic #2E5E99 · Cool Horizon #7BA4D0 · Alice #E7F0FA · Golden Bronze #C9A227 · Sunflower Gold #E6B84C · Jasmine #F2D27A · Lemon Chiffon #FFF2C2. Logo Gradient = white → white 50 %. Button Stroke (Light) = angular white (see the avatar frame).

Content deltas versus the current i18n overview (English source)​

  • Title: "Interactive Demo" (current: "Interactive Demonstration").
  • About title: "About the Project" (current: "About project:").
  • Who-it's-for title: "Who It's For" (current: "Who It's For:").
  • Add the gold "•" bullet before each item title. START DEMO becomes a filled gold gradient (current: transparent + border).
  • Add the bottom section nav « Marketplace · Demonstration · All Services ».

QA / open​

  • Absolute positions are parent-relative in Figma's nested layout; verify the final render by overlaying a 1920×1080 export (Figma screenshots froze intermittently — the pixel overlay is still owed).
  • Bottom-nav behaviour (chevrons/labels → section scroll) is a design element; wire it to prev/next section or keep it visual — decide at implementation.