Figma Element Implementation Guard

Purpose

This document is the mandatory implementation and QA gate for every visual element transferred from the AMADEQ Figma source into the live website. It exists to prevent the following failure mode: an element is made to look "similar" from a screenshot, is described as pixel-perfect, and later turns out to have a wrong size, anchor, fill, text, or interaction state.

The source desktop reference frame is 1920 × 1080 px. A value is considered exact only when it comes from Figma Dev Mode, a verified Figma export, or a measurable source screenshot with its scale recorded. A CSS value that merely looks plausible is not a source value.

Non-negotiable rules

1. Work on one named element or one inseparable component group at a time. Example: the Hero CTA stack includes the two buttons and its proof line; the whole hero does not.
2. Create or update that element's passport before changing code.
3. Do not invent a missing Figma value. Mark it BLOCKED — needs Figma inspect and ask for or obtain access to the source instead.
4. Position a component from its parent frame and constraints, not by compensating with a child-only margin or transform.
5. Do not rasterise a Figma frame to imitate the website. Text, controls, hover states, keyboard focus, and routing remain live DOM behaviour.
6. Use the supplied product 3D Earth, not the Figma placeholder Earth, unless the product owner explicitly approves a static replacement.
7. Implement the default state first; then hover, :focus-visible, pressed, disabled, loading (where relevant), and responsive states.
8. A change is accepted only after: the production build passes, the desktop capture is compared at the reference size, and the passport's QA checklist is fully checked.
9. Commit only a self-contained approved element. Commit messages identify that element. All work remains in branch Vlad.
10. If a screenshot and an existing written value disagree, the source Figma node/export wins. The discrepancy must be recorded rather than hidden.

Mandatory element passport

Every new or revised element must record this information. Unknown is allowed; guessed values are not.

Field	Required information
Identity	Figma file URL, page, node ID, layer path, element name, source state
Screen	Reference viewport, device pixel ratio, capture scale, Figma frame bounds
Parent	Parent frame bounds; layout type (absolute / Auto Layout / grid); parent padding, gap, and alignment
Anchor	Left/right/top/bottom/centre relationship, constraints, and exact x/y in the parent
Geometry	x, y, width, height, min/max dimensions, aspect ratio, corner radii, box sizing
Spacing	Internal padding, external margins, sibling gaps, safe-area exceptions
Typography	Family, weight, size, line height, letter spacing, case, fixed/auto text box, wrapping/truncation
Text	Exact source string, locale rule, quotation marks, punctuation, and line-break policy
Fills	Every fill layer, gradient type/angle/stops/opacity, blend mode, backdrop blur
Stroke	Colour, alpha, width, alignment, dash pattern
Effects	Every shadow, blur, glow, opacity, and clipping rule
Layers	z-index/order, whether it overlaps other content, pointer-event policy
Assets	SVG/image/model source, crop, dimensions, export scale, alt text
Behaviour	Click route/action, hover/focus/pressed/disabled/loading state definitions
Responsive	Source frames/breakpoints, reflow rule, what may resize and what must stay fixed
Code map	React component, CSS module, selector, and i18n key
QA evidence	Capture paths, comparison date, reviewer, unresolved differences

Reference coordinate system and size rules

Desktop conversion rule

The desktop source canvas is 1920 × 1080px. At this exact viewport, one Figma pixel equals one browser CSS pixel. The frontend's desktop root scales with font-size: calc(100vw / 192), so the implementation conversion at the reference frame is:

Figma value	CSS used in this project at 1920px	Use
1px	1px	Borders, shadows, exact raster effects
10px	1rem	Scalable layout/typography token
64px	6.4rem	Standard desktop safe inset
128px	12.8rem	Major vertical/header unit
528px	52.8rem	Fixed Hero CTA group width

Never use an arbitrary vw, vh, percentage, transform: translate(), or negative margin to reproduce a known Figma coordinate. The only accepted responsive scaling comes from the approved reference frame, component constraints, or a separately recorded responsive Figma frame.

Safe-zone and anchoring rules

