---
id: "2115716767783727221"
source: https://x.com/AshikArtistry/status/2115716767783727221
author: "Ashik (@AshikArtistry)"
media: "photo, 1280x720"
model: claude-opus-5-5
generated: 2026-10-31
---
# Agency Hero with Gallery-Lit Screen

## Summary
A dark teal hero for a web design studio: a confident two-line headline, a mint call button and client logos on the left, and on the right a sample landing page hung like a framed painting under a brass picture light. Two small 3D clay figures on a bench, one holding a "Next?" sign, add warmth above the headline. Worth studying for the gallery-frame metaphor that turns a portfolio screenshot into an object.

## Style
- Theme: dark (deep teal with a bright framed screenshot)
- Mood: confident, crafted, witty, premium
- Tags: agency, hero-section, gallery-frame, picture-light, clay-3d, mint-accent, social-proof
- Category: Hero, Landing page

## Palette
| Role | Hex |
|---|---|
| Background | #05191D |
| Background deep | #04171B |
| Screen white | #EDF6FC |
| Sky blue | #63BEE0 |
| Frame dark | #272C27 |
| Frame bronze | #4D493E |
| Figurine taupe | #9B9489 |
| Mint accent | #2EF2B3 |

## Typography
- Headline ("Websites built to sell, not to sit pretty."): grotesk sans, regular to medium weight, sentence case, slight negative tracking, about 7 percent of frame height per line, off-white. Geist or Inter Tight (500).
- Body: same sans, regular, about 2 percent of frame height, muted grey-white, three short lines. Geist (400).
- Microcopy ("No commitments, free 15-min call" and "Shipped for"): monospace, small, grey. IBM Plex Mono (400).
- Nav links: sans, regular, small, light grey; wordmark is a placeholder in white sans.
- Buttons: sans, medium, dark text on mint.
- Inside the framed screen: a dark sans headline with one blue handwritten script word. Caveat for the script.

## Layout
- 16:9 frame (1280x720), two columns: text column from 4 percent to 36 percent of the width, framed screen from 44 percent to 96 percent.
- Top nav: full width with a 1px hairline bottom border at about 9 percent height; wordmark left, three links centred, mint button right.
- Text column stacks figurines, headline, body, CTA, microcopy, then a "Shipped for" row of greyed logos with 24 to 32px gaps.
- Buttons: 8px radius with a soft mint glow (box-shadow 0 0 0 3px of a darker mint).
- Frame: thin dark wooden border (about 8px) with an inner bevel, sitting slightly in front of the background with a soft shadow; a brass picture light bar centred above it, casting a pale glow.
- The top of a second frame peeks in at the bottom edge, hinting at a scrolling gallery.

## Elements
- Navbar: placeholder wordmark, links "Work", "Pricing", "Process", mint "Book a call" button.
- Clay figurines: two small stylised 3D characters on a thin wooden bench, one holding a cup, the other a cardboard "Next?" sign.
- Primary CTA: mint pill-rectangle "Book a free 15-min call".
- Client logos: three greyed-out placeholder logos at low opacity.
- Framed screen: a light SaaS landing page with a blue announcement strip, small nav, "New" badge pill, a two-line headline with a script accent word, a dark "Get Started" pill, and a white card listing three connected integrations with green check labels, over a sky and clouds background.
- Picture light: a horizontal brass tube lamp on a short arm with a warm white emissive strip.

## Motion
Static image. Idea: on load, let the picture light flicker on (opacity 0 to 1 over 400ms) and its glow spread down the frame, then the screenshot inside slowly auto-scrolls.

## Rebuild it
1. Page shell: `bg-[#05191D] text-[#E8F0EE]`, nav `h-16 border-b border-white/5 flex items-center justify-between px-12`.
2. Hero grid: `grid grid-cols-[1fr_1.4fr] gap-16 px-12 pt-12 items-start`.
3. Headline: `text-6xl font-medium tracking-[-0.02em] leading-[1.05]`; body `text-lg text-white/70 max-w-md`; mono microcopy `font-mono text-sm text-white/50`.
4. CTA: `rounded-lg bg-[#2EF2B3] text-[#05191D] px-5 py-3 font-medium shadow-[0_0_0_3px_rgba(46,242,179,0.25)]`.
5. Frame: a `figure` with `border-8 border-[#272C27] outline outline-1 outline-[#4D493E] shadow-2xl`, holding a screenshot `img` in `object-cover object-top`.
6. Picture light: an absolutely positioned bar (`h-2 w-56 rounded-full bg-gradient-to-b from-[#E6D3A3] to-[#8F7A4A]`) above the frame plus a radial gradient overlay to fake the light spill.
7. Motion: fade and rise the text column children with a 80ms stagger; scale the frame from 0.98 to 1 and animate the light glow `opacity` from 0 to 0.8 after 300ms.

## Generation prompt
A dark deep-teal website hero for a design studio: on the left a large off-white sans-serif headline, a short paragraph, a glowing mint call-to-action button and faded client logos, with two small cute clay figurines sitting on a wooden bench above; on the right a bright light SaaS landing page screenshot displayed inside a thin dark wooden picture frame lit by a brass gallery picture light, soft shadows, premium and witty, no real logos or brand names.