SUUR — Productized Engagement Cards
Other · Design and development agency
Call to action · Design and development agency
An isolated rounded black CTA panel with sculptural ribbed background, centered question-led heading, short invitation and outlined booking action.
Download DESIGN.md into your project and ask your coding agent to follow it alongside this reference. Review inferred values against the original before implementation.
---
version: alpha
name: SUUR — Textured Strategy-call CTA
colors:
canvas: '#FFFFFF'
text: '#FFFFFF'
typography:
heading:
fontFamily: Termina, sans-serif
fontSize: 48px
fontWeight: 700
lineHeight: 48px
body:
fontFamily: Inter, sans-serif
fontSize: 18px
fontWeight: 400
lineHeight: 28px
---
## Overview
An isolated rounded black CTA panel with sculptural ribbed background, centered question-led heading, short invitation and outlined booking action. Inspected on 2026-10-01 at 1440px and 390px viewport widths. This reference crops only `main > section:last-of-type` from the source page.
## Colors
The YAML palette records computed opaque CSS text/action colors. The canvas is the computed background where opaque; for transparent roots it is sampled from the native screenshot corner. Gradients are described visually rather than assigned invented stop values. Gradients, illustration hues and brand-logo colors should not be flattened into one universal accent. Preserve the visual contrast between the main reading surface, text and actions shown in the capture.
## Typography
The selected h2 sample uses Termina, sans-serif, 48px / 48px, weight 700; supporting text uses 18px / 28px. Its corresponding mobile sample is 30px / 36px. These are computed source samples, not a claim that all text uses the same style. Use properly licensed fonts or appropriate fallbacks when adapting.
## Layout
The wide desktop panel becomes a taller narrow mobile card; the decorative texture remains behind the content. Measured screenshot bounds: 1440 × 854px desktop and 390 × 731px mobile. Two observed widths do not establish the exact CSS breakpoint rules.
## Elevation & Depth
Mostly flat backgrounds; subtle card gradients, device images and a ribbed dark contact illustration add depth.
## Shapes
Bold wide sans-serif headings mix with italic serif emphasis; large white pills, rounded black service cards and neat project tiles.
## Components
An isolated rounded black CTA panel with sculptural ribbed background, centered question-led heading, short invitation and outlined booking action. Black and white sections with acid-green offer details and light warm-gray secondary surfaces. Captured logged out at two widths. Menu, booking, form submission, hover and alternate carousel states were not exercised.
## Do's and Don'ts
Make one concrete offer dominant. Separate a fixed sprint from an ongoing engagement and explain the delivery sequence without copying the source promises. Reuse layout principles, not client logos, testimonials, proprietary artwork or source performance claims. Provide keyboard focus, meaningful labels and reduced-motion alternatives in any implementation; those recommendations are not claims of source behavior tested here.
## Capture scope
Viewport strips with overlapping gutters to avoid repeated fixed navigation; static scroll-state montage, not animation playback. Images preserve native rendered pixels; different vertical regions show their actual scroll positions. This is not a video.
If copying fails, download the file or select the text above.
Design belongs to its original creator. Use this example for inspiration, not as a licensed template.