# Channel consolidation feature cards

Schema: Design Details SECTION.md v3.2
Website: Fernand
Source: https://getfernand.com/
Source section IDs: gap-470480f1-1468-3185
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- Each card repeats the same icon, title, short description and link, so the grid scans quickly and every card clearly maps to one real support channel.
- The 30px heading over 16px body text, with muted grey for secondary copy, gives a clear hierarchy on a clean white canvas.
- The founder note below the grid shifts to a centered two-column text block, which breaks the card rhythm and adds a personal voice.

What a screenshot can't show:
- The recording showed no motion, so hover states and any scroll behaviour on the card that peeks off the edge are unknown.
- No spacing or padding was measured, so gaps between cards and section padding are not available.

Borrow: Use one repeatable card pattern for parallel items, then follow it with a different, more personal text block to change the pace.
Leave alone: Don't copy the exact icon set, the Inter-plus-bright-blue SaaS look or the founder-letter wording; use your own typeface, icon style and voice.

## Classification

- Type: feature-grid
- Layout: Centered heading followed by a three-column card grid, ending with a centered two-column text block.
- Styles: minimal
- Confidence: 95%

## Purpose and structure

A three-column grid of minimal feature cards displaying different support channels, followed by a text block.

Visual signature: Clean white background with simple outlined cards containing tiny icons and text.

## Components

- heading
- icon cards
- text blocks
- links

## Typography

- Display: Inter — 38px 400
- Heading: Inter — 30px 400
- Body: Inter — 16px 400

## Functional palette

- Text: text #1A2035
- Canvas: canvas #FFFFFF
- Muted-Text: muted text #717583
- Primary-Action: primary action #00A0FF
- Surface: surface #F7FAFC
- Surface: surface #151618

## Motion evidence

- No section-specific authored motion was established.

## Section quality

Overall: 56.47/100 (Competent)
Scored coverage: 85%

- Typography: 58 — Clean Inter hierarchy (30px heading, 16px body) with muted-text secondary copy is legible and consistent, but spacing/sizing is standard SaaS convention with no distinctive type treatment. Next tier: No typographic personality, scale contrast, or treatment beyond default size/weight/color system.
- Composition: 62 — Card grid with consistent icon-title-body-link pattern reads cleanly, and the overflow card (DMs) peeking off-canvas with a chevron hints at a horizontal scroll affordance, adding a small structural idea. The founder-letter text block below is a distinct compositional shift that breaks grid monotony intentionally. Next tier: Cards themselves are generic bordered boxes with no asymmetry, scale variation, or layered depth; whitespace use is competent but not engineered for a strong focal path.
- Motion: not_assessed — No motion_moments or timestamped evidence supplied for this section. Next tier: Need timestamped visible motion evidence to assess.
- Content: 60 — Icons, labels, and short descriptions are well-paired and each card ties directly to a real channel; the personal founder note adds authentic content integration beyond generic feature copy. Next tier: Icons are tiny and generic (line icons), not custom or illustrative; content is informative but not visually elevated beyond text+icon convention.
- Originality: 45 — This is a textbook three/four-column bordered feature-card grid with 'Learn more' links—extremely common SaaS pattern with no distinguishing visual or structural twist beyond the off-canvas scroll hint. Next tier: Lacks any unexpected layout, interaction, or visual device that differentiates it from thousands of similar sections.
- Adaptability: 55 — Structure (icon, title, description, link in bordered card) is simple and clearly separable from skin; founder-note block is a distinct reusable text-pattern. Next tier: Dependency on exact icon set and copy tone limits transfer without redesign of iconography.

Strengths:
- Clear content-to-card mapping for each support channel with concise, scannable copy
- Personal founder note breaks pattern monotony and adds authentic voice
- Consistent minimal visual language (borders, icon, spacing) across cards

Weaknesses:
- Generic bordered feature-card pattern with no distinguishing visual idea
- Tiny, nondescript line icons carry little visual weight or craft
- No motion evidence to assess interactive behavior of the horizontal card overflow
- Typography and color choices are default SaaS conventions without any memorable treatment