Rule	Exact desktop rule	Allowed exception
Standard content area	x: 64…1856px; usable width 1792px	Full-bleed background/scene layers
Standard lower inset	64px from the scene bottom	A Figma node explicitly attached to the edge
Standard scene title row	Full inner width 1792px, horizontal content inset 64px	First-screen header composition
First-screen header	Source frame has 64px horizontal padding; left brand frame 550 × 128px; three tracks are 550px / flexible centred track / 550px	None without a Figma change
First-screen title	Anchor begins at x:64, y:170px; it is left anchored, never centred	Locale wrapping may add lines only in an approved locale variant
First-screen description	Left anchor x:64, y:259px; fixed source text width 615px	An approved smaller breakpoint
Hero CTA stack	Horizontal centre x:960px; parent width 528px; lower safe relation 64px; internal gap 24px	None
Right navigation rail	Edge layer attached at right:0; source visual width 164px	It deliberately sits outside the normal content safe area
Product 3D Earth	Visual-only layer below interactive content; must not alter CTA/title anchors or pointer events	Its product size/crop is separately approved, not inferred from a Figma placeholder image

For each element, record its anchor as an explicit relationship, for example:

Parent: First Screen (1920 × 1080)
Anchor: horizontal centre, bottom 64px
Bounding box: x=696, y=940, w=528, h=56
Constraint: stays centred; width fixed on desktop; CTA text may not change height

Geometry extraction record

The following must be recorded even for a visually simple button:

Group	Values to extract from Figma
Frame	Absolute x/y, w/h, rotation, clip-content, corner radii for each corner
Auto Layout	Direction, wrapping, primary/counter-axis alignment, gap, padding for all four sides, item sizing mode, min/max dimensions
Constraints	Horizontal and vertical constraint, fixed/scale/left-right/centre, absolute-position flag
Box model	border-box or content-box equivalent; border placement inside/centre/outside; hit area versus visual area
Neighbours	Previous/next sibling, exact gap, baseline alignment, overlap permission
Asset crop	Source bounds, object-fit/object-position, masks, image transform, export dimensions

Typography extraction record

Typography is not complete when only the font size is known. For every text node, record all of the following:

Property	Required detail
Source text	Literal string including quotes, apostrophes, dots, commas, spaces, non-breaking spaces, and line breaks
Locale rule	Fixed source English, translated per locale, or translation with an approved size/line-break variant
Family	Exact Figma font family and its fallback mapping in code
Face	Weight/style, e.g. Alexandria Medium 500 or Space Grotesk Regular 400
Type	Font size, line height, letter spacing, paragraph spacing, text case, decoration
Text box	Fixed width/height or auto; horizontal/vertical alignment; text auto-resize mode
Paint	Solid/gradient text fill, each stop and opacity, stroke, and text-shadow
Overflow	Wrap/clip/ellipsis/visible; allowed number of lines; word-break and hyphenation rule
Baseline	x/y of the text box and the baseline relationship to adjacent controls when Figma supplies it

Material, colour, and effects extraction record

An element's "material" is the complete ordered paint stack, not its visible top colour. Every layer must be recorded in source order.

Material layer	Required Figma data
Fill	Solid/linear/radial/angular/image/video; blend mode; opacity; gradient angle/transform; every stop's position, RGBA/hex, and alpha
Stroke	Style name, hex/RGBA, alpha, weight, inside/centre/outside alignment, dash pattern, cap, and join
Background blur	Backdrop/layer blur radius, clipping frame, blend order, and whether browser support needs a fallback
Shadows	Type (drop/inner), x/y, blur, spread, RGBA, opacity, order, and visibility per state
Glow	Source colour, blur/spread, alpha, blend mode, and whether it is clipped
Opacity	Node opacity and individual-fill opacity; they must not be multiplied accidentally in CSS
Masks	Mask node, invert flag, mask bounds, feather/blur, and image-crop relationship
Blend/isolation	Blend mode, isolation, saturation/luminosity effects, and backdrop relationship
Exported asset	Original filename, frame bounds, export scale/format, colour space, and transparent bounds

Verified source palette

These values are already captured from the Figma style list. They may be used only for an element whose Figma style points to that token; they are not a licence to guess a missing style.

Figma style	Exact colour	Project token
Prussian Blue	#0D2440	--c-prussian
Baltic Blue	#2E5E99	--c-baltic
Cool Horizon	#7BA4D0	--c-cool
Alice Blue	#E7F0FA	--c-alice
Golden Bronze	#C9A227	--c-gold-1
Sunflower Gold	#E6BB4C	--c-gold-2
Jasmine	#F2D27A	--c-gold-3
Lemon Chiffon	#FFF2C2	--c-gold-4

