# Large typography quote with rotating 3D coin Schema: Design Details SECTION.md v3.2 Website: Vero Source: https://verostudio.com/ Source section IDs: gap-9289aee7-12820-14804 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Oversized uppercase serif lines in near-black on a warm off-white canvas make the quote the whole composition, with line breaks that set a poetic rhythm. - The dark metallic coin is the only object in the section, so it gets attention and ties the lines together without extra decoration. - A small italic attribution and a quiet CTA after open space give a clear two-beat rhythm: statement, then invitation. What a screenshot can't show: - The coin rotates continuously on its vertical axis while travelling down through the text, seen between 39 and 46 seconds of the recording. - The recording gave no measured type or spacing, so the 168px size is from the review and not confirmed. Borrow: Let one physical object move through an oversized text block so the scroll reads as a story, then end on a small, calm call to action. Leave alone: Do not copy the Vero-engraved coin, the Louize Display serif or the stock literary quote; use a free high-contrast serif such as Playfair Display and your own object and copy. ## Classification - Type: editorial - Layout: Centered, oversized text block taking up the majority of the viewport, followed by a small centered CTA. - Styles: typographic, minimal, bold - Confidence: 95% ## Purpose and structure A bold typography section displaying a large quote, intertwined with a scrolling 3D coin animation, ending in a clean call to action. Visual signature: Massive black serif text on a light background with a contrasting dark metallic coin floating through it. ## Components - oversized typography - 3D coin - call to action ## Typography - Display: Louize Display — 168px 400 - Heading: Louize Display — 120px 400 - Body: Louize Display — 18px 400 - Mono: Louize Display — 15px 400 ## Functional palette - Text: text #181615 - Canvas: canvas #F3F0ED - Surface: surface #FFFFFF ## Motion evidence - 39.0–46.0s — A dark, metallic coin with 'VERO' engraved on it rotates continuously on its vertical axis as it moves down the screen through large text. (95% confidence) ## Section quality Overall: 68.65/100 (Good) Scored coverage: 100% - Typography: 74 — Oversized Louize Display serif at 168px uppercase, with unjustified line breaks creating a poetic rhythm, paired with a small italic attribution and contrasting sans-serif CTA copy. The scale contrast and restraint show deliberate editorial control, though the quote itself is a stock literary excerpt rather than bespoke copy. Next tier: Would need more inventive typographic treatment (e.g. varied weights, kerning play, or custom ligatures) beyond simple oversized uppercase serif to earn higher distinction. - Composition: 72 — Full-bleed, cropped-edge text block bleeding off both sides creates scale and tension, with the coin object interrupting the grid at two points to tie the quote lines together. Generous negative space before the CTA creates a clear two-beat rhythm (statement, then invitation). The off-center coin placement breaks monotony of the centered block. Next tier: The coin's interruption points feel somewhat arbitrary relative to the text meaning; tighter integration between object placement and specific words would push this further. - Motion: 68 — Gemini supplies a specific timestamped motion moment: a dark metallic coin engraved 'VERO' rotates on its vertical axis while traveling down through the text block (39-46s). This is a controlled, purposeful motion tying the physical coin motif to the scroll-driven narrative. Next tier: Only a single sustained motion behavior is described; no evidence of secondary motion (text reveal, parallax on type, easing detail) that would elevate it to a more orchestrated sequence. - Content: 65 — The literary quote and coin object connect thematically to a value proposition around 'crafting' and commissioned objects, and the CTA to 'start your commission' closes the narrative loop cleanly. Next tier: The quote is borrowed from an external poet rather than an original brand voice, which caps how distinctly branded the content feels. - Originality: 68 — Combining a rotating 3D coin object physically weaving through oversized text lines is an uncommon device, giving the section a distinct identity beyond typical large-quote sections. Next tier: The underlying format (giant serif quote + CTA) is a familiar editorial pattern; only the coin intervention differentiates it, limiting how far originality can be pushed without further unique devices. - Adaptability: 62 — The structure (text grid, floating object, CTA) is clearly separable: typography system, coin asset, and CTA button are distinct layers per the deterministic tokens (sharp corners, generous whitespace, specific font family/size). Next tier: Reliance on the specific engraved coin asset and its scroll-synced rotation path makes exact replication dependent on a proprietary 3D asset, limiting template-level portability. Strengths: - Oversized serif type with intentional line breaks creates strong visual rhythm - Coin motif physically threading through the text ties the object to the quote's meaning - Clear two-stage structure: bold quote statement followed by restrained CTA - Full-bleed cropped text edges amplify scale and confidence Weaknesses: - Quote content is borrowed literary text, not bespoke brand copy - Coin interruption placement feels loosely tied to specific words rather than meaning-driven - Single described motion behavior limits perceived sophistication of the sequence - CTA treatment is comparatively plain next to the dramatic typographic display Why it does not reach the next tier: The section relies on one strong device (the rotating coin through text) without a second layer of surprise or refinement in motion, copy originality, or typographic treatment that would push it into exceptional territory. ## Adaptation guidance - Effort: Medium - Guidance: Recreate the grid/typography skeleton and swap in a different floating 3D or 2D object relevant to the new brand; the scroll-linked rotation behavior and object geometry will need bespoke rebuilding since they are asset-specific. What transfers: - Oversized serif quote-grid layout with line breaks - Object-through-text scroll interruption concept - Two-stage quote-then-CTA structure Dependencies: - Custom 3D coin asset and its rotation/scroll animation - Louize Display typeface license - Specific quote and attribution content ## Living vocabulary - No reusable vocabulary candidates were supported by this section. Only terms with status `active` enter the public taxonomy. Deferred and proposed terms remain available to later AI passes; rejected terms remain as provenance so they are not repeatedly reinvented. ## Provenance and limitations - Section boundaries and naming: Gemini Pro visual observation - Motion observations: Gemini Pro direct-video analysis - Quality judgment: Claude - Exact design facts: browser/CSS extraction at website scope - Rubric: Design Details section rubric 3.2 (Typography 20%, Composition 20%, Motion 15%, Content 15%, Originality 15%, Adaptability 15%) - Motion scored only from one timestamped moment; full scroll-trigger sequence and easing unknown - No visible evidence of hover or CTA interaction states - Cannot confirm exact responsive behavior of text at non-desktop breakpoints ## Usage guidance Use this section as design evidence. Create an original implementation; do not reproduce the source copy, assets, or proprietary composition exactly. ## Build blueprint v3.2 ### Purpose and classification - Canonical type: editorial - Source type: editorial - Structure: centered single-column - Layout: Centered, oversized text block taking up the majority of the viewport, followed by a small centered CTA. - Styles: typographic, minimal, bold - Components: oversized typography, 3D coin, call to action - Purpose: A bold typography section displaying a large quote, intertwined with a scrolling 3D coin animation, ending in a clean call to action. - Visual signature: Massive black serif text on a light background with a contrasting dark metallic coin floating through it. - Place on the page: 11 of 13, after Gallery (`verostudio-com:C05`), before Call to action (`9204e620-08bb-4b01-b067-a1621e0460a4`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content. ### Exact typography evidence The sectionScale values were measured inside this crop. The siteRoles values explain how those faces function across the source website; they must not replace section measurements. ```json { "sectionScale": [], "siteRoles": [ { "role": "display", "size": "168px", "family": "Louize Display", "source": "computed", "traits": "uppercase", "weight": "400", "evidence": "font-13: computed CSS at 1440×1000; AI role: Louize Display used at 168px uppercase for massive artistic text statements like 'I HELD A MOMENT'.", "sampleId": "font-13", "confidence": 1, "lineHeight": "168px", "letterSpacing": "normal" }, { "role": "heading", "size": "120px", "family": "Louize Display", "source": "computed", "traits": "uppercase", "weight": "400", "evidence": "font-11: computed CSS at 1440×1000; AI role: Louize Display used at 120px for large section headings like 'INNOVATION'.", "sampleId": "font-11", "confidence": 0.95, "lineHeight": "120px", "letterSpacing": "normal" }, { "role": "body", "size": "18px", "family": "Louize Display", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-4: computed CSS at 1440×1000; AI role: Louize Display at 18px used for standard paragraph text detailing the process.", "sampleId": "font-4", "confidence": 0.9, "lineHeight": "27px", "letterSpacing": "0.4px" }, { "role": "mono", "size": "15px", "family": "Louize Display", "source": "computed", "traits": "uppercase", "weight": "400", "evidence": "font-10: computed CSS at 1440×1000; AI role: Louize Display at 15px uppercase with wide tracking used for smaller UI labels like 'Menu'.", "sampleId": "font-10", "confidence": 0.8, "lineHeight": "15px", "letterSpacing": "0.9px" } ] } ``` ### Exact color evidence The section samples record where each computed value was used. Functional roles come from the website-level classifier and remain separate. ```json { "sectionUsage": [], "functionalPalette": [ { "hex": "#181615", "name": "text", "role": "text", "source": "computed", "evidence": "color-1: computed rgb(24, 22, 21); AI role: #181615 (near black) used extensively for primary text elements across the light backgrounds.", "sampleId": "color-1", "confidence": 1 }, { "hex": "#F3F0ED", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-2: computed rgb(243, 240, 237); AI role: #F3F0ED used as the primary background color for most of the site, providing a warm, stone-like neutral canvas.", "sampleId": "color-2", "confidence": 0.95 }, { "hex": "#FFFFFF", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-6: computed rgb(255, 255, 255); AI role: #FFFFFF used sparingly, possibly for some button backgrounds or image frames.", "sampleId": "color-6", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "0px or minimal radius throughout the primary UI components.", "density": "Low density; highly breathable layout.", "evidence": "Visual observation of padding around text blocks (e.g., the 'so THAT YOU BECOME ART' section), sharp edges on the gallery images, and full-width carousel stripes.", "borderStyle": "Thin, subtle borders used primarily for structural separation in the footer or form inputs.", "buttonStyle": "Solid, rectangular shapes with uppercase tracked-out text.", "cornerStyle": "Sharp, square corners on buttons and image crops, reinforcing the minimal/editorial feel.", "contentWidth": "Full-bleed imagery mixed with tightly constrained, centered text blocks.", "spacingRhythm": "Generous use of vertical and horizontal whitespace, creating a slow, deliberate scrolling experience." } ``` ### Reconstruction specification This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions. - Root container was not deterministically isolated. - Layout containers: 0; cards/surfaces: 0; media elements: 0; browser animations: 0. #### Container, grid, and spacing ```json { "viewport": { "width": null, "captureBounds": null }, "container": null, "spacing": { "observedGapsPx": [], "representativeContentWidthsPx": [] }, "columns": [] } ``` #### Cards and surfaces ```json { "cards": [], "surfaces": null } ``` #### Media treatment ```json [] ``` #### Browser-exposed animation parameters ```json [] ``` ### Measured geometry, surfaces, media, and animation These raw values come from the saved element map and computed styles. Empty arrays mean the fact was not captured; they are not permission to invent source values. ```json null ``` ### Observed motion 1. **observed sequence** — A dark, metallic coin with 'VERO' engraved on it rotates continuously on its vertical axis as it moves down the screen through large text. (39s–46s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. The browser animation records above are deterministic parameters captured from active browser animations. The timestamped observations describe what Gemini saw in the video. Treat them as complementary evidence. When either source is empty or they conflict, state the uncertainty instead of inventing timing or easing. ### Responsive contract - Measured viewport: unknownpx wide. - Mobile/tablet values: not measured by this section evidence unless a separate capture is explicitly listed. - Preserve hierarchy and sequence; collapse simultaneous columns only where needed, maintain media aspect ratios, and verify touch targets and text wrapping at target breakpoints. ### Structure versus visual skin - Preserve: content hierarchy, layout relationships, section rhythm, interaction purpose. - Adapt: brand colors, font family, copy, imagery, icons, decorative details. - Rule: Preserve the observed design logic while creating original branding, copy, assets, and implementation details. ### Adaptation and dependencies - Effort: medium - What transfers: Oversized serif quote-grid layout with line breaks; Object-through-text scroll interruption concept; Two-stage quote-then-CTA structure - Dependencies: Custom 3D coin asset and its rotation/scroll animation; Louize Display typeface license; Specific quote and attribution content - Guidance: Recreate the grid/typography skeleton and swap in a different floating 3D or 2D object relevant to the new brand; the scroll-linked rotation behavior and object geometry will need bespoke rebuilding since they are asset-specific. ### Evidence readiness - Coverage: 4/7 - Can build: Yes - Missing facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters - Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters. ### Agent implementation prompt Create an original editorial section inspired by the design evidence titled “Large typography quote with rotating 3D coin”. Purpose: A bold typography section displaying a large quote, intertwined with a scrolling 3D coin animation, ending in a clean call to action. Structure: centered single-column. Source layout label: Centered, oversized text block taking up the majority of the viewport, followed by a small centered CTA.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content. Visual signature to preserve at the pattern level: Massive black serif text on a light background with a contrasting dark metallic coin floating through it. Components: oversized typography, 3D coin, call to action. Style direction: typographic, minimal, bold. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"168px","family":"Louize Display","source":"computed","traits":"uppercase","weight":"400","evidence":"font-13: computed CSS at 1440×1000; AI role: Louize Display used at 168px uppercase for massive artistic text statements like 'I HELD A MOMENT'.","sampleId":"font-13","confidence":1,"lineHeight":"168px","letterSpacing":"normal"} {"role":"heading","size":"120px","family":"Louize Display","source":"computed","traits":"uppercase","weight":"400","evidence":"font-11: computed CSS at 1440×1000; AI role: Louize Display used at 120px for large section headings like 'INNOVATION'.","sampleId":"font-11","confidence":0.95,"lineHeight":"120px","letterSpacing":"normal"} {"role":"body","size":"18px","family":"Louize Display","source":"computed","traits":"Regular","weight":"400","evidence":"font-4: computed CSS at 1440×1000; AI role: Louize Display at 18px used for standard paragraph text detailing the process.","sampleId":"font-4","confidence":0.9,"lineHeight":"27px","letterSpacing":"0.4px"} {"role":"mono","size":"15px","family":"Louize Display","source":"computed","traits":"uppercase","weight":"400","evidence":"font-10: computed CSS at 1440×1000; AI role: Louize Display at 15px uppercase with wide tracking used for smaller UI labels like 'Menu'.","sampleId":"font-10","confidence":0.8,"lineHeight":"15px","letterSpacing":"0.9px"} Color evidence: {"hex":"#181615","name":"text","role":"text","source":"computed","evidence":"color-1: computed rgb(24, 22, 21); AI role: #181615 (near black) used extensively for primary text elements across the light backgrounds.","sampleId":"color-1","confidence":1} {"hex":"#F3F0ED","name":"canvas","role":"canvas","source":"computed","evidence":"color-2: computed rgb(243, 240, 237); AI role: #F3F0ED used as the primary background color for most of the site, providing a warm, stone-like neutral canvas.","sampleId":"color-2","confidence":0.95} {"hex":"#FFFFFF","name":"surface","role":"surface","source":"computed","evidence":"color-6: computed rgb(255, 255, 255); AI role: #FFFFFF used sparingly, possibly for some button backgrounds or image frames.","sampleId":"color-6","confidence":0.8} No section-bounded typography samples were measured. No section-bounded color samples were measured. No saved element-map measurements were available; do not invent exact source spacing, card, media, or animation values. Motion evidence: observed sequence: A dark, metallic coin with 'VERO' engraved on it rotates continuously on its vertical axis as it moves down the screen through large text. (95% confidence) Transfer these principles: Oversized serif quote-grid layout with line breaks; Object-through-text scroll interruption concept; Two-stage quote-then-CTA structure. Dependencies: Custom 3D coin asset and its rotation/scroll animation; Louize Display typeface license; Specific quote and attribution content. Adaptation guidance: Recreate the grid/typography skeleton and swap in a different floating 3D or 2D object relevant to the new brand; the scroll-linked rotation behavior and object geometry will need bespoke rebuilding since they are asset-specific. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.