Why it does not reach the next tier: The section is well-organized and legible but relies entirely on a common card-grid convention with generic icons and no distinctive composition, type treatment, or motion evidence to push it into 'strong' territory.

## Adaptation guidance

- Effort: Low
- Guidance: Reuse the card template (icon, title, body, link) and the heading/body/card-grid/text-block layout sequence; swap icons, copy, and channel list for a new domain. No motion or distinctive compositional cues require special effort to replicate.

What transfers:
- Icon + title + description + link card pattern
- Section heading/subheading + card grid + text block layout sequence
- Founder-note text block as a secondary content pattern

Dependencies:
- Custom icon set per channel
- Brand-specific copy tone and channel list

## 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 provided, so interactive/scroll behavior of overflow card could not be scored
- Exact icon rendering and card border/radius details not fully specified in 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: features
- Source type: feature-grid
- Structure: two-column
- Layout: Centered heading followed by a three-column card grid, ending with a centered two-column text block.
- Styles: minimal
- Components: heading, icon cards, text blocks, links
- Purpose: A three-column grid of minimal feature cards displaying different support channels, followed by a text block.
- Visual signature: Clean white background with simple outlined cards containing tiny icons and text.
- Place on the page: 4 of 16, after Feature collection (`31f2318e-c021-410b-979e-9df9f8467810`), before Feature collection (`getfernand-com:product-strategy-cards`)

