# Editorial text block with inline video button Schema: Design Details SECTION.md v3.2 Website: Ornn Source: https://ornn.com/ Source section IDs: gap-873cc837-2013-3448 Status: AI analysed; vocabulary promotion is automated ## Builder's note What makes it work: - The hard switch from white text on black to oversized black type on white gives the section a clear rhythm and a strong focal point. - The 'Watch video' pill sits inside the headline sentence, so the media trigger reads as part of the copy instead of a separate call to action. - A persistent left label column and hairline borders keep the large type organised, and the muted grey labels stay quieter than the headline. What a screenshot can't show: - The recording shows a video titled 'Gold anchor last century.' appearing below the text between about 6 and 11 seconds, but no specific transition or timing is visible. - No font sizes, letter spacing, line heights or section padding were measured, so the scale is judged by eye only. Borrow: Place the action inside the key sentence as a pill, so the media trigger becomes part of the message. Leave alone: Don't copy Ornn's black and white palette, its FK Roman and PP Neue Montreal type pairing, or the gold-themed video copy; use a free serif and grotesque pairing instead. ## Classification - Type: editorial - Layout: Full-width text blocks, alternating dark and light backgrounds. - Styles: minimal, typographic, editorial - Confidence: 85% ## Purpose and structure A split editorial section starting with white text on black, transitioning to large black typography on white with an inline 'Watch video' pill button. Visual signature: Stark contrast transition from dark to light background with oversized typography and an inline pill button. ## Components - Text Block - Inline Video Button ## Typography - Display: FK Roman Standard Light — 70px 300 - Heading: PP Neue Montreal Medium — 46px 500 - Body: PP Neue Montreal Regular — 18px 400 - Mono: Geist Mono — 10px 400 ## Functional palette - Canvas: canvas #000000 - Text: text #FFFFFF - Muted-Text: muted text #848991 - Primary-Action: primary action #F3F3F3 - Surface: surface #0B0B0C - Border: border #29292A ## Motion evidence - 6.0–11.0s — A section detailing the compute market as the 'most important commodity of our lifetimes' is shown. A video titled 'Gold anchor last century.' appears below. (90% confidence) ## Section quality Overall: 63.65/100 (Good) Scored coverage: 85% - Typography: 62 — Clear scale contrast between mono label, large serif/sans heading, and oversized display line; consistent with supplied font tokens (FK Roman/PP Neue Montreal). Hierarchy is legible but relies on standard large-type editorial convention without unusual pairing or rhythm. Next tier: Needs a more distinctive type pairing or scale relationship beyond big-statement-over-label convention to reach strong tier. - Composition: 66 — Alternating black/white full-bleed blocks with a persistent left label column and hairline grid create a disciplined structural rhythm; the inline pill button breaking into the headline text is a deliberate, well-placed compositional detail. Next tier: The lower white block is mostly empty negative space with a single centered line, which reads as underdeveloped rather than intentional tension; tighter vertical integration with surrounding content would be needed. - Motion: inconclusive — Gemini's motion_moments only states a video label 'appears below' without describing any specific visible transition, transform, or timing detail. Next tier: Requires a timestamped description of an actual visible motion change (e.g., reveal, fade, scale) to score this axis. - Content: 64 — The video trigger is woven directly into the sentence ('Gold anchor[ed] ... last century') rather than placed as a separate CTA block, which is a genuine integration choice tying media to copy. Next tier: Beyond the single inline button, there is no other content device (image, data, annotation) that deepens the integration; it remains a single clever insertion. - Originality: 61 — The inline pill-in-headline device is a recognizable but still somewhat uncommon treatment; the black/white alternating block pattern itself is a common editorial trope. Next tier: Needs an additional distinguishing mechanism (e.g., unusual pacing, unexpected copy/button relationship, grid break) to move past a familiar device into something harder to substitute. - Adaptability: 65 — Deterministic tokens (hairline borders, pill radius, specific type families/sizes, black/white palette) make the skin cleanly separable from the structural grid of label-column plus stacked text blocks. Next tier: Dependence on the exact inline-button-in-text layout timing/position limits reuse without re-deriving precise text-wrap placement for other copy lengths. Strengths: - Inline pill video button embedded directly within the sentence flow is a distinctive detail - Consistent hairline grid and left label column reinforce structural discipline - Clear black/white contrast separates problem statement from headline statement Weaknesses: - Lower white block has excessive unused vertical space around the single headline line - Motion cannot be verified from the supplied evidence - Originality rests on a single device rather than a system of such moves Why it does not reach the next tier: The section shows a competent, well-structured editorial pattern with one genuinely clever detail (the inline video button), but it lacks a second distinguishing move, has underused negative space in the white block, and the motion behavior is unverifiable — together keeping it below the strong/memorable threshold. ## Adaptation guidance - Effort: Medium - Guidance: Reuse the label-column plus alternating background block pattern and the inline-button-in-text device; replacing it requires recalculating text wrap and button position for new copy, plus substituting font/color tokens while preserving the hairline grid structure. What transfers: - Alternating full-bleed black/white block structure - Left label column with mono uppercase tag - Inline button embedded within running headline text - Hairline border grid system Dependencies: - Specific copy length that allows the button to sit mid-sentence without awkward wrapping - Supplied font families (FK Roman, PP Neue Montreal) and exact sizes for hierarchy - Pill radius and color tokens for button skin ## 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 state inconclusive due to lack of specific visible-change description - No visible evidence of hover/interaction state for the inline button - Cannot confirm exact spacing or radius values beyond token ranges provided ## 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: Full-width text blocks, alternating dark and light backgrounds. - Styles: minimal, typographic, editorial - Components: Text Block, Inline Video Button - Purpose: A split editorial section starting with white text on black, transitioning to large black typography on white with an inline 'Watch video' pill button. - Visual signature: Stark contrast transition from dark to light background with oversized typography and an inline pill button. - Place on the page: 4 of 12, after Other (`bbdc275b-4b48-479a-95bc-998d71957409`), before Product UI (`ornn-com:feature_dashboard_mockup`) ### 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": "70px", "family": "FK Roman Standard Light", "source": "computed", "traits": "Regular", "weight": "300", "evidence": "font-10: computed CSS at 1440×1000; AI role: FK Roman Standard Light at 70px, used for large index ticker names.", "sampleId": "font-10", "confidence": 0.95, "lineHeight": "70px", "letterSpacing": "-2.8px" }, { "role": "heading", "size": "46px", "family": "PP Neue Montreal Medium", "source": "computed", "traits": "Regular", "weight": "500", "evidence": "font-1: computed CSS at 1440×1000; AI role: PP Neue Montreal Medium at 46px, used for primary page headings like 'The Foundation of the Compute Market'.", "sampleId": "font-1", "confidence": 1, "lineHeight": "48.3px", "letterSpacing": "-0.9px" }, { "role": "body", "size": "18px", "family": "PP Neue Montreal Regular", "source": "computed", "traits": "Regular", "weight": "400", "evidence": "font-6: computed CSS at 1440×1000; AI role: PP Neue Montreal Regular at 18px, used for readable paragraph text.", "sampleId": "font-6", "confidence": 1, "lineHeight": "22.5px", "letterSpacing": "0.4px" }, { "role": "mono", "size": "10px", "family": "Geist Mono", "source": "computed", "traits": "uppercase", "weight": "400", "evidence": "font-5: computed CSS at 1440×1000; AI role: Geist Mono at 10px, used for technical labels and uppercase tags like 'H100 index price'.", "sampleId": "font-5", "confidence": 1, "lineHeight": "14px", "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": "#000000", "name": "canvas", "role": "canvas", "source": "computed", "evidence": "color-1: computed rgb(0, 0, 0); AI role: Pure black (#000000) used as the primary background color for the body and main sections.", "sampleId": "color-1", "confidence": 1 }, { "hex": "#FFFFFF", "name": "text", "role": "text", "source": "computed", "evidence": "color-3: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) used for primary headings and body text to contrast against the black canvas.", "sampleId": "color-3", "confidence": 1 }, { "hex": "#848991", "name": "muted text", "role": "muted-text", "source": "computed", "evidence": "color-8: computed rgb(132, 137, 145); AI role: Grey (#848991) used for secondary text, metadata, and table headers.", "sampleId": "color-8", "confidence": 0.95 }, { "hex": "#F3F3F3", "name": "primary action", "role": "primary-action", "source": "computed", "evidence": "color-5: computed rgb(243, 243, 243); AI role: Light grey/white (#F3F3F3) used for primary interactive buttons like 'Buy Compute'.", "sampleId": "color-5", "confidence": 0.95 }, { "hex": "#0B0B0C", "name": "surface", "role": "surface", "source": "computed", "evidence": "color-2: computed rgb(11, 11, 12); AI role: Very dark greys (#0B0B0C) used for slightly elevated surfaces or interface mockups.", "sampleId": "color-2", "confidence": 0.9 }, { "hex": "#29292A", "name": "border", "role": "border", "source": "computed", "evidence": "color-17: computed rgb(41, 41, 42); AI role: Dark grey (#29292A) used extensively for the hairline grid separators.", "sampleId": "color-17", "confidence": 0.9 } ] } ``` ### Design tokens ```json { "radius": "Buttons use maximum border-radius for a pill effect. Interface mockups use smaller, subtle radii (approx 4-8px).", "density": "Low to medium density. The layout breathes with ample negative space, though technical data tables condense information effectively.", "evidence": "Observed via CSS facts: borders mapped to #29292A, typography scales (46px headings, 18px body), button styles in screenshots, and grid layout structures spanning the viewport.", "borderStyle": "Hairline (1px) solid borders in dark grey are a defining structural element, acting as a visible grid overlay.", "buttonStyle": "High-contrast solid light buttons for primary actions (pill shape), and ghost/outline styles for secondary interactions.", "cornerStyle": "Fully rounded (pill-shaped) for primary buttons and badges, with slightly rounded corners on interface mockups and dropdown containers.", "contentWidth": "Full-bleed backgrounds with a wide, structured internal grid that scales to the viewport width.", "spacingRhythm": "Generous vertical padding between sections, utilizing a strict fluid grid system that dictates the placement of content and the drawing of border lines." } ``` ### 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. **entrance** — A section detailing the compute market as the 'most important commodity of our lifetimes' is shown. A video titled 'Gold anchor last century.' appears below. (6s–11s; 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 full-bleed black/white block structure; Left label column with mono uppercase tag; Inline button embedded within running headline text; Hairline border grid system - Dependencies: Specific copy length that allows the button to sit mid-sentence without awkward wrapping; Supplied font families (FK Roman, PP Neue Montreal) and exact sizes for hierarchy; Pill radius and color tokens for button skin - Guidance: Reuse the label-column plus alternating background block pattern and the inline-button-in-text device; replacing it requires recalculating text wrap and button position for new copy, plus substituting font/color tokens while preserving the hairline grid structure. ### 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 “Editorial text block with inline video button”. Purpose: A split editorial section starting with white text on black, transitioning to large black typography on white with an inline 'Watch video' pill button. Structure: full-bleed. Source layout label: Full-width text blocks, alternating dark and light backgrounds.. Let the primary media establish the section boundary and protect legibility with controlled overlays. Visual signature to preserve at the pattern level: Stark contrast transition from dark to light background with oversized typography and an inline pill button. Components: Text Block, Inline Video Button. Style direction: minimal, typographic, editorial. No deterministic crop dimensions were attached. Typography evidence: {"role":"display","size":"70px","family":"FK Roman Standard Light","source":"computed","traits":"Regular","weight":"300","evidence":"font-10: computed CSS at 1440×1000; AI role: FK Roman Standard Light at 70px, used for large index ticker names.","sampleId":"font-10","confidence":0.95,"lineHeight":"70px","letterSpacing":"-2.8px"} {"role":"heading","size":"46px","family":"PP Neue Montreal Medium","source":"computed","traits":"Regular","weight":"500","evidence":"font-1: computed CSS at 1440×1000; AI role: PP Neue Montreal Medium at 46px, used for primary page headings like 'The Foundation of the Compute Market'.","sampleId":"font-1","confidence":1,"lineHeight":"48.3px","letterSpacing":"-0.9px"} {"role":"body","size":"18px","family":"PP Neue Montreal Regular","source":"computed","traits":"Regular","weight":"400","evidence":"font-6: computed CSS at 1440×1000; AI role: PP Neue Montreal Regular at 18px, used for readable paragraph text.","sampleId":"font-6","confidence":1,"lineHeight":"22.5px","letterSpacing":"0.4px"} {"role":"mono","size":"10px","family":"Geist Mono","source":"computed","traits":"uppercase","weight":"400","evidence":"font-5: computed CSS at 1440×1000; AI role: Geist Mono at 10px, used for technical labels and uppercase tags like 'H100 index price'.","sampleId":"font-5","confidence":1,"lineHeight":"14px","letterSpacing":"0.5px"} Color evidence: {"hex":"#000000","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(0, 0, 0); AI role: Pure black (#000000) used as the primary background color for the body and main sections.","sampleId":"color-1","confidence":1} {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-3: computed rgb(255, 255, 255); AI role: Pure white (#FFFFFF) used for primary headings and body text to contrast against the black canvas.","sampleId":"color-3","confidence":1} {"hex":"#848991","name":"muted text","role":"muted-text","source":"computed","evidence":"color-8: computed rgb(132, 137, 145); AI role: Grey (#848991) used for secondary text, metadata, and table headers.","sampleId":"color-8","confidence":0.95} {"hex":"#F3F3F3","name":"primary action","role":"primary-action","source":"computed","evidence":"color-5: computed rgb(243, 243, 243); AI role: Light grey/white (#F3F3F3) used for primary interactive buttons like 'Buy Compute'.","sampleId":"color-5","confidence":0.95} {"hex":"#0B0B0C","name":"surface","role":"surface","source":"computed","evidence":"color-2: computed rgb(11, 11, 12); AI role: Very dark greys (#0B0B0C) used for slightly elevated surfaces or interface mockups.","sampleId":"color-2","confidence":0.9} {"hex":"#29292A","name":"border","role":"border","source":"computed","evidence":"color-17: computed rgb(41, 41, 42); AI role: Dark grey (#29292A) used extensively for the hairline grid separators.","sampleId":"color-17","confidence":0.9} 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: entrance: A section detailing the compute market as the 'most important commodity of our lifetimes' is shown. A video titled 'Gold anchor last century.' appears below. (90% confidence) Transfer these principles: Alternating full-bleed black/white block structure; Left label column with mono uppercase tag; Inline button embedded within running headline text; Hairline border grid system. Dependencies: Specific copy length that allows the button to sit mid-sentence without awkward wrapping; Supplied font families (FK Roman, PP Neue Montreal) and exact sizes for hierarchy; Pill radius and color tokens for button skin. Adaptation guidance: Reuse the label-column plus alternating background block pattern and the inline-button-in-text device; replacing it requires recalculating text wrap and button position for new copy, plus substituting font/color tokens while preserving the hairline grid structure. Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.