Website Styles
← Styles

Saturated condensed-type billboard

Use a condensed or heavy uppercase statement spanning most of the viewport width.

TypographicPilot passedAwwwards-derived3 sites
Lamanna's Bakery website
LA Boite À Slides website
Sixes Social Cricket website

Design DNA

One oversized, high-weight uppercase phrase dominates a broad saturated color field; foreground/background remain readily distinguishable; navigation and small actions are pushed to the edges or top rail. Keep the phrase visually billboard-scale even if a photo strip or dimensional decorative objects share the frame.

Keep

  • A very large, heavy uppercase statement with little competing body copy.
  • A broad, saturated field that occupies most of the opening image.
  • Small edge navigation and a sharply smaller control tier.

Change

  • Condensed letterforms (strong in htb-0224 and awb-0198); awb-0482 is heavy and oversized but visibly broader, so condensation is not a universal requirement.
  • Simple flat color only, dimensional translucent shapes, or a photo strip beneath/behind the words.
  • Centered or stacked headline blocks, small logo/booking actions, seasonal labels.
  • Food/venue language, agency copy, cricket terms, booking controls, season/event labels, and the exact orange, violet, maroon, cream or pink hues.
  • The particular triangle objects and repeated cricket photograph.
  • The exact phrase length or line count.

Avoid

  • Do not copy the reference identity, written content, trademarks, or distinctive branded artwork.
  • Do not reproduce a gallery monitor, browser frame, or photographed device that merely presents the original website.
  • Do not substitute a generic card-and-gradient landing page if it removes an essential rule.
  • Do not turn a failed image, cookie overlay, loading indicator, or blank capture into a design invariant.
On a new subjectFor a summer theatre season, make one short uppercase season line the dominant element on a saturated stage-colored field; place ticketing and venue navigation at the top edge. A few abstract set shapes or one slim performance strip may support the words, but keep the season message first and use a theatre-specific palette and imagery.

Prompts


 
 

Specs

Layout

All three core images are text-first billboards. Lamanna's Bakery uses a near-full-bleed orange-red field and yellow words, with tiny shop/logo/order labels across the top. LA Boite À Slides centers a three-part statement on bright violet and surrounds it with translucent triangular forms. Sixes Social Cricket centers four stacked lines on deep maroon; a repeated image strip intersects the lower lines and bright pink bars sit behind the final line. The photo and objects vary, but the headline remains the dominant high-area shape.

Type

Large uppercase bold/block forms recur. Width varies: Lamanna's Bakery/LA Boite À Slides are notably condensed, while Sixes Social Cricket is broadly set with very large glyphs. One screenshot alone cannot name the font. Micro-navigation, logo and actions are smaller, bold or regular caps; keep these secondary.

Color and surface

The fields are vivid orange-red, saturated violet and deep maroon. Contrast uses yellow, white, black, or warm cream; Sixes Social Cricket also adds magenta. Therefore “extreme foreground contrast” is strongest in two examples but not a single prescribed complementary pair. Flat color is common, but translucent 3D-like shapes and photographic overlap are demonstrated exceptions.

Components

Small top navigation, an oversized phrase, and one or two small actions/labels. Decorative dimensional shapes or a narrow-to-moderate photo strip can support the type. Avoid treating those scene-specific objects as reusable required components.

Behavior

LA Boite À Slides and Sixes Social Cricket are selected desktop screenshots with matching desktop/mobile measurements; Lamanna's Bakery is a gallery still. The paired measurements support one current responsive headline sample (Sixes Social Cricket), not the whole style. No matched hover, motion, scroll, or transition review is used here. The visible dimensions and static frame do not demonstrate playback or animation.

Estimate

Make the uppercase statement occupy roughly 45–75% of the first screen, with tight leading and condensed or heavy letterforms.

Measured

Headline metrics, desktop: 164px; 131.2px line-height; 400 weight; 3.28px tracking; measured box 712×495 at x=364,y=293 in 1440×1000 viewportSixes Social Cricket · matching current screenshot/example; one sample, not a style-wide token

Measured

Same headline metrics, mobile: 70px; 56px line-height; 400 weight; 3.28px tracking; measured box 317×225 at x=39,y=349 in 390×844 viewportSixes Social Cricket · matching current mobile measurement; responsive CSS sample only

Measured

Viewport and heading dom sample: 1440×1000 desktop; h1 box 571×294 at x=435,y=348 with text recorded empty, 45.6585px/47.4849px/600 weightLA Boite À Slides · matching selected screenshot measurement; empty DOM text means it is not used to estimate visible phrase typography

Estimate

Largest letters fill most of the frame and are yellow on orange-red; main copy is cropped by the viewport edges. Top controls remain small.

Estimate

Centered white and black condensed lines stand apart from a saturated violet background with translucent triangular pieces.

Estimate

A deep red field and heavy cream display phrase overlap a repeated photo strip and pink bands; this disproves a strict no-image or flat-only rule.

Neighbors

Sites 3