Named Figma styles such as Button Stroke (Light), Button Fill (Light), Button Hover (Light), Button Active (Light), and Button Fill (Accent) must still be opened in Dev Mode. A nearby palette colour is not an exact substitute for a named style.

State and interaction extraction record

For each component, Figma variants/prototype states and code states must map one-to-one where they exist.

State	Mandatory record
Default	Geometry, all material layers, and visible text
Hover	Changed fill/stroke/effect/scale/position; transition duration and easing
Focus-visible	Keyboard ring/outline, offset, contrast, no hidden focus
Pressed	Changed material/translation/scale and active duration
Disabled	Opacity, pointer policy, cursor, explanatory label if present
Loading	Fixed geometry, label/icon substitution, disabled policy
Selected/active	Persistent visual state, separate from a transient click/loading state
Prototype	Click/tap target, destination, scroll/modal behaviour, transition/easing/duration

Comparison evidence and tolerances

A browser screenshot alone is not a pass. The evidence record must contain a Figma export/capture and a browser capture of the same viewport, rendered at the same scale, plus an overlay or difference image.

Check	Acceptance rule
Position	x/y difference ≤ 1px at 1920 × 1080
Dimensions/radius/padding/gap	Difference ≤ 1px unless Figma shows fractional pixels; then preserve the fraction
Font	Family, face, size, line height, letter spacing, and text string must be exact
Gradient	Same type, direction/transform, number/order/position of stops, and each alpha
Stroke/effect	Same colour, alpha, width, alignment, and all shadow/blur values
Layering	No unapproved overlap; the control remains clickable; visual-only layers have pointer-events:none
Responsive	Only uses a recorded Figma breakpoint/constraint; no deformation to force a fit

What is reported before each element change

Before writing code, the implementation report must be shown in this compact form. It makes missing source data visible before it becomes a CSS guess.

Element: [name / state]
Source: [Figma page → node → layer path]
Parent and anchor: [frame; x/y or constraint]
Geometry: [x, y, w, h, padding, gaps, radius]
Typography: [exact string; locale; family/weight/size/line-height/tracking]
Material: [ordered fills; gradient stops; strokes; opacity; blur; shadows]
States/action: [default, hover, focus, pressed, disabled, route]
Responsive rule: [source breakpoint/constraint]
Known source gaps: [BLOCKED entries only]
Code target: [component and selectors]
QA required: [capture/overlay/state tests]

Mandatory deviation-to-rule loop

Whenever an element is not implemented as specified, a user reports a visible difference, a QA check fails, or the implementation cannot be completed, the following loop is mandatory before any work starts on the next element:

1. Record the discrepancy in the log below with a screenshot/export or code evidence.
2. State the source expectation, the actual result, and the real root cause. "It looked close" is not a root cause.
3. Add one concrete prevention rule to this document. The rule must say what is forbidden or required, and at which QA step it is checked.
4. Add the new check to the affected element passport and run it on the corrective change.
5. Only after the corrective capture passes may the next element be selected.

BLOCKED — needs source data is not a failure if it is reported before implementation. It becomes a failure if an unverified value is guessed, implemented, or presented as exact.

Deviation log

