# Customizable hardware CTA Schema: Design Details SECTION.md v3.2 Website: Freckle Source: https://freckle.tech/ Source section IDs: gap-4dfbf5f8-14521-16929 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A centered two-line message sits above a single vertical phone mockup, so the eye moves straight from copy to product. - The green phone back with its dot grid and colorful charms makes the customization claim visible instead of just stated. - Generous white space around the device keeps the section calm and lets the bright accessories serve as the only color accents. What a screenshot can't show: - On scroll the phone back is revealed and the charms pop into place on the grid, in the recording between about 33 and 39 seconds. - Measured font sizes, spacing and padding were not captured, so exact scale and rhythm are unknown. Borrow: Let the product demonstrate the promise: reveal customizable parts snapping into place as the user scrolls, with minimal copy. Leave alone: Don't copy the green grid-backed phone, the 3D charm set, the lanyard, or the Diatype Rounded typeface; use a similar friendly rounded sans and your own product-specific accessory device. ## Classification - Type: cta - Layout: Centered text above a vertical device mockup with attached lanyard and grid-based accessories. - Styles: minimal, playful - Confidence: 95% ## Purpose and structure A call-to-action section that highlights hardware customization through animated popping accessories on the phone's grid back. Visual signature: Green phone back with a dot grid pattern and colorful 3D charm accessories attached to it. ## Components - text-block - 3d-device-mockup - device-accessories - lanyard ## Typography - Heading: Diatype Rounded — 36px 500 - Body: Diatype Rounded — 20px 500 - Mono: Diatype Rounded — 11.9px 500 ## Functional palette - Canvas: canvas #FFFFFF - Primary-Action: primary action #3FB23B - Surface: surface #FCF5EA - Surface: surface #EAF7E6 ## Motion evidence - 33.0–39.0s — Scrolling down reveals the back of the green phone, which has a grid pattern. Several colorful accessories pop into place on the grid. (92% confidence) ## Section quality Overall: 61.05/100 (Good) Scored coverage: 100% - Typography: 58 — Centered Diatype Rounded text in brand green, clean and legible, but just two short lines with no hierarchy variation, size contrast, or typographic flourish beyond the consistent body/heading treatment seen elsewhere on the site. Next tier: Introduce a secondary size/weight contrast or more deliberate line-break rhythm to create hierarchy within the message rather than uniform centered sentences. - Composition: 65 — Strong vertical axis: text block, generous negative space, then a centered device mockup with lanyard trailing off-frame. The whitespace is used confidently and the grid-back product shot is a clear focal point, but the layout is a fairly standard centered-stack CTA with extreme empty space that reads as padding rather than intentional tension. Next tier: Needs a secondary compositional element (asymmetry, overlapping text, or off-center placement) to feel more considered than a long scroll gap between copy and product. - Motion: 62 — Gemini specifies a timestamped behavior (33-39s): scroll reveals phone back and colorful accessories pop into place on the grid, giving a concrete, purposeful animation tied to the product's customization story. Next tier: Single pop-in reveal is good but not sequenced, staggered, or paired with other transform behaviors (rotation, lanyard sway) that would elevate it to a signature motion moment. - Content: 60 — The accessory charms visually embody the CTA message of customization, directly reinforcing the copy about building a phone for 'independence & play' with tactile, literal proof. Next tier: Content integration is mostly illustrative; deeper integration (e.g., accessories matching named options, or interactive hint) would tie content and product proof more tightly together. - Originality: 66 — The pegboard/grid phone back with pop-in charms is a distinctive, toy-like device signature not seen in generic CTA sections, giving it a memorable visual identity beyond typical photo-plus-button CTAs. Next tier: The surrounding CTA structure (copy block, big empty gap, single product shot) is conventional; the charm-grid idea alone doesn't yet elevate the whole section's structure to feel singular. - Adaptability: 55 — Text, button-less CTA copy, and 3D product mockup are separable, and color/typography tokens are documented, but the accessory pop-in relies on a bespoke grid-backed product asset that is hard to reskin without matching hardware photography. Next tier: Skin and behavior depend tightly on a proprietary 3D asset and its specific accessory set, limiting clean separation from brand-specific hardware. Strengths: - Literal, tactile visualization of 'customizable hardware' via grid-back charms - Clear vertical focal hierarchy from copy to product with generous whitespace - Scroll-triggered pop-in directly dramatizes the core product idea Weaknesses: - Large empty vertical gap between copy and image reads more like padding than composed tension - Copy hierarchy is flat with no size/weight variation - CTA lacks any visible button or interactive affordance in this crop - Motion is a single reveal beat without secondary choreography Why it does not reach the next tier: The charm-grid device concept is distinctive, but the surrounding composition and typography remain conventional centered-stack CTA patterns with excess unused whitespace, preventing it from feeling fully resolved as a strong/memorable section. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the copy-then-reveal CTA skeleton and pop-in timing with any product mockup; the specific payoff depends on having a comparably playful customizable hardware asset to substitute. What transfers: - Centered copy-above-device CTA structure - Scroll-triggered element pop-in pattern - Lanyard/lifestyle accessory framing device Dependencies: - Custom 3D grid-back phone render - Set of accessory charm assets - Brand-specific green palette and Diatype Rounded font ## 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 visible CTA button in this crop to assess its styling - Motion detail limited to one timestamped reveal, can't assess full animation sequencing - Cannot confirm underlying grid/spacing system from deterministic facts ## 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: cta - Source type: cta - Structure: centered single-column - Layout: Centered text above a vertical device mockup with attached lanyard and grid-based accessories. - Styles: minimal, playful - Components: text-block, 3d-device-mockup, device-accessories, lanyard - Purpose: A call-to-action section that highlights hardware customization through animated popping accessories on the phone's grid back. - Visual signature: Green phone back with a dot grid pattern and colorful 3D charm accessories attached to it. - Place on the page: 8 of 10, after Feature collection (`3da63e79-f994-4ab3-862a-018a096958d9`), before Gallery (`ef8c6017-2266-4caf-83cf-e94ff1354619`) ### 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": "heading", "size": "36px", "family": "Diatype Rounded", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-2: computed CSS at 1440×1000; AI role: Diatype Rounded 36px, used for key value propositions like 'Freckle is a phone that offers...'", "sampleId": "font-2", "confidence": 0.9, "lineHeight": "48px", "letterSpacing": "-0.3px" }, { "role": "body", "size": "20px", "family": "Diatype Rounded", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-9: computed CSS at 1440×1000; AI role: Diatype Rounded 20px, used for feature pills and supporting text.", "sampleId": "font-9", "confidence": 0.85, "lineHeight": "32px", "letterSpacing": "-0.3px" }, { "role": "mono", "size": "11.9px", "family": "Diatype Rounded", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-4: computed CSS at 1440×1000; AI role: Small utility text (11.9px) within the app UI mockup.", "sampleId": "font-4", "confidence": 0.7, "lineHeight": "15.1px", "letterSpacing": "-0.3px" } ] } ``` ### 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": "#FFFFFF", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(255, 255, 255); AI role: White background (#FFFFFF) dominates the page layout.", "sampleId": "color-1", "confidence": 0.95 }, { "hex": "#3FB23B", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-2: computed rgb(63, 178, 59); AI role: Vibrant green (#3FB23B) used for text highlights and the primary 'Pre-Order' button.", "sampleId": "color-2", "confidence": 0.95 }, { "hex": "#FCF5EA", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-7: computed rgb(252, 245, 234); AI role: Off-white (#FCF5EA) used for the footer background area.", "sampleId": "color-7", "confidence": 0.85 }, { "hex": "#EAF7E6", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-3: computed rgb(234, 247, 230); AI role: Light green (#EAF7E6) used as background for unselected feature pill buttons.", "sampleId": "color-3", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Large border radii on buttons and feature tags to match the rounded typography and playful brand.", "density": "Low density, prioritizing imagery and animation over text content.", "evidence": "DOM/CSS facts show no strict grid system, heavily rounded buttons ('Pre-Order', feature pills), and sparse text usage.", "borderStyle": "Mostly borderless, relying on color fills for buttons.", "buttonStyle": "Pill-shaped, filled backgrounds with centered text.", "cornerStyle": "Fully rounded (pill-shaped)", "contentWidth": "Single column, narrow text measure centered in the viewport.", "spacingRhythm": "Very loose rhythm, favoring massive vertical whitespace between sections to isolate product shots and allow for scroll-driven animations." } ``` ### 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 down reveals the back of the green phone, which has a grid pattern. Several colorful accessories pop into place on the grid. (33s–39s; 92% 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: Centered copy-above-device CTA structure; Scroll-triggered element pop-in pattern; Lanyard/lifestyle accessory framing device - Dependencies: Custom 3D grid-back phone render; Set of accessory charm assets; Brand-specific green palette and Diatype Rounded font - Guidance: Reuse the copy-then-reveal CTA skeleton and pop-in timing with any product mockup; the specific payoff depends on having a comparably playful customizable hardware asset to substitute. ### 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 cta section inspired by the design evidence titled “Customizable hardware CTA”. Purpose: A call-to-action section that highlights hardware customization through animated popping accessories on the phone's grid back. Structure: centered single-column. Source layout label: Centered text above a vertical device mockup with attached lanyard and grid-based accessories.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content. Visual signature to preserve at the pattern level: Green phone back with a dot grid pattern and colorful 3D charm accessories attached to it. Components: text-block, 3d-device-mockup, device-accessories, lanyard. Style direction: minimal, playful. No deterministic crop dimensions were attached. Typography evidence: {"role":"heading","size":"36px","family":"Diatype Rounded","source":"computed","traits":"Regular","weight":"500","evidence":"font-2: computed CSS at 1440×1000; AI role: Diatype Rounded 36px, used for key value propositions like 'Freckle is a phone that offers...'","sampleId":"font-2","confidence":0.9,"lineHeight":"48px","letterSpacing":"-0.3px"} {"role":"body","size":"20px","family":"Diatype Rounded","source":"computed","traits":"Regular","weight":"500","evidence":"font-9: computed CSS at 1440×1000; AI role: Diatype Rounded 20px, used for feature pills and supporting text.","sampleId":"font-9","confidence":0.85,"lineHeight":"32px","letterSpacing":"-0.3px"} {"role":"mono","size":"11.9px","family":"Diatype Rounded","source":"computed","traits":"Regular","weight":"500","evidence":"font-4: computed CSS at 1440×1000; AI role: Small utility text (11.9px) within the app UI mockup.","sampleId":"font-4","confidence":0.7,"lineHeight":"15.1px","letterSpacing":"-0.3px"} Color evidence: {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: White background (#FFFFFF) dominates the page layout.","sampleId":"color-1","confidence":0.95} {"hex":"#3FB23B","name":"primary action","role":"primary-action","source":"computed","evidence":"color-2: computed rgb(63, 178, 59); AI role: Vibrant green (#3FB23B) used for text highlights and the primary 'Pre-Order' button.","sampleId":"color-2","confidence":0.95} {"hex":"#FCF5EA","name":"surface","role":"surface","source":"computed","evidence":"color-7: computed rgb(252, 245, 234); AI role: Off-white (#FCF5EA) used for the footer background area.","sampleId":"color-7","confidence":0.85} {"hex":"#EAF7E6","name":"surface","role":"surface","source":"computed","evidence":"color-3: computed rgb(234, 247, 230); AI role: Light green (#EAF7E6) used as background for unselected feature pill buttons.","sampleId":"color-3","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 down reveals the back of the green phone, which has a grid pattern. Several colorful accessories pop into place on the grid. (92% confidence) Transfer these principles: Centered copy-above-device CTA structure; Scroll-triggered element pop-in pattern; Lanyard/lifestyle accessory framing device. Dependencies: Custom 3D grid-back phone render; Set of accessory charm assets; Brand-specific green palette and Diatype Rounded font. Adaptation guidance: Reuse the copy-then-reveal CTA skeleton and pop-in timing with any product mockup; the specific payoff depends on having a comparably playful customizable hardware asset to substitute. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.