# Dot grid editorial intro

Schema: Design Details SECTION.md v3.2
Website: aethr
Source: https://getaethr.ai/
Source section IDs: gap-ccdccc69-921-1728
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- A large light serif headline sits over small, muted sans body copy, so the hierarchy reads at a glance and feels editorial.
- The right-aligned paragraph columns under the centered heading create asymmetric tension and leave generous negative space.
- Faint dot-pattern bands on a dark charcoal canvas add texture and echo the network theme without competing with the white text.

What a screenshot can't show:
- The headline slides up and fades in, followed by the body text, over roughly 0-4 seconds; no stagger or easing detail was captured.
- No font sizes, tracking, line height or spacing were measured, so the exact scale is unknown.

Borrow: Pair one oversized display line with a small offset text block, and let a quiet texture that echoes the message fill the empty space.
Leave alone: Don't copy the PP Eiko and Switzer pairing, the charcoal and teal palette, or the dot-grid motif itself; use a free light serif such as Cormorant or Fraunces with a clean sans, and your own texture.

## Classification

- Type: editorial
- Layout: Centered large heading with right-aligned paragraph columns below, over a dark background with subtle texture.
- Styles: minimal, typographic, corporate
- Confidence: 90%

## Purpose and structure

An editorial text section with a large serif headline and secondary paragraphs, set over a background featuring scattered square dot patterns.

Visual signature: Dark section with 'Fragmentation Is How Networks Begin' heading and subtle dotted textures fading in.

## Components

- large heading
- text paragraphs
- dot pattern background

## Typography

- Display: PP Eiko Light — 72px 300
- Heading: Switzer — 30px 400
- Body: Switzer — 14px 400
- Mono: Geist Mono — 12px 400

## Functional palette

- Text: text #FFFFFF
- Canvas: canvas #282B2B
- Muted-Text: muted text #A0A3A2
- Primary-Action: primary action #CEC7BF
- Surface: surface #222525
- Accent: accent #5F9496
- Border: border #677273

## Motion evidence

- 0.0–4.0s — The text 'Fragmentation Is How Networks Begin' slides up and fades into view from the bottom, followed by its accompanying body text. (95% confidence)

## Section quality

Overall: 61.40/100 (Good)
Scored coverage: 100%

- Typography: 66 — Large PP Eiko Light serif display headline contrasts well against small Switzer body copy; clear hierarchy and generous tracking give it an editorial feel, but pairing of serif display + sans body is a common convention rather than a distinctive typographic system. Next tier: Needs more distinctive type treatment (e.g. unusual scale jumps, kerning details, mixed alignment) to move beyond a familiar display/body pairing.
- Composition: 64 — Centered-left heading atop right-aligned paragraph columns creates asymmetric tension and uses negative space well, with dot-texture bands framing top and bottom. The layout is clean but the basic two-zone stacked structure is a fairly standard editorial pattern. Next tier: Needs a more unexpected grid relationship or interplay between heading and text columns to feel more than a competent editorial template.
- Motion: 56 — Gemini reports a single specific timestamped motion: heading and body text slide up and fade in from 0-4s. This is a plain, conventional reveal with no further detail on stagger, easing, or secondary motion. Next tier: Needs more distinctive choreography (staggered word/line reveals, varied timing per element) beyond a single slide-up fade to earn a higher score.
- Content: 60 — Text content (headline plus two supporting paragraphs) is well-integrated with the dot-grid background, reinforcing a 'network/fragmentation' theme, giving the copy and visual motif coherence. Next tier: The dot pattern is decorative texture rather than a graphic that directly visualizes the content's network metaphor; tighter integration between imagery and message would push this further.
- Originality: 58 — Dark editorial section with serif headline over subtle dot/plus pattern is a recognizable aesthetic seen across many SaaS/tech sites; the dot grid is a mild distinguishing texture but not a novel structural idea. Next tier: Lacks a signature detail unique to this brand/section beyond typography and dot texture; needs an idea that feels hard to substitute.
- Adaptability: 62 — Structure (heading + right-aligned paragraph block over textured background) is clearly separable: swap font, palette, and dot pattern for a different skin while hierarchy stays intact. Deterministic tokens (radius, spacing, color roles) support this. Next tier: n/a

Strengths:
- Strong contrast between oversized serif headline and small muted body text
- Asymmetric layout with right-aligned paragraphs creates visual interest without clutter
- Subtle dot-grid texture bands reinforce the 'network' theme without overwhelming the text
- Generous negative space keeps focus on typography

Weaknesses:
- Two-zone stacked heading/paragraph structure is a common editorial convention
- Dot pattern is decorative rather than directly illustrating the network/fragmentation concept
- Only a single slide-up/fade motion documented, with no distinguishing choreography
- Overall visual language (dark background, serif display, muted gray body) is widely used in tech/SaaS editorial sections

Why it does not reach the next tier: The section is clean and well-executed but relies on familiar editorial conventions (serif headline + muted body + subtle background texture + fade-up reveal) without a distinctive structural or motion idea that would make it feel singular or hard to substitute.