Date	Element	Expected vs actual	Root cause	New prevention rule	Required evidence	Status
2026-07-21	Hero CTA stack	The reference has a precise material treatment; the first CSS pass only approximated light-stroke/effect values.	Unverified Figma style values were substituted with plausible CSS and the result was described too strongly.	Never call an element pixel-perfect while any material, geometry, text, or state value is unverified. Mark it BLOCKED in the passport; obtain its Figma value before visual acceptance.	Dev Mode values plus a 1920×1080 Figma/browser overlay	Open — source inspect required
2026-07-21	Hero CTA microcopy	Figma source uses quoted English proof text; the implementation initially used localized asterisk-prefixed text.	The source literal text and locale rule were not checked before coding.	Before editing any text node, record the exact source string, punctuation, and locale rule in the passport; compare the rendered string character for character.	Source text capture and browser capture	Corrected; verify with final overlay
2026-07-21	Hero CTA material	CSS added backdrop blur before the Figma Effects panel was inspected; the source screenshot confirms a Drop Shadow style and shows no backdrop blur.	An unverified glass effect was inferred from appearance.	Do not add backdrop-filter, blur, a blend mode, or a shadow until the matching Figma Effects panel explicitly records it. Remove a non-source material layer as soon as direct inspector evidence contradicts it.	Figma Effects capture and browser capture	Corrected for the Live Demo CTA
2026-07-21	Live Demo CTA angular stroke	The first CSS translation allowed the conic stroke gradient to paint the content surface instead of only the 2px inside stroke.	Multi-layer CSS backgrounds were added without explicit per-layer clipping.	Every CSS translation of a Figma gradient stroke must declare a clip for each paint layer (padding-box for fill, border-box for stroke) and pass a browser capture before it is accepted.	Browser capture confirming fill and stroke are isolated	Corrected; re-capture pending
2026-07-21	Live Demo CTA visual acceptance	The browser rendered a solid grey pill instead of the transparent light CTA seen in Figma, even though the CSS value list and the build were reviewed.	The CSS paint-stack change was checked only by source values and a full-page capture; its control crop was never compared directly against the Figma control crop.	Every changed element must pass a same-size, side-by-side or overlay comparison of its isolated Figma crop and browser crop before hand-off. A successful build, code review, or full-page screenshot is never visual acceptance. If the two crops differ, keep the element open and correct it before touching the next one.	1920×1080 source/browser capture plus isolated CTA crops and the comparison result	Open — corrective crop comparison required
2026-07-21	Live Demo CTA stroke continuity	The browser button had a visibly interrupted outline; the Figma control reads as one closed 2px contour with varying brightness.	The angular gradient's transparent stops were used as the sole stroke paint, so 0% alpha physically removed parts of the border.	An angular or opacity-modulated Figma stroke must never be the only structural outline when the source silhouette is closed. Render a continuous base stroke first, then layer the angular variation above it; inspect all four quadrants of the isolated browser crop for a break.	Browser crop amadeq-live-cta-continuous-stroke-crop.png; final source overlay still required	Corrected in browser crop; final Figma overlay pending
2026-07-21	Live Demo CTA hover	The default contour was repaired, but its hover state lost that contour.	The :hover shorthand box-shadow replaced the complete default shadow list instead of extending it, discarding the structural inset stroke.	Before accepting an interactive element, inspect and render every declared state (default, hover, focus-visible, active, disabled) separately. A state override may not replace a required structural layer unless the corresponding Figma state explicitly removes it.	Figma state records and one browser crop per state	Open — direct Figma state extraction required
2026-07-21	Live Demo CTA source fidelity	A continuous fallback inset stroke was added to hide the angular-gradient gap, but it is not an independently recorded Figma layer.	A browser defect was patched before the source stroke's angular transform and all state styles were fully extracted.	A corrective CSS layer may not be retained as a Figma copy unless it has a matching named Figma layer/style or direct rendered-source evidence. Record it as a fallback, keep the element unaccepted, and obtain the missing source data before claiming fidelity.	Complete Default/Hover Figma style values and a crop comparison	Open — fallback must be replaced or validated

New log-entry template

| YYYY-MM-DD | [element/state] | [source expectation vs actual result] |
| [root cause] | **[new rule]** | [capture/test required] | Open/Corrected/Verified |

Required QA procedure

Before code

• Source node/state selected and recorded.
• Parent frame and anchor are known.
• Text and locale rule are known.
• Fill, stroke, and effects are known, or each missing value is explicitly marked blocked.
• Existing product behaviour that must remain live is listed.

After code

• Desktop capture at 1920 × 1080 produced.
• Element x/y/width/height compared with the source.
• Typography, strings, gradient direction/stops, stroke, and effects compared.
• No overlap with adjacent elements at the source viewport.
• Hover, focus-visible, pressed, and click route tested.
• Responsive behaviour checked at the agreed next viewport.
• pnpm run build passes.
• A commit is created only after the preceding checks pass.

Current passport — Hero CTA stack

Identity and code map

Field	Value
Figma source	Agent brand book → First Screen; desktop frame 1920 × 1080
Component group	Live Demo CTA, Reserve CTA, social-proof line
React	frontend/src/sections/Hero/Hero.section.tsx
Styles	frontend/src/sections/Hero/Hero.section.module.scss
i18n keys	hero.cta.tryDemo, hero.cta.reserveSpot, hero.cta.microcopy
Live actions	Live Demo → /demo; Reserve → /signup

Verified Figma data

