Eleken — Interface-led Case-study Results Grid
Other · Design and development agency
Call to action · Design and development agency
An isolated pale offer panel with orange geometric artwork, a compact trial invitation and a dark start 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: Eleken — Low-friction Design Subscription Trial CTA
colors:
canvas: '#F9F7F3'
text: '#1D1E22'
observed-1: '#717171'
observed-2: '#FFFFFF'
typography:
heading:
fontFamily: Regolapro, sans-serif
fontSize: 32px
fontWeight: 500
lineHeight: 40px
body:
fontFamily: '"Inter Variable Local", Arial, sans-serif'
fontSize: 15px
fontWeight: 400
lineHeight: 25.0001px
---
## Overview
An isolated pale offer panel with orange geometric artwork, a compact trial invitation and a dark start action. Inspected on 2026-10-01 at 1440px and 390px viewport widths. This reference crops only `section:has-text("Test our SaaS design subscription on your own product")` 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 Regolapro, sans-serif, 32px / 40px, weight 500; supporting text uses 15px / 25.0001px. Its corresponding mobile sample is 22px / 30px. 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
Artwork and text sit alongside each other at desktop; the narrow crop stacks them with the heading and action retained together. Measured screenshot bounds: 1440 × 694px desktop and 390 × 811px mobile. Two observed widths do not establish the exact CSS breakpoint rules.
## Elevation & Depth
Fine borders, pale surface changes and wireframe-style illustrations replace heavy shadows.
## Shapes
Compact rounded black buttons, rectangular evidence grids, line-art cubes and airy typographic sections.
## Components
An isolated pale offer panel with orange geometric artwork, a compact trial invitation and a dark start action. Warm off-white canvas with near-black text and actions, white cards and restrained orange geometric accents. Captured logged out at two widths. Menu, booking, form submission, hover and alternate carousel states were not exercised.
## Do's and Don'ts
Organize service choices around the customer’s product problem and show a concrete interface next to each source case study. 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.