## Adaptation guidance

- Effort: Low
- Guidance: Reuse the heading+right-aligned-paragraph layout and reveal animation with a different serif/display font and background texture; the structure holds regardless of skin changes.

What transfers:
- Centered large heading paired with right-aligned paragraph block
- Dot/plus texture background bands at top and bottom
- Fade/slide-up text reveal pattern

Dependencies:
- PP Eiko Light display font for headline impact
- Dark canvas and muted text palette for contrast
- Dot-grid texture asset generation

## 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 detail limited to one timestamped event, no information on easing or stagger
- No information on exact dot pattern generation or interactive behavior
- Cannot verify exact font rendering or letter-spacing beyond supplied tokens

## 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: centered single-column
- Layout: Centered large heading with right-aligned paragraph columns below, over a dark background with subtle texture.
- Styles: minimal, typographic, corporate
- Components: large heading, text paragraphs, dot pattern background
- Purpose: An editorial text section with a large serif headline and secondary paragraphs, set over a background featuring scattered square dot patterns.
- Visual signature: Dark section with 'Fragmentation Is How Networks Begin' heading and subtle dotted textures fading in.
- Place on the page: 3 of 7, after Hero (`getaethr-ai:C01`), before Process (`b97b2ff2-1e31-48ae-a57b-de69461918cd`)

### 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": "display",
      "size": "72px",
      "family": "PP Eiko Light",
      "source": "computed",
      "traits": "Regular",
      "weight": "300",
      "evidence": "font-3: computed CSS at 1440×1000; AI role: 72px PP Eiko Light used for the main H1 heading in the hero.",
      "sampleId": "font-3",
      "confidence": 1,
      "lineHeight": "72px",
      "letterSpacing": "-2.9px"
    },
    {
      "role": "heading",
      "size": "30px",
      "family": "Switzer",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: 30px Switzer used for secondary headings within feature cards.",
      "sampleId": "font-2",
      "confidence": 0.9,
      "lineHeight": "33px",
      "letterSpacing": "-0.3px"
    },
    {
      "role": "body",
      "size": "14px",
      "family": "Switzer",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-5: computed CSS at 1440×1000; AI role: 14px Switzer used for standard paragraph text explaining features.",
      "sampleId": "font-5",
      "confidence": 0.95,
      "lineHeight": "21px",
      "letterSpacing": "normal"
    },
    {
      "role": "mono",
      "size": "12px",
      "family": "Geist Mono",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-13: computed CSS at 1440×1000; AI role: 12px Geist Mono used for technical labels on the network diagram.",
      "sampleId": "font-13",
      "confidence": 0.9,
      "lineHeight": "12px",
      "letterSpacing": "normal"
    }
  ]
}
```

### 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": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-5: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for high-contrast primary headings and titles.",
      "sampleId": "color-5",
      "confidence": 1
    },
    {
      "hex": "#282B2B",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-3: computed rgb(40, 43, 43); AI role: Main dark background color (#282B2B) applied to the body and large sections.",
      "sampleId": "color-3",
      "confidence": 0.95
    },
    {
      "hex": "#A0A3A2",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-7: computed rgb(160, 163, 162); AI role: Light gray (#A0A3A2) used extensively for body paragraphs and secondary text.",
      "sampleId": "color-7",
      "confidence": 0.95
    },
    {
      "hex": "#CEC7BF",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-11: computed rgb(206, 199, 191); AI role: Light beige/gray (#CEC7BF) used specifically for the primary 'Get in touch' CTA buttons.",
      "sampleId": "color-11",
      "confidence": 0.95
    },
    {
      "hex": "#222525",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-4: computed rgb(34, 37, 37); AI role: Slightly varied dark gray (#222525) used for bento card backgrounds.",
      "sampleId": "color-4",
      "confidence": 0.9
    },
    {
      "hex": "#5F9496",
      "name": "accent",
      "role": "accent",
      "source": "computed",
      "evidence": "color-12: computed rgb(95, 148, 150); AI role: Muted teal (#5F9496) used for data visualization bars and small iconic elements.",
      "sampleId": "color-12",
      "confidence": 0.85
    },
    {
      "hex": "#677273",
      "name": "border",
      "role": "border",
      "source": "computed",
      "evidence": "color-6: computed rgb(103, 114, 115); AI role: Subtle gray (#677273) used for thin dividing lines and card borders.",
      "sampleId": "color-6",
      "confidence": 0.8
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Buttons feature a fully rounded, pill-like radius. Feature cards use a subtle border radius (likely 8-12px).",
  "density": "Low visual density; relies on negative space to draw focus to typography and fine-line graphics.",
  "evidence": "Observed via the bento layout cards, pill-shaped 'Get in touch' buttons, and the expansive dark background between text blocks.",
  "borderStyle": "Extremely subtle, thin (1px) borders are used to outline bento cards and separate sections without creating heavy visual weight.",
  "buttonStyle": "Solid background fill contrasting with the dark theme, pill shape, with dark text.",
  "cornerStyle": "Rounded corners are prominent on interactive elements and container modules.",
  "contentWidth": "Content is constrained to a central column, leaving distinct horizontal margins on desktop.",
  "spacingRhythm": "Large, breathable margins between distinct page sections, with tighter, consistent padding inside bento-style cards."
}
```

