Promptframe — Full-Bleed Color-Block Cobalt CTA
Confident color-block SaaS landing built from full-bleed bands (white to paper gray to ONE loud cobalt to dark ink), Space Grotesk tight-tracked headlines over Inter body, anchored by a saturated cobalt CTA band with dot-grain texture, soft white and deeper-cobalt glows, and a white drop-shadow pill button.
Summary
A full-bleed color-block landing page whose star is one saturated cobalt CTA band. It reads as a real page top to bottom: a glass blurred sticky nav (logo tile + 4 links + 'Start free' pill), a centered white intro section (a live-dot 'X prompts and counting' pill, a huge tight-tracked grotesk headline, a muted subhead, and a 3-item check-mark trust row), a full-bleed light-gray supporting strip with a 4-up stat grid, then the anchor: an edge-to-edge solid cobalt #1f4fff CTA band with a faint dot-grain texture and soft white/deeper-cobalt radial glows, holding an uppercase glass eyebrow pill, a giant white payoff headline, a white/85 subhead, a dual button row (a white pill primary with a heavy navy drop shadow beside a glass-outline secondary), and a small trust line. It closes on a full-bleed dark-ink #0a1230 footer with a 3-column link grid and a legal bar. The whole design is built from hard full-bleed color blocks (white -> light gray -> cobalt -> dark ink) seamed by 1px hairlines.
Style
A confident, modern color-block SaaS aesthetic where full-bleed bands of solid color do the work instead of cards or gradients-everywhere. The palette is disciplined: white and a near-black cobalt-ink #0a1230 for text/footer, a light paper gray #f6f7fb for the supporting strip, and ONE loud saturated cobalt #1f4fff (with #1a43e0 / #1536bd shades) that owns the hero accents and the entire star CTA band. Hierarchy comes from band background swaps and ink-opacity steps (cobalt-ink at /70 /60 /55 /50, white at /90 /85 /45 /40) rather than many hues. Two fonts split the labor: Space Grotesk at 700 with very tight tracking (-0.05em on display) for all headlines and stat numbers, and Inter for body and nav. The cobalt band gets tasteful depth without going soft: a 1px white/25 seam highlight across its top edge, a radial dot grain overlay, a big white/15 blurred glow blooming from top center, and two deeper-cobalt blurred glows pooling at the bottom corners. Buttons feel physical: the white primary carries a large navy-tinted drop shadow and lifts 2px on hover; pills and outlines use white-alpha. The mood is energetic and product-forward, an infinite-canvas design tool selling 'one prompt to shippable UI', loud where it counts (the cobalt band) and calm everywhere else.
Layout & Structure
A real framed landing page read as a vertical stack of full-bleed color blocks: a glass sticky nav, a centered white intro section (so the CTA has context above it), a full-bleed paper-gray supporting strip carrying a 4-up stat grid, then the anchor full-bleed cobalt CTA band, then a full-bleed dark-ink footer. Centered content lives in a mx-auto max-w-6xl column with px-6 gutters (the CTA band narrows its content to max-w-5xl, headline/subhead copy to max-w-4xl / max-w-xl). It reflows cleanly to one column on mobile: nav center links hide behind the logo + 'Start free', the trust rows wrap, the stat grid goes 2-col, the dual buttons stack full-width, and the footer link grid collapses 3-col -> 2-col.
Glass sticky nav
Centered white intro section
Full-bleed paper supporting strip (4-up stats)
THE STAR: full-bleed cobalt CTA band
CTA eyebrow + payoff headline + subhead
Dual button row + trust line
Full-bleed dark-ink footer
Special Notes
Palette is white + ink + ONE cobalt only: white #ffffff (page), cobalt-ink #0a1230 (dark text + footer field), paper #f6f7fb (supporting strip band), cobalt #1f4fff (the single loud accent) with shades cobalt-600 #1a43e0 and cobalt-700 #1536bd (used for the hover state and the deeper-cobalt bottom glows). No second bright hue is introduced; hierarchy is band-swap + opacity steps (dark text at cobalt-ink full/70/60/55/50; white at /90/85/45/40). Two Google fonts: Space Grotesk (400-700) for ALL headlines + stat numbers (font-700, .tight -0.035em and .tighter -0.05em tracking, leading 0.95-0.98, clamp() sizes), Inter (400-600) for body/nav/trust/footer. Icons are Iconify Phosphor: ph:bounding-box-bold (logo), ph:check-circle-fill (trust row), ph:sparkle-fill (CTA eyebrow), ph:arrow-right-bold (primary button). The signature language is full-bleed solid color blocks (white -> paper -> cobalt -> ink) seamed by 1px hairlines, with the loud cobalt band rationed to one climactic section that gets soft depth from a top seam highlight + dot grain + a white top bloom + two deeper-cobalt corner pools, plus a white drop-shadow pill button. To transfer the STYLE: keep white + ink + ONE loud cobalt, the two-font split (Space Grotesk tight display over Inter body), the band-swap hierarchy, and the soft-but-not-muddy depth on the single saturated block. To transfer the LAYOUT: keep the framed stack (glass sticky nav -> centered white intro with pill + huge headline + check trust row -> paper 4-up stat strip -> full-bleed cobalt CTA band: eyebrow -> payoff headline -> subhead -> white-pill + glass-outline dual buttons -> trust line -> dark-ink 3-column footer). All copy avoids em-dashes.