Property	Live Demo CTA	Reserve CTA	Social-proof line
Parent	Centred bottom CTA stack, x:696, y:772, 528 × 308px; vertical Auto Layout; centre alignment; 24px gap; horizontal padding 0px; vertical padding 64px; opacity 100%; radius 0; no parent fill/stroke/effect	Same stack	Same stack
Stack spacing	24px	24px to the proof line	—
Bottom relationship	The CTA parent has a 64px bottom inset in the reference scene	Same	Ends within this bottom-safe CTA group
Width	Content box 226 × 32px, plus 12px padding	Full width 528px	423px text box; source notes 64px horizontal padding
Padding	12px	12px	Source needs box-model confirmation: 423px box + 64px horizontal padding
Radius	28px	28px	None
Text	Try Live Demo, light, 32px	Reserve Spot in Closed Beta, gold	"8,247 people already in line · First wave: 1,000 spots", 16px, centred
Border	BLOCKED — the named Figma light-stroke style needs exact inspect values	2px #E6B84C	None
Fill	Vertical: rgba(123,164,208,.15) → rgba(210,224,239,.15)	Vertical: rgba(201,162,39,.25) → rgba(242,210,122,.25)	None
Shadow	BLOCKED — the source style requires inspect	0 8px 12px rgba(0,0,0,.16)	The source visual needs an exact effect inspect

Verified child passport — Live Demo CTA (default)