### 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 text 'Fragmentation Is How Networks Begin' slides up and fades into view from the bottom, followed by its accompanying body text. (0s–4s; 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: Centered large heading paired with right-aligned paragraph block; Dot/plus texture background bands at top and bottom; Fade/slide-up text reveal pattern
- Dependencies: PP Eiko Light display font for headline impact; Dark canvas and muted text palette for contrast; Dot-grid texture asset generation
- Guidance: Reuse the heading+right-aligned-paragraph layout and reveal animation with a different serif/display font and background texture; the structure holds regardless of skin changes.

### 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 “Dot grid editorial intro”.

Purpose: An editorial text section with a large serif headline and secondary paragraphs, set over a background featuring scattered square dot patterns.

Structure: centered single-column. Source layout label: Centered large heading with right-aligned paragraph columns below, over a dark background with subtle texture.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: Dark section with 'Fragmentation Is How Networks Begin' heading and subtle dotted textures fading in.

Components: large heading, text paragraphs, dot pattern background.

Style direction: minimal, typographic, corporate.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"72px","family":"PP Eiko Light","source":"computed","traits":"Regular","weight":"300","evidence":"font-3: computed CSS at 1440×1000; AI role: 72px PP Eiko Light used for the main H1 heading in the hero.","sampleId":"font-3","confidence":1,"lineHeight":"72px","letterSpacing":"-2.9px"} {"role":"heading","size":"30px","family":"Switzer","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: 30px Switzer used for secondary headings within feature cards.","sampleId":"font-2","confidence":0.9,"lineHeight":"33px","letterSpacing":"-0.3px"} {"role":"body","size":"14px","family":"Switzer","source":"computed","traits":"Regular","weight":"400","evidence":"font-5: computed CSS at 1440×1000; AI role: 14px Switzer used for standard paragraph text explaining features.","sampleId":"font-5","confidence":0.95,"lineHeight":"21px","letterSpacing":"normal"} {"role":"mono","size":"12px","family":"Geist Mono","source":"computed","traits":"Regular","weight":"400","evidence":"font-13: computed CSS at 1440×1000; AI role: 12px Geist Mono used for technical labels on the network diagram.","sampleId":"font-13","confidence":0.9,"lineHeight":"12px","letterSpacing":"normal"}

Color evidence: {"hex":"#FFFFFF","name":"text","role":"text","source":"computed","evidence":"color-5: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used for high-contrast primary headings and titles.","sampleId":"color-5","confidence":1} {"hex":"#282B2B","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(40, 43, 43); AI role: Main dark background color (#282B2B) applied to the body and large sections.","sampleId":"color-3","confidence":0.95} {"hex":"#A0A3A2","name":"muted text","role":"muted-text","source":"computed","evidence":"color-7: computed rgb(160, 163, 162); AI role: Light gray (#A0A3A2) used extensively for body paragraphs and secondary text.","sampleId":"color-7","confidence":0.95} {"hex":"#CEC7BF","name":"primary action","role":"primary-action","source":"computed","evidence":"color-11: computed rgb(206, 199, 191); AI role: Light beige/gray (#CEC7BF) used specifically for the primary 'Get in touch' CTA buttons.","sampleId":"color-11","confidence":0.95} {"hex":"#222525","name":"surface","role":"surface","source":"computed","evidence":"color-4: computed rgb(34, 37, 37); AI role: Slightly varied dark gray (#222525) used for bento card backgrounds.","sampleId":"color-4","confidence":0.9} {"hex":"#5F9496","name":"accent","role":"accent","source":"computed","evidence":"color-12: computed rgb(95, 148, 150); AI role: Muted teal (#5F9496) used for data visualization bars and small iconic elements.","sampleId":"color-12","confidence":0.85} {"hex":"#677273","name":"border","role":"border","source":"computed","evidence":"color-6: computed rgb(103, 114, 115); AI role: Subtle gray (#677273) used for thin dividing lines and card borders.","sampleId":"color-6","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 text 'Fragmentation Is How Networks Begin' slides up and fades into view from the bottom, followed by its accompanying body text. (95% confidence)

Transfer these principles: Centered large heading paired with right-aligned paragraph block; Dot/plus texture background bands at top and bottom; Fade/slide-up text reveal pattern.

Dependencies: PP Eiko Light display font for headline impact; Dark canvas and muted text palette for contrast; Dot-grid texture asset generation.

Adaptation guidance: Reuse the heading+right-aligned-paragraph layout and reveal animation with a different serif/display font and background texture; the structure holds regardless of skin changes.

Use new copy, imagery, branding, and implementation details. Do not reproduce the source website or its proprietary assets.