# Privacy Text List

Schema: Design Details SECTION.md v3.2
Website: Google Health App
Source: https://healthapp.google/
Source section IDs: gap-689119a5-10233-10841
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- The two-column split puts a large heading on the left and a short bulleted list on the right, so the privacy message reads in seconds.
- A small blue shield icon sits inside the heading and signals trust without any extra imagery.
- Warm cream canvas, near-black text and a single blue accent keep the block calm, with generous whitespace around three concise bullets and a link.

What a screenshot can't show:
- The recording showed no motion, so no animation timing or hover behavior can be described.
- No font sizes, spacing or padding were measured, so exact type scale and gaps are unknown.

Borrow: Pair a big, simple heading with a short scannable list and one small accent icon to make a sensitive message feel calm and trustworthy.
Leave alone: Don't copy the Google Sans typeface, the Google blue shield icon or the exact cream-and-blue palette; use a free geometric sans and your own accent and icon.

## Classification

- Type: features
- Layout: Two-column layout with a large heading on the left and a bulleted list on the right.
- Styles: minimal
- Confidence: 98%

## Purpose and structure

A minimal text-based feature block outlining privacy and data security points.

Visual signature: Solid cream background with a simple heading containing a blue shield icon, next to three bullet points.

## Components

- heading
- icon
- bullet-list
- link

## Typography

- Display: Google Sans — 80px 400
- Heading: Google Sans — 64px 400
- Body: Google Sans — 20px 400
- Mono: Google Sans — 12px 400

## Functional palette

- Surface: surface #FFFFFF
- Primary-Action: primary action #4285F4
- Canvas: canvas #F6F5F1
- Text: text #1F1F1F

## Motion evidence

- No section-specific authored motion was established.

## Section quality

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

- Typography: 58 — Clean two-weight hierarchy between large display heading and smaller body/bullet text, consistent with documented type scale, but no distinctive typographic treatment beyond scale contrast; standard Google Sans usage. Next tier: Needs more deliberate typographic personality (e.g., varied weights, emphasis treatment, or rhythm) beyond simple size contrast to move past familiar.
- Composition: 56 — Simple, legible two-column split with generous whitespace and left/right balance; inline icon in heading is a small thoughtful touch, but the layout is a very common text-left/list-right pattern with no tension or layered depth. Next tier: Lacks a distinguishing compositional device (asymmetry, layering, scale shift) that would make the grid feel considered rather than default.
- Motion: not_assessed — No motion_moments or timestamped evidence provided for this section. Next tier: Requires timestamped visible motion evidence to assess.
- Content: 55 — Content (heading, description, bullets, link) is clearly organized and purposeful for a privacy-trust message, but presentation is generic text-list integration with no custom visual support (e.g., diagram, imagery) tying content to design. Next tier: Needs tighter visual integration of content with a bespoke supporting element rather than plain bullet list to reach polished tier.
- Originality: 42 — This is a widely used pattern (heading + icon + bullet list) seen across many corporate privacy/features sections; the small shield icon is the only unique touch. Next tier: Requires a more distinctive visual or structural idea beyond the icon-in-heading motif to be memorable.
- Adaptability: 60 — Structure (heading, icon, list, link) is simple and clearly separable from skin; deterministic tokens (color, type) are well-defined, making reskinning straightforward. Next tier: Simplicity caps upside; no complex interaction or layered system to demonstrate deeper adaptability value.

Strengths:
- Clear two-column hierarchy separating headline message from supporting detail
- Icon integrated directly into heading text adds a small branded touch
- Generous whitespace reinforces a calm, trustworthy tone appropriate to privacy messaging

Weaknesses:
- Highly generic heading+bullet-list layout common across many feature sections
- No visual element beyond a small icon to reinforce the privacy theme
- Bullet list styling is plain with no custom markers or spacing treatment
- No motion evidence provided, so dynamic quality cannot be assessed

Why it does not reach the next tier: The section is legible and well-organized but relies entirely on a familiar heading/list pattern without a distinguishing compositional or typographic idea; nothing here resists substitution with a near-identical generic template.

