Figma → Frontend Implementation Dossier

Document status: working handoff specification Prepared: 2026-07-21 Branch: Vlad Figma source: Agent brand book Target application: the frontend workspace

note

This dossier separates facts verified from the supplied Figma canvases from facts verified in the code. Values marked Figma inspect required must be copied from Figma Dev Mode before a pixel-perfect change is committed. They are deliberately not estimated. That prevents an approximate browser reading from silently becoming a false design specification.

1. Purpose and working rule

The landing page is a sequence of seven full-viewport scenes, not a long document with transitional spacer layers. A wheel gesture, touch gesture, or right navigation control lands on one scene at a time. All visual work must preserve the current product behaviour unless a change is explicitly approved.

The implementation order is always:

1. Record the selected Figma node's geometry, styles, and variants.
2. Map it to the component listed in section 6.
3. Implement the default state first.
4. Add hover, focus, pressed, disabled, loading, and responsive states.
5. Compare a 1920 × 1080 browser capture with the Figma frame before moving to the next scene.

Do not compensate for a wrong parent position by adding a one-off child margin. First check the frame size, container, grid, and vertical anchor.

2. Reference frame and scene order

The supplied brand-book screenshots identify a 1920 × 1080 desktop reference frame. The canvas and the website both use these seven scenes in this exact order.

#	Figma / product scene	DOM id	Primary frontend component	Background
1	First Screen / Main page	hero	PreHeaderSection, HeaderSection, HeroSection, EarthScene	#122942 → #2F5E99
2	Interactive demonstration	interactive	DemoSection	#305F9A → #7CA4CF
3	MVP Demo / Demonstration	mvpDemo	ServiceSection, MvpDemo	#7CA4CF → #E7EFF9
4	Roadmap	roadMap	RoadMapSection, OrbitSwitch	#E6EFF9 → #7CA4CF
5	Pricing	pricing	PricingSection	#7CA4CF → #2E5E99
6	Collaboration & Partners	collaboration	CollabAndPartnerSection	#2E5F98 → #0D2440
7	Download the Application	application	ApplicationSection	#0D2440 solid

Transition rule: there are no separate top/bottom Space, Down transition, pricing transition, or application transition surfaces in the web layout. The visual hand-off from one scene to the next is the adjacent end and start colour of the two declared scene gradients. Decorative background images are also out of scope until they are deliberately restored from Figma.

3. Brand foundations

3.1 Colour styles visible in the supplied Figma sidebar

Figma style name	Current code token	Hex in code	Use in the design
Prussian Blue	--c-prussian	#0D2440	Deepest blue; final screen; dark text/background accents
Baltic Blue	--c-baltic	#2E5E99	Main mid-blue; scene ends and dark navigation
Cool Horizon	--c-cool	#7BA4D0	Cool/light blue surfaces
Alice Blue	--c-alice	#E7F0FA	Pale surfaces, light strokes, and text
Golden Bronze	--c-gold-1	#C9A227	Dark gold fill/accent
Sunflower Gold	--c-gold-2	#E6BB4C	Primary gold action colour
Jasmine	--c-gold-3	#F2D27A	Light gold gradient stop
Lemon Chiffon	--c-gold-4	#FFF2C2	Hero heading / high-contrast warm text
Button Stroke (Light)	—	Figma inspect required	Light outline button border
Button Fill (Light)	—	Figma inspect required	Light button base fill
Button Hover (Light)	—	Figma inspect required	Light hover fill
Button Active (Light)	—	Figma inspect required	Light pressed fill
Button Fill (Dark)	—	Figma inspect required	Dark button base fill
Button Fill (Accent)	—	Figma inspect required	Gold/accent button base fill
Logo Gradient	—	Figma inspect required	AMADEQ wordmark light treatment
Logo gradient (Dark)	—	Figma inspect required	AMADEQ wordmark dark treatment
Icons Bevel	—	Figma inspect required	Icon face / bevel surface
Button stroke (dark)	—	Figma inspect required	Dark outline border
Bitton stroke (Gold)	—	Figma inspect required	Gold outline border (style name as shown in Figma)
Pricing gradient	—	Figma inspect required	Regular pricing-card fill
Pricing gradient (active)	—	Figma inspect required	Selected pricing-card fill
Round icon (3d effect)	—	Figma inspect required	Round social / planet / group icon surface
Linear text gradient	—	Figma inspect required	Headings / special text
Navigation gradient	—	Figma inspect required	Side navigation icon treatment

The present CSS tokens are an implementation palette, not proof that every Figma style uses the same hexadecimal value. On the first Figma inspector pass, record opacity, blend mode, gradient angle, and variable binding beside each row.

3.2 Exact scene gradients confirmed from the supplied Figma panels

All are linear, vertical gradients: 180deg, top at 0%, bottom at 100%.

