# Infrastructure Features & CTA Schema: Design Details SECTION.md v3.2 Website: Augustus Source: https://augustus.com/ Source section IDs: gap-65b95702-7006-10966 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - Each feature pairs a short description and a code block on the left with a soft-shadow dashboard mockup on the right, so every claim is backed by visible product proof. - Strong type contrast between huge bold display headings, small 14px body copy and 12px uppercase mono labels gives a clear hierarchy, with generous whitespace and consistent margins. - A near-white canvas with near-black text and a single saturated blue accent keeps the page calm, and the oversized 'START BUILDING' close with line art gives it a confident ending. What a screenshot can't show: - The recording shows only plain scrolling through the feature list and the CTA, with no distinct reveal, parallax or hover motion. - Exact spacing, section padding and measured type values were not captured, so only the reviewed sizes (about 140px and 72px display, 14px body, 12px mono) are known. Borrow: Place proof next to every claim, such as code beside a matching interface mockup, then finish with one oversized typographic call to action. Leave alone: Do not copy the blue classical-building line art, the 'NOVUS ORDO SECLORUM' flourish or the Augustus marble theme; use your own concept and a free grotesk-style font. ## Classification - Type: features - Layout: Vertical scroll of text with code snippets on the left, corresponding UI mockups on the right. Ends with a large typographic CTA and blue line art. - Styles: minimal, illustrative - Confidence: 90% ## Purpose and structure A vertical scrolling feature list detailing infrastructure with code snippets and UI mockups, culminating in a large typographic call to action. Visual signature: Left side shows feature descriptions and code blocks; right side shows soft shadow UI dashboard mockups, ending with 'START BUILDING'. ## Components - section heading - code snippets - UI mockups - feature descriptions - CTA button - large typographic heading - line-art illustration ## 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 - 23.0–32.0s — Scrolling through the 'BUILT ON MARBLE' infrastructure section, showing code snippets and UI mockups. (95% confidence) - 33.0–47.0s — Reaching the 'START BUILDING' call to action section. (90% confidence) ## Section quality Overall: 64.35/100 (Good) Scored coverage: 85% - Typography: 68 — Strong bold display type with tight tracking and clear hierarchy (140px/72px display vs 14px body, 12px mono labels) creates confident contrast; consistent uppercase treatment for labels and headings reinforces system discipline, though the overall type choices remain a familiar grotesk-driven SaaS pattern. Next tier: To reach strong/memorable the type system would need a more distinctive typographic voice or interplay (e.g. unusual pairing, custom ligatures, kinetic scale shifts) beyond standard large-display + mono-label convention. - Composition: 66 — Clean two-column alternating rhythm (text/code left, mockup right) with generous whitespace and a confident large-type CTA close gives clear structure and pacing; grid alignment and consistent margins show restraint. Next tier: Needs a more surprising spatial idea or asymmetry—the alternating code/mockup pattern is a well-worn SaaS feature-list composition that reads as polished but not inventive. - Motion: inconclusive — Gemini only supplies broad scroll-range descriptions without specific timestamped visual changes (e.g. reveal timing, parallax, hover states), so motion quality cannot be judged. Next tier: Need precise timestamped descriptions of discrete animated events (entrance timing, easing, interaction feedback) to score motion. - Content: 62 — Code snippets paired with matching dashboard mockups directly substantiate the copy claims, giving the content real product-truth integration rather than generic stock imagery. Next tier: Mockups are somewhat generic dashboard chrome; tighter visual connection (e.g. annotated highlighting between code and UI) would push content integration further. - Originality: 60 — The line-art classical building motif at the CTA and 'NOVUS ORDO SECLORUM' flourish inject a distinct conceptual layer atop an otherwise standard feature-list format. Next tier: Beyond the illustration motif, the overall pattern (code-left/UI-right, big CTA type) is common; a landmark score requires the idea to feel structurally unique, not just decoratively unique. - Adaptability: 64 — Clear separable tokens (type scale, border/grid treatment, color roles) and modular alternating block structure make the skin easy to swap while preserving layout logic. Next tier: Full separation is limited by bespoke illustration assets (line-art pediment) and precise mockup imagery that are not abstracted into tokens. Strengths: - Confident large-type hierarchy with tight tracking for headings and CTA - Consistent alternating code/mockup pairing that reinforces product authenticity - Distinctive closing illustration motif tying brand concept to CTA - Clean low-density grid with generous whitespace Weaknesses: - Motion cannot be verified due to lack of specific timestamped detail - Alternating code-left/mockup-right pattern is a common SaaS convention - Dashboard mockups are relatively generic and could be swapped for any fintech product Why it does not reach the next tier: The section is well-executed and tidy but relies on a familiar feature-list composition; without a more inventive structural idea or verified motion craft, it stays in the good/polished range rather than strong/memorable. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the alternating code/mockup block grid and the large-type CTA closer as a template; swap illustration and mockups per brand while keeping typographic scale ratios and spacing rhythm. What transfers: - Alternating text/code-left, mockup-right block structure - Large uppercase display type system with tight letter-spacing - Section-ending large-type CTA with illustrative accent Dependencies: - Custom line-art illustration asset - Specific dashboard UI mockup imagery - Proprietary color accent (#0031F5) tied to brand ## 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%) - No specific timestamped motion detail provided, so animation quality is unverified - Cannot confirm exact color or spacing values beyond provided tokens - Mockup fidelity and interaction detail not fully visible in static crop ## 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: Vertical scroll of text with code snippets on the left, corresponding UI mockups on the right. Ends with a large typographic CTA and blue line art. - Layout: Vertical scroll of text with code snippets on the left, corresponding UI mockups on the right. Ends with a large typographic CTA and blue line art. - Styles: minimal, illustrative - Components: section heading, code snippets, UI mockups, feature descriptions, CTA button, large typographic heading, line-art illustration - Purpose: A vertical scrolling feature list detailing infrastructure with code snippets and UI mockups, culminating in a large typographic call to action. - Visual signature: Left side shows feature descriptions and code blocks; right side shows soft shadow UI dashboard mockups, ending with 'START BUILDING'. - Place on the page: 8 of 10, after Testimonials (`augustus-com:testimonials-minimal-quote`), before Call to action (`f5a93569-93ac-4e13-b1e8-9d60eb426ef6`) ### 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 'BUILT ON MARBLE' infrastructure section, showing code snippets and UI mockups. (23s–32s; 95% confidence). Recreate the interaction principle with project-appropriate timing and easing; the evidence does not guarantee source easing values. 2. **observed sequence** — Reaching the 'START BUILDING' call to action section. (33s–47s; 90% 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: Alternating text/code-left, mockup-right block structure; Large uppercase display type system with tight letter-spacing; Section-ending large-type CTA with illustrative accent - Dependencies: Custom line-art illustration asset; Specific dashboard UI mockup imagery; Proprietary color accent (#0031F5) tied to brand - Guidance: Reuse the alternating code/mockup block grid and the large-type CTA closer as a template; swap illustration and mockups per brand while keeping typographic scale ratios and spacing rhythm. ### 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 “Infrastructure Features & CTA”. Purpose: A vertical scrolling feature list detailing infrastructure with code snippets and UI mockups, culminating in a large typographic call to action. Structure: Vertical scroll of text with code snippets on the left, corresponding UI mockups on the right. Ends with a large typographic CTA and blue line art.. Source layout label: Vertical scroll of text with code snippets on the left, corresponding UI mockups on the right. Ends with a large typographic CTA and blue line art.. Preserve the documented hierarchy and relationships; exact measurements were not deterministically captured. Visual signature to preserve at the pattern level: Left side shows feature descriptions and code blocks; right side shows soft shadow UI dashboard mockups, ending with 'START BUILDING'. Components: section heading, code snippets, UI mockups, feature descriptions, CTA button, large typographic heading, line-art illustration. Style direction: minimal, illustrative. 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 'BUILT ON MARBLE' infrastructure section, showing code snippets and UI mockups. (95% confidence) observed sequence: Reaching the 'START BUILDING' call to action section. (90% confidence) Transfer these principles: Alternating text/code-left, mockup-right block structure; Large uppercase display type system with tight letter-spacing; Section-ending large-type CTA with illustrative accent. Dependencies: Custom line-art illustration asset; Specific dashboard UI mockup imagery; Proprietary color accent (#0031F5) tied to brand. Adaptation guidance: Reuse the alternating code/mockup block grid and the large-type CTA closer as a template; swap illustration and mockups per brand while keeping typographic scale ratios and spacing rhythm. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.