# Interactive Layered Platform Accordion Schema: Design Details SECTION.md v3.2 Website: North Source: https://north.cloud/ Source section IDs: gap-2968542e-6154-8145 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A fixed layer graphic on the left and a ruled accordion list on the right make a clear two-column split, and each list item maps to one layer. - Clicking Analyze, Monitor, Optimize or Ask swaps the description and highlights the matching layer, so the visual shows which item is open. - A light gray canvas, a dark textured graphic and one purple accent keep the section restrained, and mono labels with a large uppercase title give a clear hierarchy. What a screenshot can't show: - The recording shows clicks between 18s and 23s that swap the text and highlight a layer, but it gives no easing or duration. - No font sizes, spacing or padding were measured, so exact type scale and rhythm are unknown. Borrow: Let a simple list control a single fixed graphic, so each item's open state changes one visible part of the picture. Leave alone: Don't copy the purple-on-black topographic layer textures, the crosshair grid markers or the uppercase display and mono type pairing; use your own illustration style and a free geometric or mono alternative. ## Classification - Type: features - Layout: Split layout with a fixed visual graphic on the left and a vertically stacked interactive accordion list on the right. - Styles: minimal, geometric, corporate - Confidence: 90% ## Purpose and structure A light gray section titled 'THE PLATFORM' featuring a dark, stacked 3D layer graphic on the left that updates as users click through an interactive accordion menu on the right. Visual signature: A stack of dark, textured 3D square layers beside a clean, line-separated list of clickable feature names. ## Components - section-heading - 3d-layer-graphic - interactive-accordion - text-description ## Typography - Display: Untitled Sans — 96px 500 - Heading: Untitled Sans — 64px 500 - Body: Untitled Sans — 32px 400 - Mono: Degrad Mono — 15px 400 ## Functional palette - Primary-Action: primary action #D591FE - Canvas: canvas #121314 - Text: text #000000 - Muted-Text: muted text #6C7278 - Surface: surface #CCCCCC ## Motion evidence - 18.0–23.0s — The user clicks through different sections of an accordion (Analyze, Monitor, Optimize, Ask) on the right side. Each click updates the text description underneath the section title and highlights the corresponding layer in the visual on the left. (95% confidence) ## Section quality Overall: 62.45/100 (Good) Scored coverage: 100% - Typography: 62 — Clear hierarchy using the large uppercase display face for the title and mono labels for accordion items, matching the deterministic type system. Body copy sizing is comfortable but the accordion item type treatment is fairly plain sans with no distinguishing weight contrast between active/inactive states beyond the +/- icon. Next tier: Needs more deliberate differentiation between active and inactive accordion item typography (weight, size, or color shift) to earn a higher tier. - Composition: 68 — Strong split layout with a grid-locked two-column structure, crosshair grid markers reinforcing the schematic brand language, and the 3D layer graphic anchored left while the accordion list occupies a clear vertical rhythm on the right. The repeated duplicate text block visible in the crop (overlapping 'spend decision' text) suggests a scroll/pin transition artifact rather than a deliberate composition, slightly undermining confidence in the final composed state. Next tier: Section would need tighter vertical alignment between the graphic and the active accordion item, and resolution of the overlapping text artifact, to read as fully intentional and polished at rest. - Motion: 58 — Gemini confirms a specific interaction: clicking accordion items (Analyze, Monitor, Optimize, Ask) swaps the description text and highlights the corresponding 3D layer, timestamped 18-23s. This is a functional, purposeful micro-interaction tying UI state to visual state, but it is a standard accordion+highlight pattern without unusual transition choreography described. Next tier: Would need evidence of a more distinctive transition (e.g., layer animating into position, easing, or depth shift) rather than a simple highlight swap to justify a higher score. - Content: 65 — The 3D layered graphic visually echoes the platform's layered/stacked feature list (Allocate, Analyze, Monitor, Optimize, Ask), giving the abstract visual a legible conceptual tie to the content, reinforced by the matching purple accent on both the active layer and primary-action color. Next tier: Graphic-to-copy connection is implied via color/position but not explicitly labeled, so the metaphor relies on inference; tighter explicit mapping (e.g. labeling layers) would strengthen integration. - Originality: 60 — The stacked topographic-textured 3D layers are a distinctive, non-stock visual choice that differentiates from typical dashboard screenshots, but the overall split-accordion-with-visual pattern is a common SaaS feature-section convention. Next tier: The underlying interaction pattern (click list, update visual) is widely used elsewhere; the section would need a more unusual interaction model or layout departure to be memorable beyond its surface texture. - Adaptability: 60 — The accordion list, heading, and 3D graphic are structurally distinct components with a clear one-to-one mapping (list item -> layer highlight), making the pattern (list drives visual state) separable from its specific skin (textured purple/black layers, mono labels). Next tier: n/a Strengths: - Grid-aligned split layout reinforcing the brand's schematic/engineering visual language - 3D layered graphic provides a literal visual metaphor for platform depth/stacking that ties to the feature list - Purple accent consistently marks both the active list item state and the highlighted layer, creating a legible state-sync cue Weaknesses: - Overlapping/duplicate text visible in the crop suggests an unresolved scroll-transition artifact affecting composition confidence - Accordion item typography lacks strong visual differentiation between active and inactive states beyond the +/- glyph - Interaction pattern (click list, update visual) is a common SaaS convention rather than a novel mechanism Why it does not reach the next tier: The section delivers a clean, purposeful pairing of list and graphic but relies on a familiar accordion-highlight interaction and plain typographic contrast; without a more distinctive transition or deeper integration between copy and graphic, it reads as competent/polished rather than memorable. ## Adaptation guidance - Effort: Medium - Guidance: Rebuild as a two-column component: left slot holds a stacked visual (can swap in any layered imagery), right slot holds an accordion list where each item's active index maps to a highlighted layer index. Preserve the grid-crosshair overlay and mono label typography to retain the technical visual signature; the textured 3D graphic itself is the main asset dependency to replace or commission. What transfers: - Split layout with fixed visual anchor and interactive list driving visual state - Accordion-to-visual-highlight pairing logic - Grid/crosshair structural overlay as a layout device Dependencies: - Custom 3D layered graphic asset with topographic texture - Mono typeface for UI labels to maintain schematic feel - Purple accent token for active-state signaling ## 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 scoring relies solely on Gemini's single timestamped description without independent visual confirmation of transition quality - Static crop shows an apparent overlapping text artifact that may be a scroll-capture quirk rather than true section state - No direct evidence of hover/focus states for inactive accordion items ## 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: two-column - Layout: Split layout with a fixed visual graphic on the left and a vertically stacked interactive accordion list on the right. - Styles: minimal, geometric, corporate - Components: section-heading, 3d-layer-graphic, interactive-accordion, text-description - Purpose: A light gray section titled 'THE PLATFORM' featuring a dark, stacked 3D layer graphic on the left that updates as users click through an interactive accordion menu on the right. - Visual signature: A stack of dark, textured 3D square layers beside a clean, line-separated list of clickable feature names. - Place on the page: 6 of 14, after Stats (`north-cloud:C03`), before Testimonials (`north-cloud:C10`) ### Crop and composition - Deterministic crop dimensions are unavailable. - Guidance: Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions. ### 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": "96px", "family": "Untitled Sans", "source": "computed", "traits": "uppercase", "weight": "500", "evidence": "font-1: computed CSS at 1440×1000; AI role: Large, uppercase 'Untitled Sans' (96px, 500 weight) used for the primary hero text.", "sampleId": "font-1", "confidence": 0.95, "lineHeight": "88.3px", "letterSpacing": "-3.8px" }, { "role": "heading", "size": "64px", "family": "Untitled Sans", "source": "computed", "traits": "uppercase", "weight": "500", "evidence": "font-3: computed CSS at 1440×1000; AI role: Used for significant section titles, 'Untitled Sans' (64px, 500 weight).", "sampleId": "font-3", "confidence": 0.9, "lineHeight": "56.3px", "letterSpacing": "-2.6px" }, { "role": "body", "size": "32px", "family": "Untitled Sans", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-7: computed CSS at 1440×1000; AI role: Standard paragraph text ('Untitled Sans', 32px, 400 weight).", "sampleId": "font-7", "confidence": 0.85, "lineHeight": "40px", "letterSpacing": "-1.3px" }, { "role": "mono", "size": "15px", "family": "Degrad Mono", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-6: computed CSS at 1440×1000; AI role: 'Degrad Mono' (15px) used extensively for navigation links, smaller UI labels, and technical details, reinforcing the schematic look.", "sampleId": "font-6", "confidence": 0.95, "lineHeight": "24px", "letterSpacing": "0.6px" } ] } ``` ### 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": "#D591FE", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-6: computed rgb(213, 145, 254); AI role: Vivid purple (#D591FE) used consistently for primary buttons and call-to-action highlights.", "sampleId": "color-6", "confidence": 0.95 }, { "hex": "#121314", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-3: computed rgb(18, 19, 20); AI role: Near-black (#121314) used as the primary background color for many sections.", "sampleId": "color-3", "confidence": 0.9 }, { "hex": "#000000", "name": "text", "role": "text", "source": "computed", "evidence": "color-10: computed rgb(0, 0, 0); AI role: Black text used extensively on lighter grey backgrounds.", "sampleId": "color-10", "confidence": 0.9 }, { "hex": "#6C7278", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-1: computed rgb(108, 114, 120); AI role: Grey (#6C7278) used for secondary text or borders.", "sampleId": "color-1", "confidence": 0.85 }, { "hex": "#CCCCCC", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-4: computed rgb(204, 204, 204); AI role: Light grey (#CCCCCC) used for contrast blocks or alternating section backgrounds.", "sampleId": "color-4", "confidence": 0.8 } ] } ``` ### Design tokens ```json { "radius": "Primary buttons feature fully rounded 'pill' shapes, contrasting with the sharp layout.", "density": "Moderate density; the grid structure organizes information clearly, but large typography and graphics require ample space.", "evidence": "Visible grid lines with crosshairs, 0px radius on layout boxes, pill-shaped buttons with #D591FE, prominent use of mono typography.", "borderStyle": "Extensive use of 1px solid borders to create the visible grid structure.", "buttonStyle": "Pill-shaped (fully rounded), often outlined, with solid fills for primary actions.", "cornerStyle": "Sharp, 0px radius corners dominate the layout, aligning with the grid.", "contentWidth": "Content often spans the full width of the grid, constrained by the outer margins of the grid system.", "spacingRhythm": "Highly structured, reliant on a visible grid system that dictates padding and margins." } ``` ### 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. **interaction** — The user clicks through different sections of an accordion (Analyze, Monitor, Optimize, Ask) on the right side. Each click updates the text description underneath the section title and highlights the corresponding layer in the visual on the left. (18s–23s; 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: Split layout with fixed visual anchor and interactive list driving visual state; Accordion-to-visual-highlight pairing logic; Grid/crosshair structural overlay as a layout device - Dependencies: Custom 3D layered graphic asset with topographic texture; Mono typeface for UI labels to maintain schematic feel; Purple accent token for active-state signaling - Guidance: Rebuild as a two-column component: left slot holds a stacked visual (can swap in any layered imagery), right slot holds an accordion list where each item's active index maps to a highlighted layer index. Preserve the grid-crosshair overlay and mono label typography to retain the technical visual signature; the textured 3D graphic itself is the main asset dependency to replace or commission. ### 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 “Interactive Layered Platform Accordion”. Purpose: A light gray section titled 'THE PLATFORM' featuring a dark, stacked 3D layer graphic on the left that updates as users click through an interactive accordion menu on the right. Structure: two-column. Source layout label: Split layout with a fixed visual graphic on the left and a vertically stacked interactive accordion list on the right.. Preserve the visual relationship between the two columns; adapt their ratio to the new content instead of copying the source dimensions. Visual signature to preserve at the pattern level: A stack of dark, textured 3D square layers beside a clean, line-separated list of clickable feature names. Components: section-heading, 3d-layer-graphic, interactive-accordion, text-description. Style direction: minimal, geometric, corporate. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"96px","family":"Untitled Sans","source":"computed","traits":"uppercase","weight":"500","evidence":"font-1: computed CSS at 1440×1000; AI role: Large, uppercase 'Untitled Sans' (96px, 500 weight) used for the primary hero text.","sampleId":"font-1","confidence":0.95,"lineHeight":"88.3px","letterSpacing":"-3.8px"} {"role":"heading","size":"64px","family":"Untitled Sans","source":"computed","traits":"uppercase","weight":"500","evidence":"font-3: computed CSS at 1440×1000; AI role: Used for significant section titles, 'Untitled Sans' (64px, 500 weight).","sampleId":"font-3","confidence":0.9,"lineHeight":"56.3px","letterSpacing":"-2.6px"} {"role":"body","size":"32px","family":"Untitled Sans","source":"computed","traits":"Regular","weight":"400","evidence":"font-7: computed CSS at 1440×1000; AI role: Standard paragraph text ('Untitled Sans', 32px, 400 weight).","sampleId":"font-7","confidence":0.85,"lineHeight":"40px","letterSpacing":"-1.3px"} {"role":"mono","size":"15px","family":"Degrad Mono","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: 'Degrad Mono' (15px) used extensively for navigation links, smaller UI labels, and technical details, reinforcing the schematic look.","sampleId":"font-6","confidence":0.95,"lineHeight":"24px","letterSpacing":"0.6px"} Color evidence: {"hex":"#D591FE","name":"primary action","role":"primary-action","source":"computed","evidence":"color-6: computed rgb(213, 145, 254); AI role: Vivid purple (#D591FE) used consistently for primary buttons and call-to-action highlights.","sampleId":"color-6","confidence":0.95} {"hex":"#121314","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(18, 19, 20); AI role: Near-black (#121314) used as the primary background color for many sections.","sampleId":"color-3","confidence":0.9} {"hex":"#000000","name":"text","role":"text","source":"computed","evidence":"color-10: computed rgb(0, 0, 0); AI role: Black text used extensively on lighter grey backgrounds.","sampleId":"color-10","confidence":0.9} {"hex":"#6C7278","name":"muted text","role":"muted-text","source":"computed","evidence":"color-1: computed rgb(108, 114, 120); AI role: Grey (#6C7278) used for secondary text or borders.","sampleId":"color-1","confidence":0.85} {"hex":"#CCCCCC","name":"surface","role":"surface","source":"computed","evidence":"color-4: computed rgb(204, 204, 204); AI role: Light grey (#CCCCCC) used for contrast blocks or alternating section backgrounds.","sampleId":"color-4","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: interaction: The user clicks through different sections of an accordion (Analyze, Monitor, Optimize, Ask) on the right side. Each click updates the text description underneath the section title and highlights the corresponding layer in the visual on the left. (95% confidence) Transfer these principles: Split layout with fixed visual anchor and interactive list driving visual state; Accordion-to-visual-highlight pairing logic; Grid/crosshair structural overlay as a layout device. Dependencies: Custom 3D layered graphic asset with topographic texture; Mono typeface for UI labels to maintain schematic feel; Purple accent token for active-state signaling. Adaptation guidance: Rebuild as a two-column component: left slot holds a stacked visual (can swap in any layered imagery), right slot holds an accordion list where each item's active index maps to a highlighted layer index. Preserve the grid-crosshair overlay and mono label typography to retain the technical visual signature; the textured 3D graphic itself is the main asset dependency to replace or commission. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.