## Adaptation guidance

- Effort: Low
- Guidance: Swap the icon, copy, and palette tokens while preserving the heading/list split; no structural rework needed since the layout is already modular.

What transfers:
- Two-column heading-to-list structure
- Icon-in-heading accent treatment
- Bulleted feature list format with trailing link

Dependencies:
- Google Sans typeface availability
- Shield icon asset matching brand

## 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 data available to assess animation quality
- No close-up evidence of bullet marker or spacing details
- Icon rendering fidelity not verifiable beyond crop resolution

## 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: Two-column layout with a large heading on the left and a bulleted list on the right.
- Styles: minimal
- Components: heading, icon, bullet-list, link
- Purpose: A minimal text-based feature block outlining privacy and data security points.
- Visual signature: Solid cream background with a simple heading containing a blue shield icon, next to three bullet points.
- Place on the page: 7 of 10, after Other (`healthapp-google:C09`), before Call to action (`healthapp-google:C11`)

### 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": "80px",
      "family": "Google Sans",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-8: computed CSS at 1440×1000; AI role: 80px Google Sans, used for the largest introductory hero text.",
      "sampleId": "font-8",
      "confidence": 1,
      "lineHeight": "96px",
      "letterSpacing": "-0.8px"
    },
    {
      "role": "heading",
      "size": "64px",
      "family": "Google Sans",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: 64px Google Sans, used for major section headings like 'Bring all your data into one place'.",
      "sampleId": "font-2",
      "confidence": 0.95,
      "lineHeight": "73.6px",
      "letterSpacing": "-0.5px"
    },
    {
      "role": "body",
      "size": "20px",
      "family": "Google Sans",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-11: computed CSS at 1440×1000; AI role: 20px Google Sans, used for standard body copy, such as the description of privacy controls.",
      "sampleId": "font-11",
      "confidence": 0.9,
      "lineHeight": "26px",
      "letterSpacing": "-0.2px"
    },
    {
      "role": "mono",
      "size": "12px",
      "family": "Google Sans",
      "source": "computed",
      "traits": "uppercase",
      "weight": "400",
      "evidence": "font-9: computed CSS at 1440×1000; AI role: 12px uppercase Google Sans used in the footer. Lacks a true monospace font, but serves the utility/meta text role.",
      "sampleId": "font-9",
      "confidence": 0.7,
      "lineHeight": "14.4px",
      "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": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-5: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used extensively for floating UI cards, mobile phone mockups, and pill backgrounds.",
      "sampleId": "color-5",
      "confidence": 0.95
    },
    {
      "hex": "#4285F4",
      "name": "primary action",
      "role": "primary-action",
      "source": "computed",
      "evidence": "color-18: computed rgb(66, 133, 244); AI role: Google Blue (#4285F4) used for primary Call to Action buttons like 'Download' and 'Try it now'.",
      "sampleId": "color-18",
      "confidence": 0.95
    },
    {
      "hex": "#F6F5F1",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-4: computed rgb(246, 245, 241); AI role: Off-white (#F6F5F1) used as a primary background color for large sections of the page.",
      "sampleId": "color-4",
      "confidence": 0.9
    },
    {
      "hex": "#1F1F1F",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(31, 31, 31); AI role: Dark grey (#1F1F1F) used for primary body copy and headings against light backgrounds.",
      "sampleId": "color-2",
      "confidence": 0.9
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Buttons appear fully rounded (pill). Cards have large radii (likely 16px-24px).",
  "density": "Low density. High reliance on negative space and large typographic scales to communicate a calm, clear message.",
  "evidence": "Observation of DOM sizes (fonts up to 80px), heavily rounded corner visuals in crops, and distinct separation of content blocks.",
  "borderStyle": "Mostly borderless to emphasize floating elements and shadows. Subtle 1px borders used for delineating FAQ items or footer elements.",
  "buttonStyle": "Solid fill primary buttons in blue. Pill-shaped geometry. White text.",
  "cornerStyle": "Heavily rounded, pill-shaped corners on buttons and badges. Distinctly rounded, almost squircle-like corners on floating UI cards and mobile phone device mockups.",
  "contentWidth": "Varies. Hero and specific feature sections are full-bleed (edge-to-edge). Informational sections (like FAQs or privacy) appear constrained to a central column.",
  "spacingRhythm": "Generous vertical spacing between major sections, often full viewport height for feature reveals. Large internal padding within floating UI 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

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: Two-column heading-to-list structure; Icon-in-heading accent treatment; Bulleted feature list format with trailing link
- Dependencies: Google Sans typeface availability; Shield icon asset matching brand
- Guidance: Swap the icon, copy, and palette tokens while preserving the heading/list split; no structural rework needed since the layout is already modular.

### 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 “Privacy Text List”.

Purpose: A minimal text-based feature block outlining privacy and data security points.

Structure: two-column. Source layout label: Two-column layout with a large heading on the left and a bulleted 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: Solid cream background with a simple heading containing a blue shield icon, next to three bullet points.

Components: heading, icon, bullet-list, link.

Style direction: minimal.

No deterministic crop dimensions were attached.

Typography evidence: {"role":"display","size":"80px","family":"Google Sans","source":"computed","traits":"Regular","weight":"400","evidence":"font-8: computed CSS at 1440×1000; AI role: 80px Google Sans, used for the largest introductory hero text.","sampleId":"font-8","confidence":1,"lineHeight":"96px","letterSpacing":"-0.8px"} {"role":"heading","size":"64px","family":"Google Sans","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: 64px Google Sans, used for major section headings like 'Bring all your data into one place'.","sampleId":"font-2","confidence":0.95,"lineHeight":"73.6px","letterSpacing":"-0.5px"} {"role":"body","size":"20px","family":"Google Sans","source":"computed","traits":"Regular","weight":"400","evidence":"font-11: computed CSS at 1440×1000; AI role: 20px Google Sans, used for standard body copy, such as the description of privacy controls.","sampleId":"font-11","confidence":0.9,"lineHeight":"26px","letterSpacing":"-0.2px"} {"role":"mono","size":"12px","family":"Google Sans","source":"computed","traits":"uppercase","weight":"400","evidence":"font-9: computed CSS at 1440×1000; AI role: 12px uppercase Google Sans used in the footer. Lacks a true monospace font, but serves the utility/meta text role.","sampleId":"font-9","confidence":0.7,"lineHeight":"14.4px","letterSpacing":"normal"}

Color evidence: {"hex":"#FFFFFF","name":"surface","role":"surface","source":"computed","evidence":"color-5: computed rgb(255, 255, 255); AI role: White (#FFFFFF) used extensively for floating UI cards, mobile phone mockups, and pill backgrounds.","sampleId":"color-5","confidence":0.95} {"hex":"#4285F4","name":"primary action","role":"primary-action","source":"computed","evidence":"color-18: computed rgb(66, 133, 244); AI role: Google Blue (#4285F4) used for primary Call to Action buttons like 'Download' and 'Try it now'.","sampleId":"color-18","confidence":0.95} {"hex":"#F6F5F1","name":"canvas","role":"canvas","source":"computed","evidence":"color-4: computed rgb(246, 245, 241); AI role: Off-white (#F6F5F1) used as a primary background color for large sections of the page.","sampleId":"color-4","confidence":0.9} {"hex":"#1F1F1F","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(31, 31, 31); AI role: Dark grey (#1F1F1F) used for primary body copy and headings against light backgrounds.","sampleId":"color-2","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.

Do not invent signature motion. Use only restrained baseline transitions if the product needs them.

Transfer these principles: Two-column heading-to-list structure; Icon-in-heading accent treatment; Bulleted feature list format with trailing link.

Dependencies: Google Sans typeface availability; Shield icon asset matching brand.

Adaptation guidance: Swap the icon, copy, and palette tokens while preserving the heading/list split; no structural rework needed since the layout is already modular.

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