# Centered text CTA over faded tags

Schema: Design Details SECTION.md v3.2
Website: DualEntry
Source: https://www.dualentry.com/
Source section IDs: eb019a39-3453-4869-b723-899e033a913a
Status: AI analysed; vocabulary promotion is automated

## Builder's note

What makes it work:
- The short two-line message sits dead centre, so the eye lands on it first with no competition.
- The background tags are pushed so light that they read as texture, which echoes the feature grid before it and keeps continuity.
- Type stays restrained: a 24px heading over 16px tag labels on white, with near-black text and pale grey-blue borders.

What a screenshot can't show:
- The recording showed no motion, so this block appears to be static.
- Heading line height is 28.8px (1.2) and the tag labels are 16px at weight 300 or 400, with 8px gaps between tags and normal letter spacing.

Borrow: Reuse the previous section's elements as a faded pattern behind a short centered message to carry the story into the call to action.
Leave alone: Don't copy the exact tag labels, the pale blue-grey palette or the Twklausanne typeface; a free neutral grotesque like Inter would do the same job.

## Classification

- Type: cta
- Layout: Centered text block overlapping a background pattern of scattered tags.
- Styles: minimal, corporate
- Confidence: 85%

## Purpose and structure

A transitional call-to-action block featuring centered text and a text link, overlaid on a background of faded out feature tags.

Visual signature: Small centered text snippet floating above a sea of very light, faded out UI tags.

## Components

- centered-text
- text-link
- faded-background-pattern

## Typography

- Display: Twklausanne — 56px 400
- Heading: Twklausanne — 48px 400
- Body: Twklausanne — 16px 300

## Functional palette

- Text: text #1D1F20
- Canvas: canvas #FFFFFF
- Border: border #E4EBEC
- Surface: surface #1C1D1E

## Motion evidence

- No section-specific authored motion was established.

## Section quality

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

- Typography: 56 — Simple serif-free heading in dark text centered over a lighter tag field, with a smaller link below. Clean hierarchy between heading and link but minimal type sophistication — standard weight/size pairing with no distinctive treatment. Next tier: Needs more deliberate type scale contrast, custom tracking, or a secondary typographic detail to move past baseline competence.
- Composition: 58 — Centered text floats cleanly over a symmetric grid of faded background tags, creating a simple figure-ground separation. The layout is legible and balanced but very basic — a single centered block with no additional compositional tension or asymmetry. Next tier: Needs more layered depth, intentional spacing rhythm, or asymmetric balance to feel more considered rather than a generic centered CTA.
- Motion: not_assessed — No motion_moments or animation data supplied for this crop; cannot assess. Next tier: Provide timestamped visible motion evidence to assess this axis.
- Content: 55 — The faded tag cloud behind the text directly echoes the preceding feature-grid section, giving some narrative continuity, but the CTA text itself is generic transitional copy with little unique content value. Next tier: Needs copy or imagery that adds distinct narrative weight beyond reiterating the prior section's visual motif.
- Originality: 52 — The faded-tag-background-behind-centered-text device is a recognizable transitional trick seen in many SaaS sites; execution is competent but not distinctive. Next tier: Requires a more unusual visual or structural idea beyond the common faded-background-CTA pattern to be memorable.
- Adaptability: 60 — Structure is simple and modular: a centered text block with a link overlaid on a background pattern, easily separable from skin via deterministic tokens (color, font, radius) supplied. Next tier: Lacks any complex interactive or responsive behavior documented that would demonstrate deeper structural robustness across breakpoints.

Strengths:
- Clean centered hierarchy between heading and CTA link
- Faded tag background creates a soft visual bridge from the previous section
- Generous whitespace keeps the transitional block uncluttered

Weaknesses:
- Generic centered-CTA-over-faded-background pattern common across SaaS sites
- No motion evidence to assess dynamic behavior
- Typography lacks distinctive scale or treatment
- Content is purely transitional with minimal unique value

Why it does not reach the next tier: The section is a clean, functional transition point but all its elements—type, composition, originality—sit squarely at a familiar baseline with no distinguishing craft detail, additional depth, or hard-to-substitute idea to push it into strong/memorable territory.

## Adaptation guidance

- Effort: Low
- Guidance: Reuse the centered-text-over-faded-pattern structure with any brand's own feature icon set and color tokens; the layout itself is not deeply coupled to proprietary assets.

What transfers:
- Centered text + link layout
- Faded background tag pattern technique
- Overall transitional CTA structure