### 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": "38px",
      "family": "Inter",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-5: computed CSS at 1440×1000; AI role: 38px Inter used for the main hero headline 'The free customer support platform...'.",
      "sampleId": "font-5",
      "confidence": 0.95,
      "lineHeight": "48px",
      "letterSpacing": "normal"
    },
    {
      "role": "heading",
      "size": "30px",
      "family": "Inter",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-3: computed CSS at 1440×1000; AI role: 30px Inter used for section headings like 'Consolidate all your support channels...'.",
      "sampleId": "font-3",
      "confidence": 0.9,
      "lineHeight": "38px",
      "letterSpacing": "normal"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "Inter",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-7: computed CSS at 1440×1000; AI role: 16px Inter used for standard paragraph text describing features.",
      "sampleId": "font-7",
      "confidence": 0.9,
      "lineHeight": "26px",
      "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": "#1A2035",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-5: computed rgb(26, 32, 53); AI role: #1A2035 used for primary headings and high-contrast text.",
      "sampleId": "color-5",
      "confidence": 0.95
    },
    {
      "hex": "#FFFFFF",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-1: computed rgb(255, 255, 255); AI role: White used extensively for page backgrounds and card backgrounds.",
      "sampleId": "color-1",
      "confidence": 0.9
    },
    {
      "hex": "#717583",
      "name": "muted text",
      "role": "muted-text",
      "source": "computed",
      "evidence": "color-6: computed rgb(113, 117, 131); AI role: #717583 used for secondary text and descriptions.",
      "sampleId": "color-6",
      "confidence": 0.9
    },
    {
      "hex": "#00A0FF",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-24: computed rgb(0, 160, 255); AI role: #00A0FF used for primary buttons ('Start for free').",
      "sampleId": "color-24",
      "confidence": 0.9
    },
    {
      "hex": "#F7FAFC",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-2: computed rgb(247, 250, 252); AI role: #F7FAFC used as a subtle off-white background for specific sections to differentiate them from the main canvas.",
      "sampleId": "color-2",
      "confidence": 0.85
    },
    {
      "hex": "#151618",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-7: computed rgb(21, 22, 24); AI role: #151618 used for the dark footer background.",
      "sampleId": "color-7",
      "confidence": 0.8
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Large radii on UI mockups and smaller, but noticeable, radii on buttons and smaller cards.",
  "density": "Low density; the design prioritizes whitespace and clear separation of elements over packing information tightly.",
  "evidence": "Observation of layout structure in screenshots, consistent application of border-radius in UI elements, and distinct button variations.",
  "borderStyle": "Subtle, light borders (e.g., color-8, color-35) used to define cards and form elements without adding visual noise.",
  "buttonStyle": "Solid fill for primary actions, outline or subtle backgrounds for secondary actions, often with rounded corners.",
  "cornerStyle": "Consistent use of rounded corners on buttons, cards, and product UI mockups.",
  "contentWidth": "Centered content with a constrained maximum width to ensure readability, though background images/gradients often bleed to the edges.",
  "spacingRhythm": "Generous spacing with significant whitespace between major sections, contributing to the 'calm' aesthetic."
}
```

### 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: low
- What transfers: Icon + title + description + link card pattern; Section heading/subheading + card grid + text block layout sequence; Founder-note text block as a secondary content pattern
- Dependencies: Custom icon set per channel; Brand-specific copy tone and channel list
- Guidance: Reuse the card template (icon, title, body, link) and the heading/body/card-grid/text-block layout sequence; swap icons, copy, and channel list for a new domain. No motion or distinctive compositional cues require special effort to replicate.

### 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 “Channel consolidation feature cards”.

Purpose: A three-column grid of minimal feature cards displaying different support channels, followed by a text block.

Structure: two-column. Source layout label: Centered heading followed by a three-column card grid, ending with a centered two-column text block.. 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: Clean white background with simple outlined cards containing tiny icons and text.

Components: heading, icon cards, text blocks, links.

Style direction: minimal.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"38px","family":"Inter","source":"computed","traits":"Regular","weight":"400","evidence":"font-5: computed CSS at 1440×1000; AI role: 38px Inter used for the main hero headline 'The free customer support platform...'.","sampleId":"font-5","confidence":0.95,"lineHeight":"48px","letterSpacing":"normal"} {"role":"heading","size":"30px","family":"Inter","source":"computed","traits":"Regular","weight":"400","evidence":"font-3: computed CSS at 1440×1000; AI role: 30px Inter used for section headings like 'Consolidate all your support channels...'.","sampleId":"font-3","confidence":0.9,"lineHeight":"38px","letterSpacing":"normal"} {"role":"body","size":"16px","family":"Inter","source":"computed","traits":"Regular","weight":"400","evidence":"font-7: computed CSS at 1440×1000; AI role: 16px Inter used for standard paragraph text describing features.","sampleId":"font-7","confidence":0.9,"lineHeight":"26px","letterSpacing":"normal"}

Color evidence: {"hex":"#1A2035","name":"text","role":"text","source":"computed","evidence":"color-5: computed rgb(26, 32, 53); AI role: #1A2035 used for primary headings and high-contrast text.","sampleId":"color-5","confidence":0.95} {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-1: computed rgb(255, 255, 255); AI role: White used extensively for page backgrounds and card backgrounds.","sampleId":"color-1","confidence":0.9} {"hex":"#717583","name":"muted text","role":"muted-text","source":"computed","evidence":"color-6: computed rgb(113, 117, 131); AI role: #717583 used for secondary text and descriptions.","sampleId":"color-6","confidence":0.9} {"hex":"#00A0FF","name":"primary action","role":"primary-action","source":"computed","evidence":"color-24: computed rgb(0, 160, 255); AI role: #00A0FF used for primary buttons ('Start for free').","sampleId":"color-24","confidence":0.9} {"hex":"#F7FAFC","name":"surface","role":"surface","source":"computed","evidence":"color-2: computed rgb(247, 250, 252); AI role: #F7FAFC used as a subtle off-white background for specific sections to differentiate them from the main canvas.","sampleId":"color-2","confidence":0.85} {"hex":"#151618","name":"surface","role":"surface","source":"computed","evidence":"color-7: computed rgb(21, 22, 24); AI role: #151618 used for the dark footer background.","sampleId":"color-7","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: Icon + title + description + link card pattern; Section heading/subheading + card grid + text block layout sequence; Founder-note text block as a secondary content pattern.

Dependencies: Custom icon set per channel; Brand-specific copy tone and channel list.

Adaptation guidance: Reuse the card template (icon, title, body, link) and the heading/body/card-grid/text-block layout sequence; swap icons, copy, and channel list for a new domain. No motion or distinctive compositional cues require special effort to replicate.

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