Group	Direct Figma inspector value
Parent	Hero CTA stack, 528 × 308px; see the parent record above
Relative position	x:139px, y:64px in the parent
Dimensions	250 × 56px
Layout	Auto Layout; horizontal flow; content is centred
Geometry	Opacity 100%; corner radius 28px
Exact string	Try Live Demo
Text colour	Alice Blue (#E7F0FA)
Fill style	Button Fill (light); Linear, style opacity 15%; stop 0% #7BA4D0 @100%; stop 100% #D2E0EF @100%
Stroke style	Button Stroke (Light); Angular, style opacity 100%; Inside, 2px weight; stops: 16% #FFFFFF @0%, 40% #FFFFFF @100%, 65% #F5F9FD @0%, 88% #E7F0FA @100%
Effect style	Button; drop shadow x:0, y:8, blur:12, spread:0, #000000 @16%
Text font metrics	BLOCKED — requires a text-layer Design-panel capture. The existing code uses Alexandria Medium 32px; it must be confirmed rather than assumed.

Source evidence: user-provided Figma inspector captures codex-clipboard-b041a165-…, codex-clipboard-4509e24b-…, codex-clipboard-e6a3751a-…, and codex-clipboard-17be5f92-….

Verified child passport — Reserve CTA (default)

Group	Source value / derived Auto Layout relationship
Parent	Hero CTA stack, 528 × 308px; vertical Auto Layout, 24px gap, 0/64px horizontal/vertical padding
Relative position	x:0px, y:144px = 64 + 56 + 24; it spans the parent cross axis
Dimensions	528 × 56px
Geometry	12px internal padding; radius 28px; no text wrapping at the source desktop frame
Exact string	Reserve Spot in Closed Beta
Text / border	Gold action treatment; border Inside, 2px #E6B84C
Fill	Vertical linear fill: rgba(201,162,39,.25) → rgba(242,210,122,.25)
Effect	Drop shadow x:0, y:8, blur:12, spread:0, #000000 @16%
Text font metrics	BLOCKED — requires its text-layer Design-panel capture. The current code uses Alexandria Medium 32px; it remains unverified.

Source evidence: the direct Figma Dev capture recorded in Pixel-Perfect Handoff (Scene 1 CTA specification), plus the parent Auto Layout inspector capture above.

Verified child passport — social-proof line (default)

Group	Source value / derived Auto Layout relationship
Parent	Hero CTA stack, centre-aligned on the same 528px cross axis
Relative position	y:224px = 144 + 56 + 24; the calculated content height is 20px
Text box	The source capture records a centred 423px text box; the wrapper's cross-axis alignment is centre
Exact string	"8,247 people already in line · First wave: 1,000 spots"
Typography	16px; the source visual treatment is Lemon Chiffon; the current mapping is Space Grotesk Regular
Geometry consequence	56 + 24 + 56 + 24 + 20 + 64 + 64 = 308px; this proves the selected parent height without any arbitrary offset
Fill / stroke / effect	No own fill or stroke recorded; the exact text-shadow source value is BLOCKED
Locale rule	A fixed Figma English proof string for the reference state; it is intentionally identical across localised previews until source locale variants are supplied

Source evidence: the direct Figma Dev capture recorded in Pixel-Perfect Handoff (Scene 1 CTA specification), plus the inspected parent geometry.

Deliberate current implementation status

Item	Status
Parent centre anchor, 528×308 size, 24px gaps, 0/64px padding, and edge attachment	Implemented and browser-captured at 1920×1080
Live Demo CTA geometry, fill stops, angular inside-stroke stops, and shadow	Implemented from a direct Figma inspector capture; gradient rotation and text metrics remain blocked
Reserve geometry, border, radius, fill, and shadow	Implemented from captured Figma data; text metrics remain blocked
Reference proof-line string, line height, and 20px layout slot	Implemented; the exact text-shadow remains blocked
CTA proof-line 423px box model	Implemented as a centred 423px box; the exact internal-padding interpretation is still blocked
Figma placeholder Earth	Intentionally not used; the product 3D Earth is retained by product direction

Source evidence for the parent record: the user-provided Figma Design-panel capture codex-clipboard-bf2c617d-…, captured 2026-07-21. This is direct inspector data, not a visual estimate.

CTA acceptance gate

The Hero CTA stack may be called complete only when the two BLOCKED Figma style / box-model entries above have exact Dev Mode values, the current browser capture is overlaid with the Figma capture at 1920 × 1080, and no visible difference remains in text, outer geometry, fill, stroke, or effect.

Deviation rule — CSS cascade check (2026-07-21)

Observed failure: a desktop spacing declaration for the Hero countdown was written before the shared .center declaration. At the same selector specificity, the later shared rule won, so the timer remained visually under the announcement pill even though the desktop number had been edited.

Mandatory prevention rule: after changing a breakpoint-specific property, inspect every later selector for the same property. The effective desktop rule must either be ordered after the shared styles or have deliberately stronger specificity. A 1920 × 1080 browser screenshot is required before marking the element changed.

Current evidence: amadeq-top-desktop-cascade-fixed.png shows the announcement, timer value, and timer label as three non-overlapping vertical objects. This validates spacing only; it is not a declaration of pixel-perfect Figma parity for typography, material, or horizontal placement.

Source passport — Hero announcement glass (default, desktop)

Figma evidence: codex-clipboard-b42a0dc6-… through codex-clipboard-d35ffc87-…, captured in Figma Dev Mode on 2026-07-21.

Property	Figma value
Frame geometry	620.97 × 47px, hug contents
Position in the selected parent	x: 0, y: 12px
Auto Layout	Horizontal, gap 12px, padding horizontal 12px, vertical 8px, clip content
Radius	32px
Base fill	#FFFFFF at 2%
Effect style	Glass template
Glass controls	Light −45°, light value 80%, refraction 100, depth 50, dispersion 100, frost 16, splay 0
Drop shadow	x:16px, y:16px, blur 24px, spread 0, #000000 at 16%

Browser mapping: backdrop-filter: blur(16px) saturate(180%) brightness(1.08); the directional light is represented by a −45° white highlight layer, and the documented shadow is reproduced exactly in CSS. Figma's refraction, depth, and dispersion are proprietary Glass-effect controls with no one-to-one CSS property, so this must be called a browser material mapping, not a literal effect export. The mapping is used only for the Hero announcement and counter until their own Figma layer passport says otherwise.

QA evidence: amadeq-top-glass-template.png.

Correction — material and close-mark visual gate

The first browser mapping added a directional highlight and colour processing. The paired Figma reference codex-clipboard-8a229a16-… shows that this is visibly wrong: the announcement is clear glass with a thin light rim, not a blue-filled capsule, and its close mark is a large independent ×, not a tiny icon button.

New mandatory rule: when inspector values and a visual Figma reference appear to conflict, inspect the rendered visual result before adding any invented highlight, saturation, or brightness layer. Only retain browser CSS layers that are visible in the reference. Interactive text symbols must not be used as a substitute for a designed icon if its stroke geometry is visible.

Replacement browser evidence: amadeq-top-clear-glass-x.png.

Blank passport template

### [Element name] — [state]

**Identity:** Figma URL / page / node / layer path
**Reference frame:**
**Parent and anchor:**
**Geometry:**
**Spacing:**
**Typography and exact string:**
**Fill / stroke / effects:**
**Layering / assets:**
**Interactive states / route:**
**Responsive contract:**
**Code map:**
**Unknowns / blockers:**
**QA evidence and result:**