/* Scene 1 — First Screen */
background: linear-gradient(180deg, #122942 0%, #2F5E99 100%);

/* Scene 2 — Interactive demonstration */
background: linear-gradient(180deg, #305F9A 0%, #7CA4CF 100%);

/* Scene 3 — MVP Demo / Demonstration */
background: linear-gradient(180deg, #7CA4CF 0%, #E7EFF9 100%);

/* Scene 4 — Roadmap */
background: linear-gradient(180deg, #E6EFF9 0%, #7CA4CF 100%);

/* Scene 5 — Pricing */
background: linear-gradient(180deg, #7CA4CF 0%, #2E5E99 100%);

/* Scene 6 — Collaboration & Partners */
background: linear-gradient(180deg, #2E5F98 0%, #0D2440 100%);

/* Scene 7 — Application */
background: #0D2440;

The #E7EFF9 / #E6EFF9 one-step discrepancy between the third and fourth panels is source data, not a typo in this document. Keep it until the Figma style inspector confirms whether they are intentionally separate colour styles.

3.3 Current implementation foundations

These are the reusable values already available in frontend/src/styles/tokens.scss:

Foundation	Value
Content max width	1120px / 112rem
Outer content pad	4rem
Brand font	Space Grotesk
UI font	Alexandria
Display type scale	h1: clamp(40px, 3.6vw + 8px, 64px); h2: clamp(28px, 2.2vw + 8px, 44px)
Body type scale	clamp(16px, 0.6vw + 14px, 18px)
Small type scale	clamp(12px, 0.4vw + 10px, 14px)
Default button height	48px
Default button radius	20px
Light stroke	rgba(255,255,255,.16)
Default shadow	0 8px 16px rgba(0,0,0,.16)

These values should be used only where Figma confirms them. Any Figma value that differs should become a named token rather than an anonymous local magic number.

4. Global interaction contract

4.1 Full-page navigation

• The scroll owner has scroll-snap-type: y mandatory; its native browser scrollbar is hidden for Chromium, Firefox, and legacy Edge.
• Every normal-height scene is 100dvh, scroll-snap-align: start, and scroll-snap-stop: always.
• Desktop mouse wheels are intercepted only for a fine-pointer device. One valid wheel intent moves exactly one scene and is guarded for 750 ms while the smooth scroll runs.
• Touch devices retain native scrolling with CSS snap; zoom gestures are not swallowed.
• prefers-reduced-motion: reduce changes programmatic movement to immediate.
• At a viewport height below 600px, scenes may grow to content height so controls and legal content cannot become unreachable.

Acceptance test: after every wheel transition at 1920 × 1080, the viewport top must equal a scene top; there must be no resting point halfway between scenes.

4.2 Side navigation

The side navigation has seven targets in this order: First Screen, Interactive Demo, MVP Demo, Roadmap, Pricing, Collaboration, Application. The current implementation determines the active state through an IntersectionObserver at 60 % visibility.

States to preserve:

State	Behaviour
Closed	Visually compact current-section control; no overlay
Opened	Overlay appears; all seven named destination rows are exposed
Hover/focus	The affordance must be visible; keyboard focus must not be hidden by the overlay
Active destination	Maps to the scene currently snapped to the viewport top
Selected destination	Smooth-scrolls to the target scene and closes the menu
Escape / overlay click	Closes without navigation

4.3 Baseline component states

Every custom Figma component must be recorded in these states before it is considered transferred: default, hover, focus-visible, pressed, disabled, loading (if asynchronous), and mobile. For an SVG or icon, also record its frame, internal padding, fill, stroke, glow, blur, and shadow.

5. Measurement capture sheet for the Figma inspector

Use this exact field order for each selected Figma node. It produces a record that can be copied directly into CSS variables and tests.

Field	Record	Why it matters
Node URL / node id	Exact link	Makes the decision auditable
Parent frame	Name + size	Reveals the coordinate system
x / y / width / height	px	Establishes geometry
Auto Layout	Direction, gap, padding, alignment, grow / hug / fixed	Prevents manual positioning drift
Constraints	Horizontal and vertical	Governs responsive behaviour
Layout grid	Columns, gutter, margins	Aligns all siblings
Fills	Colour styles, rgba, gradient angle/stops, blend/opacity	Establishes the actual colour
Stroke	Style, weight, inside/center/outside, opacity	Avoids 1px visual drift
Effects	Exact shadow, blur, layer blur	Controls glass / 3D depth
Corner radius	Individual or uniform px	Component silhouette
Typography	Family, size, weight, line height, letter spacing, paragraph spacing	Avoids wrapping differences
Text behaviour	Fixed / auto width, truncation, alignment	Preserves multi-language layout
Variants	Property names and every state	Maps directly to React/CSS state
Prototype	Trigger, animation, duration, easing	Maps the Figma interaction honestly
Exports	Name, SVG/PNG, scale, colour space	Prevents accidental rasterisation

6. Scene-by-scene transfer specification

Scene 1 — First Screen (#hero)

Verified visual composition

• A dark blue-to-mid-blue vertical scene with AMADEQ branding in the upper left, announcement and time-to-launch controls across the upper area, and language/auth controls at the upper right.
• The left content block contains the headline "The AI Tutor That Feels Like a Real Personal Teacher" and a short descriptive paragraph.
• A large Earth/globe image is the foreground subject in the lower centre.
• The centre call-to-action stack has a light outlined Try Live Demo button, a gold outlined/filled Reserve Spot in Closed Beta button, then small queue microcopy.

Figma layer clues observed in the supplied canvas

First Screen → Navigation (Not active), Navigation bar, Frame 186, Header, Title description, Down transition, Navigation bar, Title, Gemini_Generated_Image (locked), Space 3 (locked). The Down transition and Space 3 concepts are intentionally omitted from the live page under the current no-transition-layer rule.

Frontend map

Figma visual block	React source	Required states / behaviour
Announcement pill + close	PreHeaderSection	Visible; dismissed in memory; close hover/focus
AMADEQ logo	HeaderSection + AMADEQ text.svg	Home link; normal vs auth-page placement
Launch counter	CounterPill	Live count; desktop header vs compact hero placement
Language control	LanguageSwitcher	Selected language and menu interaction
Sign-up / sign-in	HeaderSection	Anonymous; replaced with Profile / Logout when authenticated
Headline and copy	HeroSection	Desktop and mobile text variants; locale wrapping
Earth art	EarthScene	Visual-only layer; must never block button pointer events
Two CTAs + microcopy	HeroSection	Demo routes to /demo; the reserve action needs an approved product destination

Current coded geometry worth comparing, not copying blindly

• Hero title max width 600px; vertical type size clamp(24px, 4.2vh, 32px).
• Copy width clamp(350px, 40vw, 512px); copy type clamp(16px, 1.8vh, 18px).
• Light CTA: min height clamp(48px,5.6vh,56px), minimum width min(250vh, 100%), radius 100px.
• Gold CTA: width min(clamp(380px,45vw,480px),100%), same height and radius.

Figma inspect required before a pixel-perfect pass

1. Exact logo box, headline baseline, and text box widths.
2. Globe crop box, z-index relationship, and whether it is a static image or an effect layer at the reference frame.
3. Announcement and countdown dimensions, shadow, glass opacity, and close-icon size.
4. Exact button variants for idle / hover / pressed / focus.
5. The gap from the CTA microcopy to both buttons.

Scene 2 — Interactive demonstration (#interactive)

Verified visual composition

• The vertical background progresses from #305F9A to #7CA4CF.
• Central heading: Interactive Demo.
• Left: a tall blurred avatar demo window with a gold START DEMO control and supporting availability text.
• Right: two framed content panels, About the Project and Who It's For. Each contains four short information blocks arranged in a two-column grid at desktop size.

Frontend map

Figma visual block	Source	Default / alternate state
Demo title	DemoSection	Desktop heading; hidden in the compact alternate composition
Avatar card and start action	OverviewView	Online enables Start; busy/offline disables it and changes the message
About the Project panel	OverviewView	Mission, Unreal Engine, Global Access, Real-Time content
Who It's For panel	OverviewView	Disabilities, professionals, children, learners content
Compact overview	CompactOverviewView	Applies below 1400px; "More About Project" opens the info panel
Info panel	InfoView	Back-to-demonstration state
Live chat panel	LiveDemoView	Chat input, help overlay, back action

State matrix

State	Trigger	Visible change
overview desktop	≥ 1400px initial	Avatar left; two detail cards right
overview compact	< 1400px initial	Condensed card with a side tab
info	Compact "more" action	Detail content with a back control
live	Live demo flow	Chat surface; message input and help state
online	API config	Start button enabled
busy	API config	Start disabled; capacity message
offline / request fail	API config or failure	Start disabled; fallback message

Figma inspect required

• Avatar image frame, blur amount, border radius, and shadow.
• Exact outer gutters, heading-to-panel gap, columns, and the two panel heights.
• The four information items' grid gap and text styles.
• The exact difference between the large and compact Figma variants.
• Whether the Figma START DEMO state has a disabled appearance for offline — the present product behaviour requires one.

Scene 3 — MVP Demo / Demonstration (#mvpDemo)

Verified visual composition

• The scene is pale blue at the bottom (#E7EFF9) and starts in #7CA4CF.
• A three-item section switch sits above the content: Marketplace, Demonstration/MVP Demo, All Services; arrows occupy fixed left and right slots.
• The supplied canvas shows the Demonstration visual: a broad rounded video card, the AMADEQ logo, a central circular play icon, and a Product Demo caption.

Frontend map

Item key	Current component	Notes
marketplace	LandingMarketplace	The current default tab; has an error/retry state
mvpDemo	MvpDemo	AMADEQ logo + play icon + caption
allService	AllServiceCapabilitiesSection	Four capability rows with planet icons and bullet lists

Important alignment decision

The visible Figma canvas centres the Demonstration card, while the current code defaults to marketplace. Before visual porting, the product owner must confirm whether the default Figma state should become mvpDemo or whether the brand book is documenting a non-default tab. Do not alter it accidentally while adjusting CSS.

Interaction contract

• One tab selected at a time.
• Left and right arrows navigate only within valid bounds; a missing predecessor keeps an empty arrow slot so the tabs stay centred.
• Content replacement uses AnimatePresence; record the Figma animation duration and easing before matching the motion.

Figma inspect required

• Section-switch frame, three tab widths, and arrow hit areas.
• Video card size, radius, fill gradient, play icon/halo, and caption baseline.
• Marketplace and All Services tab variants, including loading and error states.

Scene 4 — Roadmap (#roadMap)

Verified visual composition

• The scene begins almost white-blue (#E6EFF9) and descends to #7CA4CF.
• Navigation titles are placed above: Roadmap centrally, Questions and Uniqueness to the sides, with directional chevrons.
• The centre is a floating milestone card and a dotted elliptical orbit with numbered 3D planets. The captured Figma frame shows Milestone 2 and planets numbered 1–5 around it.

Frontend map and state

Element	Source	Behaviour
Milestone card	MilestoneCard	Contents swap with the selected step
Planet timeline	OrbitSwitch	Six selectable planets; the initial index is 1 (Milestone 2)
Orbit	orbita.svg + CSS	Decorative ellipse / orbital depth
Active planet	PlanetNumber	Full opacity, scale 1, foreground z-index
Neighbouring planets	OrbitSwitch	Scaled, blurred, and dimmed by distance

Depth rules already encoded: distance 1 uses scale .82, distance 2 .60, distance 3 .42, distance 4 .28; blur rises from 0.25px to 2px. These are implementation values to validate against Figma — not a substitute for Figma values.

Figma inspect required

• Central card dimensions, exact card visual, border, and blur.
• Orbit dimensions, dash/stroke, planet sizes, shadows, and numerals.
• Positions of all six milestones and the selection animation timing and easing.
• Whether Questions / Uniqueness / chevrons are active destinations or static labels in the intended prototype.

Scene 5 — Pricing (#pricing)

Verified visual composition

• The gradient moves from #7CA4CF to #2E5E99.
• The title Pricing is centred in the upper area.
• Four equal pricing cards: Explorer, Individual, Founders Edition, and Pro / Organizations.
• The Figma evidence includes a distinct Pricing card active visual for Founders Edition. Active styling is therefore part of the design system, not just a hover effect.

Frontend map

Card / state	Product behaviour
Explorer / free	Activates the free plan for an authenticated user; otherwise redirects to sign-in
Individual / early access	Preserves a pending plan and begins Stripe checkout after auth
Founders Edition	Preserves a pending plan and begins Stripe checkout after auth
Pro / Organizations	Opens the email enquiry flow
Loading	The clicked card disables; the CTA says Redirecting…
Compact layout < 1400px	Shows one card with previous/next controls and progress copy

Figma inspect required

1. Regular versus active card fill gradients, border, radius, shadow, and elevation.
2. Exact card width/height and the four-card gap at 1920px.
3. Typography hierarchy: plan name, tag, price, feature list, supporting copy, CTA.
4. Hover, selected, focus, and disabled/loading states. The visual active cannot be conflated with the payment request's transient loading state.
5. Mobile carousel card geometry and arrow control frames.

Scene 6 — Collaboration & Partners (#collaboration)

Verified visual composition

• The gradient starts at #2E5F98 and ends at #0D2440.
• Main centred heading: Collaboration & Partners.
• The left side contains partners/media groups with round group icons and a Press panel. The Figma screenshot shows three labelled groups (EdTech Media, Partners, Foundations), each with four icon positions.
• The right side contains Contacts & Partnerships copy, press/partnership enquiry information, and a compact collaboration request form.

Frontend form inventory

Field / control	Type	Required	States to preserve
Name	text	yes	Empty, focus, valid, native invalid
Email	email	yes	Empty, focus, valid, invalid
Organization	text	no	Empty, focus, filled
Collaboration type	select	yes	Placeholder, open, selected, invalid
Message	textarea, 4 rows	yes	Empty, focus, filled, invalid
Send	submit	—	Default, hover, focus, submitting/disabled, success/error outcome
Reset	button	—	Default, hover, focus, clears fields
Close	button	—	Desktop collapses the embedded form; the modal closes it

Responsive / modal contract

• Desktop begins with its form open; it can collapse to a Request button.
• The Request control opens a modal on smaller layouts.
• A modal overlay click and Escape close it; opening it locks document body overflow.
• API success resets the fields and shows success feedback; failure retains the submission context and reports an error.

Figma inspect required

• The two-column grid and the main title's vertical anchor.
• Every icon's round 3D visual, icon size, and label-to-icon gap.
• Form container size, rows, field height, radius, fill/stroke, and select arrow.
• The press carousel's actual interaction: the current code renders arrows but does not change the press content; do not imply carousel motion without source data.
• The modal visual and all form component variants.

Scene 7 — Download the Application (#application)

Verified visual composition

• Solid #0D2440 background.
• Centred title: Download the Application.
• The desktop composition has three columns: Desktop Application, Scan the QR Code, and Mobile Application.
• The left column includes Windows and macOS download rows; the middle contains a QR code; the right includes App Store and Google Play rows. The footer area includes legal links, copyright, and circular social icons.

Frontend map

Visual element	Source	Notes
Desktop downloads	DownloadRow with Mac/Microsoft icons	Currently visual buttons; download URLs require product wiring
QR	application-qr.png	Must retain its alt text and exact image crop
Mobile downloads	DownloadRow with Apple/Google icons	Currently visual buttons; store links require product wiring
Legal footer	ApplicationSection links	Terms, Privacy, GDPR routes
Desktop social row	SOCIAL_LINKS	Shows the full source list on desktop
Compact social carousel	ApplicationSection	Five visible icons; arrows disable at the bounds

Figma inspect required

• Exact three-column widths, QR frame, white QR image size, and padding.
• Download-button states and icon bevel treatment.
• Footer baseline, legal column width, social icon sizes and gaps, and social order.
• Compact breakpoint composition, especially what is intentionally omitted.

7. Existing-source index

Area	Primary files
Scene composition + page snap	frontend/src/components/LandingPage/LandingPage.tsx, LandingPage.module.scss
Global tokens	frontend/src/styles/tokens.scss
Announcement / header / hero	frontend/src/sections/PreHeader, Header, Hero
Interactive demo	frontend/src/sections/Demo
Three-tab service scene	frontend/src/sections/Service, components/SectionSwitch, MvpDemo, AllService
Roadmap orbit	frontend/src/sections/RoadMap, components/OrbitSwitch, MilestoneCard, PlanetNumber
Plans	frontend/src/sections/Pricing
Partners / contact form	frontend/src/sections/CollabAndPartner, components/PartnersGroup
Application / downloads / footer	frontend/src/sections/Application, content/socialLinks
Side scene navigation	frontend/src/components/NavBar
Visible copy	frontend/src/locales/uk.json, en.json, de.json, es.json, it.json

8. Pixel-comparison protocol

Use this procedure after each scene is transferred.

1. Set the browser viewport to 1920 × 1080, 100 % browser zoom, and a 1× device scale where possible.
2. Open the matching Figma frame at 100 % and hide the selection outlines.
3. Take a browser capture at the snapped scene top.
4. Overlay the two images at 50 % opacity in an image editor.
5. Fix in this order: scene frame → container/gutter → major card geometry → typography baselines → control geometry → colour/effects → icon alignment.
6. Repeat at the agreed tablet and mobile reference frames. Record the Figma breakpoint rather than inheriting a current CSS breakpoint without review.
7. Exercise every state in §4.3. An exact idle frame is not enough if hover, focus, or disabled states flash a different design.

9. Gaps to resolve before claiming "pixel perfect"

Priority	Gap	Decision / evidence needed
P0	Figma Dev Mode numeric inspection	Node geometry, typography, and styles for all source components
P0	Source asset exports	Earth/globe, avatar, QR, and all locked/raster layers; confirm the original crop and resolution
P0	Default tab in scene 3	marketplace in the current code versus the visible Demonstration canvas
P0	Active pricing card	Whether Founders Edition is a default, hover, focus, or persistent selected state
P1	Prototype motion	Durations and easing for scene controls, tabs, planets, and card changes
P1	Link/product actions	Reserve CTA, desktop/mobile download endpoints, and press carousel behaviour
P1	Exact responsive frames	Desktop/tablet/mobile Figma variants and their breakpoints
P2	Decorative layers	User direction currently removes background images and transitional surfaces; restore only by a new written decision

10. Handoff checklist for the next implementation session

• Confirm the exact Figma node IDs for the seven top-level scene frames.
• Populate the measurement capture sheet for Scene 1 before editing it.
• Export or link every non-code asset at its intended density.
• Turn verified repeated styles into named tokens/components.
• Port one scene at a time, in the order 1 → 7.
• Compare each completed scene at 1920 × 1080 and at the agreed responsive frames.
• Verify keyboard focus, Escape behaviour, disabled states, and reduced motion.
• Run the frontend production build.
• Commit each self-contained visual scene on Vlad with a descriptive message, and leave this dossier updated.

11. Figma Dev Mode capture — desktop source of truth

Captured from the actual Figma file on 2026-07-21. The canonical web page is WEB (Figma page 368:2); every main landing scene below is exactly 1920 × 1080 px. Values in this section override any earlier "Figma inspect required" line for the same desktop element.

11.1 Shared desktop geometry and type recipe

Item	Exact Figma value
Canonical main frame	1920 × 1080 px
Inner scene frame	1792 × 1080 px, padding: 64px; used in scenes 2–6
Standard scene top stack	Outer frame padding: 64px, vertical gap 64px
Scene title	Alexandria Regular, 64px, white linear gradient, text shadow 12px 12px 12px #00000040
Major subheading	Space Grotesk Regular, 40px, #FFF2C2, shadow 2px 2px 4px #00000080
Regular body/copy	Space Grotesk Regular, 16px, 20px, or 24px; white-to-rgba(255,255,255,.66) gradient where light text is used
Card dark copy	Space Grotesk Regular, 20px/24px; #0E2541 → rgba(14,37,65,.66)
Primary action text	Alexandria Medium, normally 32px; #E6B84C for gold, #E7F0FA for light
Default rounded small control	Border radius 32px, horizontal padding 12px, vertical 4px or 8px
Regular card shell	Radius 20px; shadow 16px 16px 24px rgba(0,0,0,.16)
Figma glass treatment	Glass blur 16, Noise 4, plus shadow 16px 16px 24px rgba(0,0,0,.16)
Shared right-side rail graphic	Source visual 164 × 1080 px, placed at the right edge; the web implementation remains an interactive side menu, not a raster image

The Figma frames also contain Upper transition, Down transition, Space 3, Cloud/Mountain backgrounds, and a raster side-navigation treatment. They are intentionally excluded from the live page, because the approved direction is to remove background pictures and intermediate transition layers. Their source geometry is retained only for traceability; do not reintroduce them while making the desktop layout exact.

11.2 Scene 1 — First Screen, node 368:580

Element	Exact desktop Figma specification
Root	1920 × 1080; linear gradient #122942 at top → #2F5E99 at bottom
Heading	Starts at x:64, y:170; Space Grotesk Regular 40px; horizontal padding 64px; Lemon Chiffon; gold text shadow
Description	Starts at x:64, y:259; fixed text width 615px; Space Grotesk Regular 24px; white → rgba(255,255,255,.5) vertical text gradient
Header band	Top 0; source width 1915px; horizontal padding 64px; AMADEQ wordmark frame 550 × 128px
Launch announcement	24px Space Grotesk; padding: 8px 12px; gap 12px; radius 32px; background rgba(255,255,255,.02); 16px 16px 24px rgba(0,0,0,.16) shadow; close icon 18.965px
Counter pill	padding: 8px 12px; radius 28px; the same translucent fill and shadow; values 24px Space Grotesk
Language planet	The central visual is 64 × 64px; its orbit visual is 92.75 × 60.464px
Auth buttons	2px outline, radius 32px, padding 4px 12px, Alexandria Medium 32px; Sign In uses #E6B84C, Sign Up uses #E7F0FA
CTA stack	Centred bottom; container 528px wide, padding-top/bottom: 64px, gap 24px
Live Demo CTA	Content 226 × 32px, padding: 12px, radius 28px; vertical fill rgba(123,164,208,.15) → rgba(210,224,239,.15); light text 32px
Reserve CTA	Full 528px width, padding: 12px, 2px #E6B84C border, radius 28px; vertical fill rgba(201,162,39,.25) → rgba(242,210,122,.25); shadow 0 8px 12px rgba(0,0,0,.16)
CTA microcopy	Text 16px, centred in a 423px box with 64px horizontal padding

Exact source assets: the Earth artwork is an image frame at x:44, y:224, 1834 × 1618px; it is not a CSS-drawn globe. Download the Figma asset before replacing the current equivalent image/scene.

11.3 Scene 2 — Interactive demonstration, node 368:537

Element	Exact desktop Figma specification
Root	#305F9A → #7CA4CF vertical gradient
Scene title	Alexandria Regular 64px; the main content frame is 1920 × 1080, padding: 64px, vertical gap 64px
Primary content row	Full width with padding-inline: 64px, horizontal gap 205px, aligned to the lower edge
Agent card	540 × 762px; 2px #6192C7 stroke; radius 20px; the image is foreground-blurred 12px; inner shadows 12px 24px 12px #00000040 and 24px 48px 24px #00000040; outer glow 0 0 124px 64px rgba(231,240,250,.06)
Start Demo action	360 × 72px; centred on the agent card at vertical centre + 263px; 2px #E6B84C; 36px radius; padding: 12px 16px; text Alexandria Medium 48px; fill rgba(201,162,39,.25) → rgba(242,210,122,.25)
Agent caption	Space Grotesk 24px; white gradient; 12px gap below the card
Textual panels	Artwork backing: About Project 970.431 × 379.5px at (849,231); Who It's For 970 × 353px at (849,663)
About title/copy	Title 40px; description 16px, width 643px; title-to-copy gap 12px
Information grid	Two columns; 24px column and row gap; each item 448 × 128px; heading and body 20px
Who It's For	Title 40px; two columns with a 12px column gap and 24px row gap; each entry 448 × 128px; heading and body 20px

11.4 Scene 3 — MVP Demo, node 4294:1229

Element	Exact desktop Figma specification
Root	#7CA4CF → #E7EFF9 vertical gradient
Tab/navigation bar	1792 × 64px, horizontal padding 128px; arrows are 64px; inactive labels are Alexandria 32px, opacity .5, width 364px; the active "Demonstration" label is Alexandria 64px
Video/demo card	1420 × 824px; radius 20px; padding: 12px; vertical gap 24px; shadow 16px 16px 24px rgba(0,0,0,.16)
Video card fill	#2E5E99 → rgba(187,208,231,.5) at the midpoint → #E6B84C
Logo	550 × 128px
Play control	256 × 256px exported Figma asset
Caption	Space Grotesk Bold 24px, Lemon Chiffon, gold text shadow

The Figma default visual is clearly Demonstration, so the web tab default should change from marketplace to mvpDemo when the scene is ported, unless product explicitly chooses a different launch state.

11.5 Scene 4 — Roadmap, node 4311:2

Element	Exact desktop Figma specification
Root	#E6EFF9 → #7CA4CF vertical gradient
Top switch	1792 × 64px, padding-inline: 128px; side labels 32px at .5 opacity, centre Roadmap 64px, arrows 64px
Orbit artwork	1416 × 460px at absolute scene position (252,482)
Milestone card	640 × 700px; radius 44px; padding 24px 12px; vertical gap 12px; vertical background transparent → rgba(97,146,199,.75) by 25 %; shadow 128px 64px 128px rgba(0,0,0,.08)
Milestone heading	Space Grotesk 40px, Lemon Chiffon, gold text shadow
Milestone content panes	Role pane 200px high; application pane 140px high; radius 20px; inner pale gradient rgba(231,240,250,.25) → transparent; labels 24px; body 20px
Active planet 2	The active/orbit-front asset group is centred in the lower middle around (845,856); numeral 96px
Planet 1 / 3	Major near planets around (413,823) and (1306,823); numerals 96px
Planet 4 / 5 / 6	Distant progression at approximately (1604,659), (1472,528), (1334,497); numerals 64px, 40px, 32px

11.6 Scene 5 — Pricing, nodes 4294:2324 and 4294:2400

Element	Exact desktop Figma specification
Root	#7CA4CF → #2E5E99 vertical gradient
Title row	1792 × 64px, padding-inline: 128px; Alexandria 64px
Cards row	Horizontal gap 32px; the frame has padding-inline: 64px
Regular cards	Explorer 396 × 740px, Individual 396 × 740px, Founders 394 × 740px, Pro 396 × 740px; radius 20px; padding 24px 12px; shadow 16px 16px 24px #00000029
Regular card fill	rgba(97,146,199,0) at 0 %, .45 at 40 %, .5 at 50 %, .45 at 60 %, transparent at 100 %
Regular card internal gaps	Upper stack gap 64px; lower stack gap 32px (51px for the Pro upper stack)
Card type	Plan name Alexandria Light 32px; tag 16px; price/body 24px; CTA 36px; plan heading Lemon Chiffon with gold shadow
Active Founders card	Source component 442 × 788px; radius 20px; padding 24px 12px; fill rgba(187,208,231,.5) → rgba(97,146,199,.25) at 37.022 % → rgba(97,146,199,.5); the normal card shadow plus a glow 0 0 200px rgba(231,240,250,.5)
Active CTA label	"click cart to select", 36px; this is a selected visual state, separate from checkout loading

11.7 Scene 6 — Collaboration & Partners, node 4315:910

Element	Exact desktop Figma specification
Root	#2E5F98 → #0D2440 vertical gradient
Two-column content row	Horizontal gap 64px; each column flexes to half the available inner frame; horizontal column padding 64px; bottom padding 64px
Major section heading	Alexandria 64px; standard 1792 × 64px title row
Left column heading	Space Grotesk 40px; group labels 24px; each icon group has four 96 × 96px round icons with a 24px gap; label-to-icons 12px; groups have a 24px gap
Press presentation	Heading 40px; left/right arrows 64px; central press icon 128px; text width 384px, 24px; internal gap 24px
Contacts headings	Space Grotesk 40px; intro/press copy 16px; contact copy width 630px
Request panel	padding: 24px; radius 36px; vertical fill transparent → rgba(46,94,153,.38) at 44.231 % → transparent; card shadow 16px 16px 24px #00000029
Request title	Space Grotesk 24px, white-grey text gradient; title-to-field gap 12px
Controls	Outer row radius 36px, padding 8px; inner input radius 24px, vertical 2px; white fill; inner shadow 0 4px 4px #00000040; placeholder Space Grotesk Light 24px, Prussian Blue at 50 % opacity
Message field	Label 24px; inner radii 4px 24px 4px 24px (TL, TR, BR, BL order; in CSS notation 4px 24px 24px 4px)
Form buttons	Group gap 24px; 2px, radius 32px buttons; Send gold 32px; Reset light 32px at opacity .5; Close light 32px

11.8 Scene 7 — Download application, node 4315:1069

Element	Exact desktop Figma specification
Root	Solid #0D2440
Main frame	1792 × 1070px, top: 5px, padding: 64px; scene-content gap 70px
Title	Alexandria 64px, the same white gradient and shadow recipe
Three-column row	padding: 32px 64px 0; each column 512px wide and roughly 609px high, distributed across the row
Column headings	Space Grotesk 40px; initial content stack gap 78px
Platform rows	Icon 72 × 72px; icon-to-button gap 24px; rows vertical gap 32px; button padding: 8px 12px, radius 36px, Alexandria Medium 24px
QR	Exact square 266 × 266px; explanatory copy width 354px, 16px, centre aligned
Desktop/Mobile copy	Width 512px; Space Grotesk 16px; white gradient; bullet indentation 24px
Social row	Icons are 96 × 96px, 24px apart; Reddit is 128 × 128px; sequence: TikTok, Telegram, YouTube, Discord, Artstation, Reddit, Instagram, X, LinkedIn, Twitter, Facebook
Legal footer	Source row width 1856px; legal/copyright type 20px; text gradient #BBD0E7 → rgba(187,208,231,.66)

11.9 Active side navigation, node 813:66

Element	Exact desktop Figma specification
Active menu frame	296.019 × 915px; top padding 64px, left 32px
Inactive destination items	Planet visual 64px inside a rotated 90.51px wrapper; label Alexandria Medium 16px; the label offset overlaps the icon by 55px; vertical item gap 21px
Active Main page item	Planet visual 128px inside a 181.019px wrapper; label Alexandria Medium 32px; label overlap 110px
Destinations in source order	Application, Collaboration, Pricing, Roadmap, Demonstration, Interactive, Main page

11.10 Design assets and the safe transfer rule

Figma has now returned exact exportable image/SVG source assets for the Earth, avatar, navigation planets, arrows, logo, video play control, orbit, partner icons, platform icons, social icons, and QR. Those URLs are short-lived. Before the first visual implementation commit, download the selected source assets into the repository and reference local committed files; never leave a temporary Figma URL in production code.

11.11 Source-to-code differences that must be resolved deliberately

Priority	Figma desktop source	Current website	Safe implementation decision
P0	The Earth is a large static Figma image asset	The hero uses a live EarthScene / Three.js globe	Choose the exported Figma Earth for the pixel-perfect desktop route; keep 3D only if it is approved as a later enhancement
P0	All seven source frames include transitions and background artwork	The user explicitly asked to remove them	Retain clean scene gradients with no spacer/transition DOM; this supersedes Figma here
P0	MVP/Demonstration is the visible default	The code default is Marketplace	Set the initial SectionSwitch key to mvpDemo for desktop Figma parity
P0	The selected Pricing card expands to 442 × 788px with a glow	The code has no equivalent persistent selected visual	Add a visual selection state independent of Stripe loading; preserve keyboard and focus semantics
P0	Contact form fields: First name, Last Name, Email, Country, Collaboration Type, Message	The code API/form has name, email, organization, collaboration type, message	Preserve the API by composing first + last into name, and map Country only after product confirms whether it replaces or supplements organization
P1	Auth order is Sign In then Sign Up	The code renders Sign Up then Sign In	Reorder the visual controls without changing routes
P1	The active rail navigation labels run Application → … → Main page, anchored right	The code has seven product ids including mvpDemo and an interactive menu	Keep the real page ids; mirror Figma's 64px/128px control scale and visual ordering only where it does not harm navigation logic
P1	Figma uses source images/SVGs for the globe, avatar, icons, and QR	The code mixes current assets, handwritten SVG components, and generated visual layers	Use Figma exports only where the glyph or image differs; preserve existing exact-matching assets and components
P1	Figma copy is English	The site is localized	Preserve i18n keys and add locale layout tests; do not hard-code English strings to match the screenshot

12. Access status

Figma Dev Mode access is active. The data in section 11 came from direct design-context reads, not estimates from screenshots. The remaining work is implementation and visual comparison — starting with Scene 1 — rather than access recovery.