Dependencies:
- Specific tag icon set and label content from the feature grid
- Exact font family (Twklausanne) and color tokens

## 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 evaluate interactive or animated behavior
- No mobile/responsive evidence supplied
- Color and font details limited to global tokens, not section-specific confirmation

## 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: cta
- Source type: cta
- Structure: centered single-column
- Layout: Centered text block overlapping a background pattern of scattered tags.
- Styles: minimal, corporate
- Components: centered-text, text-link, faded-background-pattern
- Purpose: A transitional call-to-action block featuring centered text and a text link, overlaid on a background of faded out feature tags.
- Visual signature: Small centered text snippet floating above a sea of very light, faded out UI tags.
- Place on the page: 4 of 9, after Feature collection (`dualentry-com:C03`), before Testimonials (`dualentry-com:C05`)

### Crop and composition

- Crop: 1440×248px; aspect ratio 5.806:1
- Page bounds: 2243–2491px of 6763px
- 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": [
    {
      "role": "section heading",
      "family": "Twklausanne",
      "stack": "Twklausanne, sans-serif",
      "size": "24px",
      "weight": "400",
      "lineHeight": "28.8px",
      "letterSpacing": "normal",
      "sample": "The full picture.Not just a piece of it.",
      "element": "h2",
      "occurrences": 1,
      "sourceId": "font-6"
    },
    {
      "role": "UI/supporting text",
      "family": "Twklausanne",
      "stack": "Twklausanne, sans-serif",
      "size": "16px",
      "weight": "400",
      "lineHeight": "19.2px",
      "letterSpacing": "normal",
      "sample": "Anomaly detection",
      "element": "div",
      "occurrences": 90,
      "sourceId": "font-14"
    },
    {
      "role": "UI/supporting text",
      "family": "Twklausanne",
      "stack": "Twklausanne, sans-serif",
      "size": "16px",
      "weight": "300",
      "lineHeight": "16px",
      "letterSpacing": "normal",
      "sample": "120+ reviews",
      "element": "div",
      "occurrences": 2,
      "sourceId": "font-17"
    }
  ],
  "siteRoles": [
    {
      "role": "display",
      "size": "56px",
      "family": "Twklausanne",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-4: computed CSS at 1440×1000; AI role: Large 56px Twklausanne used for the main hero headline 'The AI ERP to end month-end'.",
      "sampleId": "font-4",
      "confidence": 0.95,
      "lineHeight": "61.6px",
      "letterSpacing": "normal"
    },
    {
      "role": "heading",
      "size": "48px",
      "family": "Twklausanne",
      "source": "computed",
      "traits": "Regular",
      "weight": "400",
      "evidence": "font-2: computed CSS at 1440×1000; AI role: 48px Twklausanne used for primary section headings like 'The accounting suite that runs while you lead.'",
      "sampleId": "font-2",
      "confidence": 0.9,
      "lineHeight": "52.8px",
      "letterSpacing": "normal"
    },
    {
      "role": "body",
      "size": "16px",
      "family": "Twklausanne",
      "source": "computed",
      "traits": "Regular",
      "weight": "300",
      "evidence": "font-7: computed CSS at 1440×1000; AI role: 16px Twklausanne used widely for body copy, subheadings, and buttons.",
      "sampleId": "font-7",
      "confidence": 0.85,
      "lineHeight": "24px",
      "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": [
    {
      "value": "#3D4343",
      "cssValue": "rgba(61, 67, 68, 0.8)",
      "alpha": 0.8,
      "appliedAs": [
        "text",
        "svg-fill"
      ],
      "occurrences": 103,
      "sourceId": "color-1"
    },
    {
      "value": "#F5F6F6",
      "cssValue": "rgb(245, 246, 246)",
      "alpha": 1,
      "appliedAs": [
        "background"
      ],
      "occurrences": 90,
      "sourceId": "color-5"
    },
    {
      "value": "#FFFFFF",
      "cssValue": "rgba(255, 255, 255, 0.15)",
      "alpha": 0.14901960784313725,
      "appliedAs": [
        "border",
        "background"
      ],
      "occurrences": 49,
      "sourceId": "color-16"
    },
    {
      "value": "#206570",
      "cssValue": "rgb(32, 101, 112)",
      "alpha": 1,
      "appliedAs": [
        "svg-stroke"
      ],
      "occurrences": 44,
      "sourceId": "color-17"
    }
  ],
  "functionalPalette": [
    {
      "hex": "#1D1F20",
      "name": "text",
      "role": "text",
      "source": "computed",
      "evidence": "color-2: computed rgb(29, 31, 32); AI role: Dark grey (#1D1F20) used heavily for headings and primary text on light backgrounds.",
      "sampleId": "color-2",
      "confidence": 0.95
    },
    {
      "hex": "#FFFFFF",
      "name": "canvas",
      "role": "canvas",
      "source": "computed",
      "evidence": "color-3: computed rgb(255, 255, 255); AI role: White background dominates the feature and migration sections.",
      "sampleId": "color-3",
      "confidence": 0.9
    },
    {
      "hex": "#E4EBEC",
      "name": "border",
      "role": "border",
      "source": "computed",
      "evidence": "color-9: computed rgb(228, 235, 236); AI role: Light grey/blue (#E4EBEC) is used extensively for borders on feature cards and input fields.",
      "sampleId": "color-9",
      "confidence": 0.9
    },
    {
      "hex": "#1C1D1E",
      "name": "surface",
      "role": "surface",
      "source": "computed",
      "evidence": "color-18: computed rgb(28, 29, 30); AI role: Dark surface (#1C1D1E) used for the testimonial carousel and footer areas.",
      "sampleId": "color-18",
      "confidence": 0.85
    }
  ]
}
```

### Design tokens

```json
{
  "radius": "Medium border radius appears common on cards and buttons.",
  "density": "Moderate density; ample whitespace around main elements, but dense information packing within feature cards and footer links.",
  "evidence": "Observed via the bento-box feature grid, consistent button styling, and organized footer layout.",
  "borderStyle": "Subtle, thin solid borders (e.g., 1px) used to define cards and form elements.",
  "buttonStyle": "Solid white primary buttons on dark backgrounds, dark solid buttons on light backgrounds, with rounded corners.",
  "cornerStyle": "Consistent use of rounded corners on buttons, inputs, and feature cards.",
  "contentWidth": "Content is generally constrained to a central max-width, though background gradients and banners span full width.",
  "spacingRhythm": "Generous spacing between major sections, with tighter padding inside feature cards and UI components."
}
```

### Reconstruction specification

This is the implementation contract for the captured desktop viewport. Prefer section-specific facts here over general website descriptions.

- Root: 1440×248px; block; padding {"top":"0px","left":"0px","right":"0px","bottom":"0px"}; gap normal; background rgba(0, 0, 0, 0); radius 0px.
- Observed gaps: 8px.
- Layout containers: 0; cards/surfaces: 0; media elements: 1; browser animations: 0.

#### Container, grid, and spacing

```json
{
  "viewport": {
    "width": 1440,
    "captureBounds": {
      "top": 2243,
      "bottom": 2491,
      "pageHeight": 6763
    }
  },
  "container": {
    "size": "1440×248px",
    "position": "x 0px, y 2243px",
    "display": "block",
    "positionMode": "static",
    "padding": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "gap": "normal",
    "columns": "not captured",
    "background": "rgba(0, 0, 0, 0)",
    "radius": "0px",
    "border": "0px none rgba(61, 67, 68, 0.8)",
    "shadow": "none",
    "overflow": "visible"
  },
  "spacing": {
    "observedGapsPx": [
      8
    ],
    "representativeContentWidthsPx": []
  },
  "columns": []
}
```

#### Cards and surfaces

```json
{
  "cards": [],
  "surfaces": {
    "radii": [
      "2px"
    ],
    "borders": [],
    "shadows": []
  }
}
```

#### Media treatment

```json
[
  {
    "element": "svg · svg",
    "size": "16×16px",
    "position": "x 756px, y 2348px",
    "aspectRatio": 1,
    "objectFit": "fill",
    "objectPosition": "50% 50%",
    "radius": "0px",
    "overflow": "hidden",
    "source": "source not captured"
  }
]
```

#### 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
{
  "root": {
    "id": "ld-2306",
    "gap": "normal",
    "tag": "section",
    "rect": {
      "x": 0,
      "y": 2243,
      "width": 1440,
      "height": 248
    },
    "role": null,
    "label": "The full picture.Not just a piece of it.Get started /* Default state of the icon */ [data-move=\"true",
    "border": "0px none rgba(61, 67, 68, 0.8)",
    "margin": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "radius": "0px",
    "shadow": "none",
    "columns": null,
    "display": "block",
    "padding": {
      "top": "0px",
      "left": "0px",
      "right": "0px",
      "bottom": "0px"
    },
    "overflow": "visible",
    "position": "static",
    "background": "rgba(0, 0, 0, 0)"
  },
  "cards": [],
  "media": [
    {
      "id": "ld-2317",
      "tag": "svg",
      "rect": {
        "x": 756,
        "y": 2348,
        "width": 16,
        "height": 16
      },
      "role": "img",
      "label": "svg",
      "media": null,
      "radius": "0px",
      "overflow": "hidden",
      "objectFit": "fill",
      "aspectRatio": 1,
      "objectPosition": "50% 50%"
    }
  ],
  "bounds": {
    "top": 2243,
    "bottom": 2491,
    "pageHeight": 6763
  },
  "schema": "little-details-section-measurements-v1",
  "source": "saved DOM/CSS element and animation maps",
  "columns": [],
  "spacing": {
    "gapsPx": [
      8
    ],
    "representativeContentWidthsPx": []
  },
  "coverage": {
    "cards": 0,
    "media": 1,
    "animations": 0,
    "elementsInSection": 26
  },
  "surfaces": {
    "radii": [
      "2px"
    ],
    "borders": [],
    "shadows": []
  },
  "animations": [],
  "capturedAt": "2026-10-29T16:48:55.968Z",
  "limitations": [
    "Values describe the captured desktop viewport and may change at other breakpoints.",
    "Transforms, sticky layers, and virtualized content can make the inferred section root approximate.",
    "Animations include browser-exposed Web Animations API state; CSS or script motion that was inactive at capture time may be absent."
  ],
  "viewportWidth": 1440
}
```

### 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: 1440px 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 text + link layout; Faded background tag pattern technique; Overall transitional CTA structure
- Dependencies: Specific tag icon set and label content from the feature grid; Exact font family (Twklausanne) and color tokens
- Guidance: Reuse the centered-text-over-faded-pattern structure with any brand's own feature icon set and color tokens; the layout itself is not deeply coupled to proprietary assets.

### Evidence readiness

- Coverage: 7/7
- Can build: Yes
- Missing facts: timestamped authored motion
- Warning: Buildable with adaptations for these unsupported facts: timestamped authored motion.

### Agent implementation prompt

Create an original cta section inspired by the design evidence titled “Centered text CTA over faded tags”.

Purpose: A transitional call-to-action block featuring centered text and a text link, overlaid on a background of faded out feature tags.

Structure: centered single-column. Source layout label: Centered text block overlapping a background pattern of scattered tags.. Use a narrow central reading axis and deliberate scale contrast rather than adding unnecessary side content.

Visual signature to preserve at the pattern level: Small centered text snippet floating above a sea of very light, faded out UI tags.

Components: centered-text, text-link, faded-background-pattern.

Style direction: minimal, corporate.

Observed crop: 1440×248px (5.806:1). Treat this as evidence of composition, not a mandatory output size.

Typography evidence: {"role":"display","size":"56px","family":"Twklausanne","source":"computed","traits":"Regular","weight":"400","evidence":"font-4: computed CSS at 1440×1000; AI role: Large 56px Twklausanne used for the main hero headline 'The AI ERP to end month-end'.","sampleId":"font-4","confidence":0.95,"lineHeight":"61.6px","letterSpacing":"normal"} {"role":"heading","size":"48px","family":"Twklausanne","source":"computed","traits":"Regular","weight":"400","evidence":"font-2: computed CSS at 1440×1000; AI role: 48px Twklausanne used for primary section headings like 'The accounting suite that runs while you lead.'","sampleId":"font-2","confidence":0.9,"lineHeight":"52.8px","letterSpacing":"normal"} {"role":"body","size":"16px","family":"Twklausanne","source":"computed","traits":"Regular","weight":"300","evidence":"font-7: computed CSS at 1440×1000; AI role: 16px Twklausanne used widely for body copy, subheadings, and buttons.","sampleId":"font-7","confidence":0.85,"lineHeight":"24px","letterSpacing":"normal"}

Color evidence: {"hex":"#1D1F20","name":"text","role":"text","source":"computed","evidence":"color-2: computed rgb(29, 31, 32); AI role: Dark grey (#1D1F20) used heavily for headings and primary text on light backgrounds.","sampleId":"color-2","confidence":0.95} {"hex":"#FFFFFF","name":"canvas","role":"canvas","source":"computed","evidence":"color-3: computed rgb(255, 255, 255); AI role: White background dominates the feature and migration sections.","sampleId":"color-3","confidence":0.9} {"hex":"#E4EBEC","name":"border","role":"border","source":"computed","evidence":"color-9: computed rgb(228, 235, 236); AI role: Light grey/blue (#E4EBEC) is used extensively for borders on feature cards and input fields.","sampleId":"color-9","confidence":0.9} {"hex":"#1C1D1E","name":"surface","role":"surface","source":"computed","evidence":"color-18: computed rgb(28, 29, 30); AI role: Dark surface (#1C1D1E) used for the testimonial carousel and footer areas.","sampleId":"color-18","confidence":0.85}

Typography measured inside this section: {"id":"font-6","size":"24px","count":1,"family":"Twklausanne","traits":"Regular","weight":"400","contexts":[{"tag":"h2","top":2267,"text":"The full picture.Not just a piece of it.","property":"font"}],"fontStack":"Twklausanne, sans-serif","lineHeight":"28.8px","letterSpacing":"normal"} {"id":"font-14","size":"16px","count":90,"family":"Twklausanne","traits":"Regular","weight":"400","contexts":[{"tag":"div","top":2256,"text":"Anomaly detection","property":"font"},{"tag":"div","top":2256,"text":"Approval Workflows","property":"font"},{"tag":"div","top":2256,"text":"Bank-fee automation","property":"font"}],"fontStack":"Twklausanne, sans-serif","lineHeight":"19.2px","letterSpacing":"normal"} {"id":"font-17","size":"16px","count":2,"family":"Twklausanne","traits":"Regular","weight":"300","contexts":[{"tag":"div","top":265,"text":"120+ reviews","property":"font"},{"tag":"div","top":2348,"text":"Get started","property":"font"}],"fontStack":"Twklausanne, sans-serif","lineHeight":"16px","letterSpacing":"normal"}

Colors measured inside this section: {"id":"color-1","hex":"#3D4343","alpha":0.8,"count":103,"contexts":[{"tag":"video","top":67,"text":"Your browser does not support the video tag.","property":"text"},{"tag":"div","top":2256,"text":"Anomaly detection","property":"text"},{"tag":"circle","top":2261,"text":"","property":"svg-fill"}],"cssValue":"rgba(61, 67, 68, 0.8)"} {"id":"color-5","hex":"#F5F6F6","alpha":1,"count":90,"contexts":[{"tag":"div","top":2243,"text":"Anomaly detection","property":"background"}],"cssValue":"rgb(245, 246, 246)"} {"id":"color-16","hex":"#FFFFFF","alpha":0.14901960784313725,"count":49,"contexts":[{"tag":"div","top":2490,"text":"Discover the ambitious teamssaving time & money on DualEntry View all customer stories .stories_top-","property":"border"},{"tag":"div","top":2740,"text":"","property":"background"},{"tag":"a","top":3339,"text":"Read case study .stories_btn2 .display-inlineflex{ transition: transform 200ms ease-in; } .stories_b","property":"border"}],"cssValue":"rgba(255, 255, 255, 0.15)"} {"id":"color-17","hex":"#206570","alpha":1,"count":44,"contexts":[{"tag":"svg","top":2257,"text":"","property":"svg-stroke"},{"tag":"path","top":2259,"text":"","property":"svg-stroke"},{"tag":"circle","top":2261,"text":"","property":"svg-stroke"}],"cssValue":"rgb(32, 101, 112)"}

Exact section measurements from the saved element map: root {"rect":{"x":0,"y":2243,"width":1440,"height":248},"padding":{"top":"0px","left":"0px","right":"0px","bottom":"0px"},"gap":"normal","columns":null,"overflow":"visible"}; spacing {"gapsPx":[8],"representativeContentWidthsPx":[]}; surfaces {"radii":["2px"],"borders":[],"shadows":[]}; media [{"tag":"svg","rect":{"x":756,"y":2348,"width":16,"height":16},"aspectRatio":1,"objectFit":"fill","objectPosition":"50% 50%","radius":"0px"}]

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

Transfer these principles: Centered text + link layout; Faded background tag pattern technique; Overall transitional CTA structure.

Dependencies: Specific tag icon set and label content from the feature grid; Exact font family (Twklausanne) and color tokens.

Adaptation guidance: Reuse the centered-text-over-faded-pattern structure with any brand's own feature icon set and color tokens; the layout itself is not deeply coupled to proprietary assets.

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