# Blog List and Pattern CTA Schema: Design Details SECTION.md v3.2 Website: Hone Source: https://hone.com/ Source section IDs: gap-7c42e3fc-10218-11569 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The article list is a clean table: title, author, date and read time sit in aligned columns, separated by thin dividers, so it scans quickly. - A muted gray heading with black titles on white gives a clear hierarchy using only tone, with no extra type tricks. - The jump from white list to a full-width dark circle-pattern block gives a clear pause, and the pale green button is the only bright accent for the CTA. What a screenshot can't show: - The recording shows the page reaching the bottom around 35–46 seconds, revealing the pattern, the 'Start Your Engines' button and the footer; no specific reveal motion, easing or timing was captured. - No font sizes, spacing or padding were measured, so exact scale and rhythm are unknown. Borrow: Follow a quiet, tabular content list with one bold textured block that holds a single action, so the contrast itself signals the shift. Leave alone: Don't copy the dark teal canvas, the lime-green button, the circle-dot pattern or the 'Start Your Engines' line; build your own texture and voice. ## Classification - Type: editorial - Layout: A simple list of links above a full-width repeating pattern background. - Styles: minimal, geometric - Confidence: 90% ## Purpose and structure A section featuring a list of articles followed by a large geometric pattern block containing a call-to-action. Visual signature: A distinct transition from a clean list of articles into a dense, repeating circular pattern background. ## Components - article list - reading time labels - repeating pattern background - call to action button ## Typography - Display: FT Aktual-13a0b0149837d76d — 119.8px 400 - Heading: FT Aktual-13a0b0149837d76d — 48px 400 - Body: FT Aktual-13a0b0149837d76d — 16px 400 ## Functional palette - Text: text #000000 - Primary-Action: primary action #BCF891 - Canvas: canvas #001115 - Text: text #FFFFFF - Canvas: canvas #FFFFFF - Surface: surface #CEE4E2 ## Motion evidence - 35.0–46.0s — The page reaches the bottom, revealing a pattern background with a 'Start Your Engines' button and a footer section containing a contact form and links. (95% confidence) ## Section quality Overall: 59.94/100 (Competent) Scored coverage: 85% - Typography: 58 — Simple tabular list typography with muted gray heading, black titles, and right-aligned metadata columns; clean and legible but conventional, no distinctive type pairing or scale contrast beyond basic hierarchy. Next tier: Needs a more deliberate type hierarchy or scale shift between heading and list items to feel considered rather than default. - Composition: 61 — Article list uses clear column alignment and thin dividers; the transition into a large dot-pattern field creates a deliberate visual pause, but the crop shows an enormous expanse of empty pattern before any CTA content appears, undermining balance and focal clarity. Next tier: The CTA content needs to resolve closer to the pattern's start so the composition reads as intentional rather than an empty gap before payoff. - Motion: inconclusive — Only a generic scroll-reveal note is provided; no specific motion parameters (easing, fade, translate) are given for how the list or pattern background behaves. Next tier: Needs timestamped detail on how the pattern or CTA button animates into view to assess polish. - Content: 60 — List items pair title, author, date, and read time in a consistent tabular format; functional, legible, standard blog-index convention. Next tier: Lacks any visual differentiation (thumbnails, category tags, excerpt) that would elevate the list beyond a plain text table. - Originality: 56 — The dotted/circular background pattern is a distinct textural choice, but repeating circle-grid backgrounds are a common decorative motif in SaaS design and not inherently novel here. Next tier: Needs a pattern or transition treatment that ties more specifically to brand concept rather than a generic geometric texture. - Adaptability: 65 — The list structure (title/author/date/duration columns) and the pattern-block CTA are clearly separable layout modules with distinct skins, making the structural logic easy to isolate from visual styling. Next tier: Would need confirmation that CTA button and footer components beneath the pattern are equally modular to raise confidence further. Strengths: - Clean tabular alignment of article metadata with consistent spacing - Clear visual separation between list content and pattern-based CTA zone - Thin divider lines maintain a restrained, technical aesthetic consistent with site's grid language Weaknesses: - Pattern area occupies excessive vertical space with little content, weakening pacing - CTA button and supporting text are cut off/obscured in the crop, making the section's climax unclear - Typography lacks hierarchy drama beyond a muted label and plain list rows - Originality relies on a common repeating-dot background texture Why it does not reach the next tier: The section performs its functional job (list + CTA transition) competently but lacks a distinctive typographic or compositional idea strong enough to feel memorable; the large uninterrupted pattern void and generic texture keep it from strong/memorable territory. ## Adaptation guidance - Effort: Low - Guidance: Reuse the list-row grid and divider logic directly; swap the background pattern and CTA copy for the new brand, keeping the proportion of list height to pattern height tighter than shown here to avoid dead space. What transfers: - Tabular article list layout with title/author/date/duration columns - Separation of list section from a pattern-backed CTA block - Thin-line divider system between rows and sections Dependencies: - Specific dot/circle pattern asset and its tonal scale - Exact CTA copy and button placement within the pattern field - Brand accent color used for CTA elements ## 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%) - Crop may truncate the actual CTA button and footer content, limiting assessment of the section's full visual payoff - Motion description lacks animation specifics needed to score motion axis - No visible completed CTA text or button in the provided image to judge content pairing ## 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: full-bleed - Layout: A simple list of links above a full-width repeating pattern background. - Styles: minimal, geometric - Components: article list, reading time labels, repeating pattern background, call to action button - Purpose: A section featuring a list of articles followed by a large geometric pattern block containing a call-to-action. - Visual signature: A distinct transition from a clean list of articles into a dense, repeating circular pattern background. - Place on the page: 10 of 10, after Feature collection (`hone-com:enterprise_scale_grid`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Let the primary media establish the section boundary and protect legibility with controlled overlays. ### 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": "119.8px", "family": "FT Aktual-13a0b0149837d76d", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-3: computed CSS at 1440×1000; AI role: Large 119.8px FT Aktual used for major section items like 'Revenue', 'Procurement'.", "sampleId": "font-3", "confidence": 0.9, "lineHeight": "124.6px", "letterSpacing": "-1.2px" }, { "role": "heading", "size": "48px", "family": "FT Aktual-13a0b0149837d76d", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-6: computed CSS at 1440×1000; AI role: 48px FT Aktual used for primary page heading 'AI Engines that own outcomes'.", "sampleId": "font-6", "confidence": 0.95, "lineHeight": "49.9px", "letterSpacing": "-0.5px" }, { "role": "body", "size": "16px", "family": "FT Aktual-13a0b0149837d76d", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-8: computed CSS at 1440×1000; AI role: 16px FT Aktual used for standard paragraph text like 'Engines are persistent agents...' and testimonials.", "sampleId": "font-8", "confidence": 0.9, "lineHeight": "20px", "letterSpacing": "-0.2px" } ] } ``` ### 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": "#000000", "name": "text", "role": "text", "source": "computed", "evidence": "color-3: computed rgb(0, 0, 0); AI role: Black (#000000) used for primary text on white and pale backgrounds.", "sampleId": "color-3", "confidence": 0.95 }, { "hex": "#BCF891", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-5: computed rgb(188, 248, 145); AI role: Bright green (#BCF891) used for primary 'Book a demo' buttons, text highlights, and key visual accents.", "sampleId": "color-5", "confidence": 0.95 }, { "hex": "#001115", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-2: computed rgb(0, 17, 21); AI role: Deep black/green (#001115) used as the primary dark background for the hero and outcome sections.", "sampleId": "color-2", "confidence": 0.85 }, { "hex": "#FFFFFF", "name": "text", "role": "text", "source": "computed", "evidence": "color-4: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for text on the dark canvas sections.", "sampleId": "color-4", "confidence": 0.85 }, { "hex": "#FFFFFF", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-4: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used extensively as the background for the middle feature and detail sections.", "sampleId": "color-4", "confidence": 0.8 }, { "hex": "#CEE4E2", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-1: computed rgb(206, 228, 226); AI role: Pale blue-green (#CEE4E2) used as a surface color for testimonial cards and the announcement bar.", "sampleId": "color-1", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "0px or none evident; elements maintain sharp edges.", "density": "Low density. The layout embraces substantial negative space to draw focus to large typography and isolated graphical elements.", "evidence": "Observed sharp corners on the green CTA buttons, thin border lines dividing the '01', '02' numbered sections, and the wide spacing in the 'What's under the hood' feature grid.", "borderStyle": "Thin, solid black or white borders (1px) are used extensively to define grids, create dividing lines between sections, and separate list items.", "buttonStyle": "Solid fill rectangles with sharp corners; primary buttons use the bright accent green, while secondary or structural actions may use simple borders or high-contrast fills.", "cornerStyle": "Sharp, right-angled corners are universally applied across buttons, cards, and structural elements, reinforcing the precise, technical feel.", "contentWidth": "Utilizes a flexible grid that often spans the full width of the viewport for dividers, while keeping readable text blocks constrained to manageable widths.", "spacingRhythm": "Relies on expansive vertical spacing between major sections, punctuated by strict, thin horizontal lines acting as section dividers or layout grids." } ``` ### 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** — The page reaches the bottom, revealing a pattern background with a 'Start Your Engines' button and a footer section containing a contact form and links. (35s–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: low - What transfers: Tabular article list layout with title/author/date/duration columns; Separation of list section from a pattern-backed CTA block; Thin-line divider system between rows and sections - Dependencies: Specific dot/circle pattern asset and its tonal scale; Exact CTA copy and button placement within the pattern field; Brand accent color used for CTA elements - Guidance: Reuse the list-row grid and divider logic directly; swap the background pattern and CTA copy for the new brand, keeping the proportion of list height to pattern height tighter than shown here to avoid dead space. ### 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 “Blog List and Pattern CTA”. Purpose: A section featuring a list of articles followed by a large geometric pattern block containing a call-to-action. Structure: full-bleed. Source layout label: A simple list of links above a full-width repeating pattern background.. Let the primary media establish the section boundary and protect legibility with controlled overlays. Visual signature to preserve at the pattern level: A distinct transition from a clean list of articles into a dense, repeating circular pattern background. Components: article list, reading time labels, repeating pattern background, call to action button. Style direction: minimal, geometric. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"119.8px","family":"FT Aktual-13a0b0149837d76d","source":"computed","traits":"Regular","weight":"400","evidence":"font-3: computed CSS at 1440×1000; AI role: Large 119.8px FT Aktual used for major section items like 'Revenue', 'Procurement'.","sampleId":"font-3","confidence":0.9,"lineHeight":"124.6px","letterSpacing":"-1.2px"} {"role":"heading","size":"48px","family":"FT Aktual-13a0b0149837d76d","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: 48px FT Aktual used for primary page heading 'AI Engines that own outcomes'.","sampleId":"font-6","confidence":0.95,"lineHeight":"49.9px","letterSpacing":"-0.5px"} {"role":"body","size":"16px","family":"FT Aktual-13a0b0149837d76d","source":"computed","traits":"Regular","weight":"400","evidence":"font-8: computed CSS at 1440×1000; AI role: 16px FT Aktual used for standard paragraph text like 'Engines are persistent agents...' and testimonials.","sampleId":"font-8","confidence":0.9,"lineHeight":"20px","letterSpacing":"-0.2px"} Color evidence: {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-3: computed rgb(0, 0, 0); AI role: Black (#000000) used for primary text on white and pale backgrounds.","sampleId":"color-3","confidence":0.95} {"hex":"#BCF891","name":"primary action","role":"primary-action","source":"computed","evidence":"color-5: computed rgb(188, 248, 145); AI role: Bright green (#BCF891) used for primary 'Book a demo' buttons, text highlights, and key visual accents.","sampleId":"color-5","confidence":0.95} {"hex":"#001115","name":"canvas","role":"canvas","source":"computed","evidence":"color-2: computed rgb(0, 17, 21); AI role: Deep black/green (#001115) used as the primary dark background for the hero and outcome sections.","sampleId":"color-2","confidence":0.85} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-4: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for text on the dark canvas sections.","sampleId":"color-4","confidence":0.85} {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-4: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used extensively as the background for the middle feature and detail sections.","sampleId":"color-4","confidence":0.8} {"hex":"#CEE4E2","name":"surface","role":"surface","source":"computed","evidence":"color-1: computed rgb(206, 228, 226); AI role: Pale blue-green (#CEE4E2) used as a surface color for testimonial cards and the announcement bar.","sampleId":"color-1","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: The page reaches the bottom, revealing a pattern background with a 'Start Your Engines' button and a footer section containing a contact form and links. (95% confidence) Transfer these principles: Tabular article list layout with title/author/date/duration columns; Separation of list section from a pattern-backed CTA block; Thin-line divider system between rows and sections. Dependencies: Specific dot/circle pattern asset and its tonal scale; Exact CTA copy and button placement within the pattern field; Brand accent color used for CTA elements. Adaptation guidance: Reuse the list-row grid and divider logic directly; swap the background pattern and CTA copy for the new brand, keeping the proportion of list height to pattern height tighter than shown here to avoid dead space. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.