# Automation Layer Dithered Feature Schema: Design Details SECTION.md v3.2 Website: North Source: https://north.cloud/ Source section IDs: gap-2968542e-3486-4811 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - A large dithered sphere graphic fills the top half and sets a strong retro mood before any text appears. - Below it, a split grid places a big bold uppercase heading on the left against small mono text blocks on the right, so the scale contrast makes the hierarchy obvious. - Crosshair markers, dotted guides and a ruler-tick strip give the layout a schematic feel, and the sine wave overlapping the ruler ties the graphic motif to the grid. What a screenshot can't show: - The recording showed no motion for this section, so any hover or scroll behavior is unknown. - No font sizes, spacing or line heights were measured, so the type scale and padding can't be read from the facts. Borrow: Pair one dominant textured image with a rigorously gridded text area, and let a small graphic cross the grid lines to connect the two. Leave alone: Don't copy the dithered sphere artwork, the light-gray surface with purple accent, or the crosshair-and-ruler scaffolding; use your own illustration style and a free grotesque plus mono pairing. ## Classification - Type: feature-grid - Layout: Large full-width top graphic followed by a split lower section containing a heading on the left and a grid of text and micro-graphics on the right. - Styles: brutalist, retro, minimal - Confidence: 95% ## Purpose and structure A light-gray section matching the Intelligence Layer's style, featuring a dithered abstract spherical graphic above a grid containing a 'Automation Layer' heading, text, and an overlapping sine wave graphic. Visual signature: Retro-style dithered pixel art of spheres/planets dominating the top half, with strict grid-based typography and overlapping sine waves below. ## Components - dithered-graphic - section-heading - text-column - sine-wave-graphic ## 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 - No section-specific authored motion was established. ## Section quality Overall: 65.82/100 (Good) Scored coverage: 85% - Typography: 66 — Bold uppercase heading paired with mono labels and compact body text establish a clear brutalist/technical hierarchy, aligned to the grid crosshairs. Contrast between the huge grotesque headline and tiny mono text is deliberate and effective, but the type pairing itself (standard grotesque + mono) is a common technical-site convention, not a distinctive typographic invention. Next tier: Needs a more idiosyncratic type treatment or scale relationship beyond the familiar large-heading/mono-caption pattern to push past polished-familiar into memorable. - Composition: 69 — Strong grid discipline: crosshair markers, dotted guides, and aligned columns give the layout an engineered, schematic feel. The large dithered graphic dominates top, balanced by a three-part split below (heading, tagline+waveform, two text blocks). Sine-wave graphic overlapping the ruler is a nice compositional detail that ties visual motif to grid rigor. Next tier: Composition is well-organized but the lower grid is a fairly standard 3-column feature split; it lacks an unexpected spatial move or asymmetry that would elevate it to strong/memorable territory. - Motion: not_assessed — No timestamped motion evidence supplied for this section; motion_moments is empty. Next tier: Needs timestamped observation of specific visible animated changes to assess. - Content: 65 — Copy is tightly integrated with layout: short declarative heading, supporting tagline, and two explanatory paragraphs sit in dedicated grid cells, reinforcing the technical narrative. The dithered sphere/wave graphics visually echo 'automation' and 'optimization' themes without being literal. Next tier: Content integration is clean but conventional feature-copy structure; no interactive or data-driven element ties content more tightly to the product itself. - Originality: 68 — The dithered halftone pixel-art spheres are a distinctive, uncommon visual device that breaks from typical SaaS illustration styles, paired with crosshair/grid framing and a hand-drawn-looking overlapping sine wave with a ruler tick strip — an unusual combination of retro-print texture and technical scaffolding. Next tier: While the dithered graphic is distinctive, the surrounding grid/typography/copy structure is a fairly standard feature-section template, limiting overall originality from reaching strong/memorable as a whole system. - Adaptability: 60 — Structure (image block, heading, tagline, dual text columns, decorative graphic) is clearly separable from the dithered-art skin; grid lines, fonts, and colors are deterministically specified, making reskinning feasible. Next tier: Dependency on the specific dithered illustration asset and hand-drawn wave graphic limits a lower-effort, drop-in doctrine without custom art generation. Strengths: - Distinctive dithered halftone sphere illustration gives the section a tactile, retro-print texture rarely seen in SaaS feature sections - Consistent grid system with crosshair markers and dotted rules reinforces a schematic, engineered tone across typography and graphics - Clear three-tier reading order from large graphic to heading to supporting copy Weaknesses: - Lower grid layout (heading + tagline/wave + two text columns) follows a conventional feature-section template - Type pairing (grotesque display + mono caption) is a common technical-site convention rather than a distinctive system - No confirmed motion evidence to assess dynamic behavior of the section Why it does not reach the next tier: The dithered illustration is a genuinely original visual device, but the supporting composition, typography, and content structure rely on familiar feature-grid conventions, keeping the section at good/polished rather than strong/memorable overall. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the grid skeleton, heading scale, and text-column split directly; the dithered artwork and wave graphic require custom asset creation or a generator to replicate the same effect in a new context. What transfers: - Grid-based layout with heading, tagline, and dual text-column structure - Large graphic-above-copy composition pattern - Mono-type micro-label and ruler-tick decorative system Dependencies: - Custom dithered/halftone illustration asset - Hand-drawn overlapping sine-wave graphic - Untitled Sans and Degrad Mono fonts - Grid crosshair/dotted-line visual system ## 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 motion timestamps supplied, so motion axis could not be scored - Exact spacing, radii, and color values for this specific crop are inferred from general site tokens rather than crop-specific CSS ## 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: feature-grid - Structure: two-column - Layout: Large full-width top graphic followed by a split lower section containing a heading on the left and a grid of text and micro-graphics on the right. - Styles: brutalist, retro, minimal - Components: dithered-graphic, section-heading, text-column, sine-wave-graphic - Purpose: A light-gray section matching the Intelligence Layer's style, featuring a dithered abstract spherical graphic above a grid containing a 'Automation Layer' heading, text, and an overlapping sine wave graphic. - Visual signature: Retro-style dithered pixel art of spheres/planets dominating the top half, with strict grid-based typography and overlapping sine waves below. - Place on the page: 4 of 14, after Feature collection (`north-cloud:C02`), before Stats (`north-cloud:C03`) ### 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 No timestamped authored motion is attached. Use only restrained baseline transitions. 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: Grid-based layout with heading, tagline, and dual text-column structure; Large graphic-above-copy composition pattern; Mono-type micro-label and ruler-tick decorative system - Dependencies: Custom dithered/halftone illustration asset; Hand-drawn overlapping sine-wave graphic; Untitled Sans and Degrad Mono fonts; Grid crosshair/dotted-line visual system - Guidance: Reuse the grid skeleton, heading scale, and text-column split directly; the dithered artwork and wave graphic require custom asset creation or a generator to replicate the same effect in a new context. ### 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; timestamped authored motion - Warning: Buildable with adaptations for these unsupported facts: section-specific computed typography and color samples; section-level geometry, surfaces, media treatment, and animation parameters; timestamped authored motion. ### Agent implementation prompt Create an original features section inspired by the design evidence titled “Automation Layer Dithered Feature”. Purpose: A light-gray section matching the Intelligence Layer's style, featuring a dithered abstract spherical graphic above a grid containing a 'Automation Layer' heading, text, and an overlapping sine wave graphic. Structure: two-column. Source layout label: Large full-width top graphic followed by a split lower section containing a heading on the left and a grid of text and micro-graphics 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: Retro-style dithered pixel art of spheres/planets dominating the top half, with strict grid-based typography and overlapping sine waves below. Components: dithered-graphic, section-heading, text-column, sine-wave-graphic. Style direction: brutalist, retro, minimal. 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. Do not invent signature motion. Use only restrained baseline transitions if the product needs them. Transfer these principles: Grid-based layout with heading, tagline, and dual text-column structure; Large graphic-above-copy composition pattern; Mono-type micro-label and ruler-tick decorative system. Dependencies: Custom dithered/halftone illustration asset; Hand-drawn overlapping sine-wave graphic; Untitled Sans and Degrad Mono fonts; Grid crosshair/dotted-line visual system. Adaptation guidance: Reuse the grid skeleton, heading scale, and text-column split directly; the dithered artwork and wave graphic require custom asset creation or a generator to replicate the same effect in a new context. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.