# Use Cases & Wireframe Showcase Schema: Design Details SECTION.md v3.2 Website: Augustus Source: https://augustus.com/ Source section IDs: gap-65b95702-1722-6406 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The hard switch from a white block with blue line art to a near-black block gives the page a clear chapter break and a strong contrast moment. - A classical building drawn as line art, then rebuilt as a 3D wireframe, carries one architectural idea across both halves and ties directly to the message of stability. - The light block pairs a numbered list with specific customer types, and the dark block puts feature text left and the graphic right, so each half is easy to scan. What a screenshot can't show: - The recording shows only scrolling through the light block (about 10–15s) and into the dark block (about 16–21s), with the wireframe animated; rotation speed and easing are not visible. - No font sizes, spacing or animation timings were measured. Borrow: Use one central metaphor drawn in two styles, a light line-art version and a dark dimensional version, so a colour shift also moves the story forward. Leave alone: Do not copy the classical rotunda, the electric blue on white or the exact wireframe building; make your own drawing that fits your subject. ## Classification - Type: features - Layout: Light block with large line-art building and list, followed by a dark block with 3D wireframe graphic on the right and feature text on the left. - Styles: illustrative, minimal, bold - Confidence: 90% ## Purpose and structure A dual-toned section starting with a light area featuring blue line-art and customer types, transitioning into a dark area with a 3D wireframe building. Visual signature: Transition from white background with blue line art to a dark background featuring a rotating 3D wireframe of a classical rotunda. ## Components - line-art illustration - numbered list - dark mode block - 3D wireframe graphic - feature descriptions ## Typography - Display: ABC Diatype — 140px 700 - Heading: ABC Diatype — 72px 700 - Body: ABC Diatype — 14px 400 - Mono: ABC Diatype Mono — 12px 500 ## Functional palette - Canvas: canvas #FCFCFC - Text: text #121212 - Primary-Action: primary action #0031F5 - Surface: surface #1A1A1A - Border: border #F0F0F0 - Muted-Text: muted text #A8A8A8 ## Motion evidence - 10.0–15.0s — Scrolling through the light section with a line-art building and target audiences. (95% confidence) - 16.0–21.0s — Scrolling into the dark section showing an animated 3D wireframe of a classical building. (95% confidence) ## Section quality Overall: 66.65/100 (Good) Scored coverage: 85% - Typography: 64 — Uppercase bold display headings and mono micro-labels follow the deterministic type system with clear size/weight hierarchy between heading, label, and body text, but the actual type choices are generic bold sans defaults rather than a crafted scale unique to this section. Next tier: Needs more differentiated typographic treatment (e.g. scale variation, mixed weights, or custom type pairing) beyond reusing global heading/label/body styles. - Composition: 73 — The light-to-dark transition paired with a line-art building that morphs into a 3D wireframe rotunda creates a strong architectural throughline; grid alignment, numbered feature lists, and generous negative space support a deliberate narrative structure. Next tier: Composition relies heavily on the wireframe illustration for visual interest; without it the text/list grid is fairly standard two-column feature layout. - Motion: inconclusive — Gemini's motion notes only describe generic scrolling and an 'animated' wireframe without specific timestamped visual changes (rotation speed, easing, reveal sequencing) needed to judge motion quality. Next tier: Requires frame-level description of how the wireframe animates (rotation axis, reveal timing, scroll-linked transforms) to score motion. - Content: 68 — The classical building/rotunda metaphor is directly tied to the banking/institutional messaging ('dollarize the world', federally chartered bank), and the use-case list pairs icons with specific customer segments, giving the content real purpose beyond decoration. Next tier: Supporting body copy is dense and generic fintech language; tighter copy or more visual-text choreography would elevate integration further. - Originality: 72 — Using a rotating 3D wireframe classical rotunda as a metaphor for banking permanence/stability, combined with a light-to-dark sectional shift, is a distinctive concept not reducible to a stock photo or generic icon grid. Next tier: The underlying list+graphic layout pattern itself is common; only the wireframe motif is distinctive, so full landmark originality would need the layout itself to be equally inventive. - Adaptability: 55 — The light/dark block structure, numbered list, and text-left/graphic-right pattern are separable as a skeleton, but the section's identity is heavily tied to the bespoke wireframe building asset, which is not a generic swappable component. Next tier: Clearer separation between structural layout tokens and the custom illustration asset would be needed to prove the pattern transfers without the specific 3D asset. Strengths: - Architectural wireframe metaphor consistently reused across light and dark blocks to reinforce institutional/banking theme - Clear light-to-dark sectional transition that visually signals a shift from audience framing to mission statement - Structured feature list with icon, bold label, and short description improves scannability Weaknesses: - Motion cannot be confidently scored due to vague timestamped descriptions - Typography relies on standard global heading/label/body styles without section-specific differentiation - Heavy dependency on a custom 3D wireframe asset limits how reusable the pattern is without that illustration - Body copy is fairly generic fintech boilerplate language Why it does not reach the next tier: The section's strongest element is the architectural wireframe concept, but the surrounding list/text layout is a familiar two-column feature pattern, type choices are default global styles, and motion evidence is too vague to confirm a dynamic, polished scroll sequence — together these keep it at a solid but not consistently exceptional level. ## Adaptation guidance - Effort: Medium - Guidance: The light/dark block structure and list-plus-graphic layout can be reused with any centerpiece illustration, but achieving the same effect requires commissioning a comparable bespoke wireframe-style graphic rather than a stock asset. What transfers: - Light-to-dark sectional split pattern - Numbered/icon feature list with label + description layout - Large architectural centerpiece graphic paired with left-aligned text column Dependencies: - Custom 3D wireframe rotunda/building illustration asset - Specific blue line-art building illustration for the light block - Brand-specific copy tied to banking/dollarization mission ## 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 state is inconclusive due to lack of specific timestamped animation detail - Cannot verify exact font files, colors, or animation easing beyond supplied deterministic tokens - Assessment based on static crop interpretation of a long scrolling section ## 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: features - Source type: features - Structure: Light block with large line-art building and list, followed by a dark block with 3D wireframe graphic on the right and feature text on the left. - Layout: Light block with large line-art building and list, followed by a dark block with 3D wireframe graphic on the right and feature text on the left. - Styles: illustrative, minimal, bold - Components: line-art illustration, numbered list, dark mode block, 3D wireframe graphic, feature descriptions - Purpose: A dual-toned section starting with a light area featuring blue line-art and customer types, transitioning into a dark area with a 3D wireframe building. - Visual signature: Transition from white background with blue line art to a dark background featuring a rotating 3D wireframe of a classical rotunda. - Place on the page: 5 of 10, after Feature collection (`ccfa90d6-bdbf-49ee-81b3-bbd0b44ce6c9`), before Other (`d4312909-8fe3-4611-ad99-f97dc3f0b723`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. ### 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": "140px", "family": "ABC Diatype", "source": "computed", "traits": "uppercase", "weight": "700", "evidence": "font-2: computed CSS at 1440×1000; AI role: 140px ABC Diatype bold used for the main hero headline.", "sampleId": "font-2", "confidence": 1, "lineHeight": "112px", "letterSpacing": "-7px" }, { "role": "heading", "size": "72px", "family": "ABC Diatype", "source": "computed", "traits": "uppercase", "weight": "700", "evidence": "font-6: computed CSS at 1440×1000; AI role: 72px ABC Diatype bold used for primary section headings like 'THE FINANCIAL STACK'.", "sampleId": "font-6", "confidence": 0.9, "lineHeight": "59px", "letterSpacing": "-2.2px" }, { "role": "body", "size": "14px", "family": "ABC Diatype", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-3: computed CSS at 1440×1000; AI role: 14px ABC Diatype regular used for paragraph text and general descriptions.", "sampleId": "font-3", "confidence": 0.9, "lineHeight": "19.6px", "letterSpacing": "-0.1px" }, { "role": "mono", "size": "12px", "family": "ABC Diatype Mono", "source": "computed", "traits": "uppercase", "weight": "500", "evidence": "font-1: computed CSS at 1440×1000; AI role: 12px ABC Diatype Mono used for metadata like time/location and small label tags.", "sampleId": "font-1", "confidence": 0.95, "lineHeight": "14.4px", "letterSpacing": "0.5px" } ] } ``` ### 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": "#FCFCFC", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(252, 252, 252); AI role: Primary white (#FCFCFC) background for the majority of the page.", "sampleId": "color-1", "confidence": 1 }, { "hex": "#121212", "name": "text", "role": "text", "source": "computed", "evidence": "color-2: computed rgb(18, 18, 18); AI role: Primary black (#121212) used for high-contrast typography and icons on light backgrounds.", "sampleId": "color-2", "confidence": 1 }, { "hex": "#0031F5", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-7: computed rgb(0, 49, 245); AI role: Vibrant blue (#0031F5) used for the announcement bar and key illustrative accents.", "sampleId": "color-7", "confidence": 1 }, { "hex": "#1A1A1A", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-13: computed rgb(26, 26, 26); AI role: Dark grey/black (#1A1A1A) used as the canvas background for inverted sections (e.g., footer, sticky scroll area).", "sampleId": "color-13", "confidence": 0.9 }, { "hex": "#F0F0F0", "name": "border", "role": "border", "source": "computed", "evidence": "color-9: computed rgb(240, 240, 240); AI role: Light grey (#F0F0F0) used for structural grid lines and dividers.", "sampleId": "color-9", "confidence": 0.9 }, { "hex": "#A8A8A8", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-6: computed rgb(168, 168, 168); AI role: Grey (#A8A8A8) used for secondary text or inactive states.", "sampleId": "color-6", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "0px", "density": "Low overall density with significant negative space that emphasizes the massive typography and intricate wireframe graphics.", "evidence": "Measured from sharp edges on the 'Get started' button, visible 1px borders in the 'ACCOUNTS / PAYMENTS' grid, and wide margins in the hero section.", "borderStyle": "Extensive use of thin 1px solid borders in light grey (#F0F0F0 or #E8E8E8) to create visible grid structures and divide content areas.", "buttonStyle": "Solid rectangular blocks with sharp corners for primary CTAs (black background, white text) or minimal text links accompanied by right arrows.", "cornerStyle": "Strictly sharp corners (0px) across all UI elements, including buttons, structural borders, and code blocks.", "contentWidth": "Wide layout that leverages the full viewport, often utilizing a multi-column CSS grid to distribute content.", "spacingRhythm": "Generous macro spacing between distinct sections, with tight, structured padding within grid cells and feature lists." } ``` ### 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. **scroll** — Scrolling through the light section with a line-art building and target audiences. (10s–15s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. 2. **scroll** — Scrolling into the dark section showing an animated 3D wireframe of a classical building. (16s–21s; 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: Light-to-dark sectional split pattern; Numbered/icon feature list with label + description layout; Large architectural centerpiece graphic paired with left-aligned text column - Dependencies: Custom 3D wireframe rotunda/building illustration asset; Specific blue line-art building illustration for the light block; Brand-specific copy tied to banking/dollarization mission - Guidance: The light/dark block structure and list-plus-graphic layout can be reused with any centerpiece illustration, but achieving the same effect requires commissioning a comparable bespoke wireframe-style graphic rather than a stock asset. ### 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 features section inspired by the design evidence titled “Use Cases & Wireframe Showcase”. Purpose: A dual-toned section starting with a light area featuring blue line-art and customer types, transitioning into a dark area with a 3D wireframe building. Structure: Light block with large line-art building and list, followed by a dark block with 3D wireframe graphic on the right and feature text on the left.. Source layout label: Light block with large line-art building and list, followed by a dark block with 3D wireframe graphic on the right and feature text on the left.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. Visual signature to preserve at the pattern level: Transition from white background with blue line art to a dark background featuring a rotating 3D wireframe of a classical rotunda. Components: line-art illustration, numbered list, dark mode block, 3D wireframe graphic, feature descriptions. Style direction: illustrative, minimal, bold. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"140px","family":"ABC Diatype","source":"computed","traits":"uppercase","weight":"700","evidence":"font-2: computed CSS at 1440×1000; AI role: 140px ABC Diatype bold used for the main hero headline.","sampleId":"font-2","confidence":1,"lineHeight":"112px","letterSpacing":"-7px"} {"role":"heading","size":"72px","family":"ABC Diatype","source":"computed","traits":"uppercase","weight":"700","evidence":"font-6: computed CSS at 1440×1000; AI role: 72px ABC Diatype bold used for primary section headings like 'THE FINANCIAL STACK'.","sampleId":"font-6","confidence":0.9,"lineHeight":"59px","letterSpacing":"-2.2px"} {"role":"body","size":"14px","family":"ABC Diatype","source":"computed","traits":"Regular","weight":"400","evidence":"font-3: computed CSS at 1440×1000; AI role: 14px ABC Diatype regular used for paragraph text and general descriptions.","sampleId":"font-3","confidence":0.9,"lineHeight":"19.6px","letterSpacing":"-0.1px"} {"role":"mono","size":"12px","family":"ABC Diatype Mono","source":"computed","traits":"uppercase","weight":"500","evidence":"font-1: computed CSS at 1440×1000; AI role: 12px ABC Diatype Mono used for metadata like time/location and small label tags.","sampleId":"font-1","confidence":0.95,"lineHeight":"14.4px","letterSpacing":"0.5px"} Color evidence: {"hex":"#FCFCFC","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(252, 252, 252); AI role: Primary white (#FCFCFC) background for the majority of the page.","sampleId":"color-1","confidence":1} {"hex":"#121212","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(18, 18, 18); AI role: Primary black (#121212) used for high-contrast typography and icons on light backgrounds.","sampleId":"color-2","confidence":1} {"hex":"#0031F5","name":"primary action","role":"primary-action","source":"computed","evidence":"color-7: computed rgb(0, 49, 245); AI role: Vibrant blue (#0031F5) used for the announcement bar and key illustrative accents.","sampleId":"color-7","confidence":1} {"hex":"#1A1A1A","name":"surface","role":"surface","source":"computed","evidence":"color-13: computed rgb(26, 26, 26); AI role: Dark grey/black (#1A1A1A) used as the canvas background for inverted sections (e.g., footer, sticky scroll area).","sampleId":"color-13","confidence":0.9} {"hex":"#F0F0F0","name":"border","role":"border","source":"computed","evidence":"color-9: computed rgb(240, 240, 240); AI role: Light grey (#F0F0F0) used for structural grid lines and dividers.","sampleId":"color-9","confidence":0.9} {"hex":"#A8A8A8","name":"muted text","role":"muted-text","source":"computed","evidence":"color-6: computed rgb(168, 168, 168); AI role: Grey (#A8A8A8) used for secondary text or inactive states.","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: scroll: Scrolling through the light section with a line-art building and target audiences. (95% confidence) scroll: Scrolling into the dark section showing an animated 3D wireframe of a classical building. (95% confidence) Transfer these principles: Light-to-dark sectional split pattern; Numbered/icon feature list with label + description layout; Large architectural centerpiece graphic paired with left-aligned text column. Dependencies: Custom 3D wireframe rotunda/building illustration asset; Specific blue line-art building illustration for the light block; Brand-specific copy tied to banking/dollarization mission. Adaptation guidance: The light/dark block structure and list-plus-graphic layout can be reused with any centerpiece illustration, but achieving the same effect requires commissioning a comparable bespoke wireframe-style graphic rather than a stock asset. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.