# Vibrant & Block-based > Every section is a full-bleed slab of saturated colour — tomato, mustard, green, pink, cobalt — with big geometric shapes and chunky type. - Nickname: Colour blocks - Also called: Color blocking, Block colour UI, Bold blocks - Category: Bold & Expressive - Moods: Bold, Playful, Friendly - Industries: Food & Restaurant, E‑commerce, Startup & Tech, Media & Entertainment, Kids & Family - Style page: https://uilingo.dev/styles/vibrant-block-based/ Vibrant & Block-based layouts stack full-width bands of solid, saturated colour, one per section, so scrolling feels like flipping through poster boards. Inside each band, content sits on rounded white or solid-colour tiles; circles, half-moons and quarter-rounds in a clashing block colour peek out of the corners. There are no outlines and no shadows — contrast between neighbouring colour fields does all the separation. Type is a heavy, slightly quirky grotesque set large and tight. ## Best for - Restaurants, food delivery and FMCG brands - Campaign and launch landing pages - Consumer apps with a youthful audience - Event, festival and ticketing sites ## Avoid for - Dense enterprise tools where colour must encode data - Luxury and wellness brands that need calm - Long-form reading pages ## Do - Give each section one solid background from 8 band colours (4 dark + 4 light) and never repeat a hue in neighbouring sections (dark bands: tomato, green, cobalt, ink — cream text; light: mustard, pink, orange, cream — ink text); two dark bands touch only when one is ink - Pair every block with an ink or cream text colour that passes 4.5:1 (mustard stat numerals ≥ 3rem on green are the one large-text exception) - Use 1–2 giant solid shapes per band (circle, half-moon, quarter-round or triangle), clipped by the section edge - Keep tiles rounded at 28px (radius lg) and borderless ## Don't - Don’t put text directly over a giant shape — shapes stay behind tiles or in empty band corners, clipped by the band edge - Don’t put two adjacent sections in the same colour, or let two non-ink dark bands touch - Don’t give a small tile a second decorative shape or a third block-colour fill (icon circles, badges and buttons don’t count) - Don’t shrink headlines or stretch them edge to edge — the hero stays big but capped at 13ch (Thai 16ch) ## Audit Passed after 5 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Vibrant & Block-based" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Every section is a full-bleed slab of saturated colour — tomato, mustard, green, pink, cobalt — with big geometric shapes and chunky type. Design keywords: full-bleed colour sections, saturated colour blocks, geometric circles and half-moons, no outlines no shadows, chunky grotesque headlines, rounded white tiles, pill buttons, poster-like scrolling. ## Visual language Scrolling feels like flipping through poster boards: every section is a full-bleed slab of one saturated colour — tomato red, mustard, bottle green, bubblegum pink, cobalt, orange, ink — and no two neighbours share a hue. One or two giant solid circles, half-moons, quarter-rounds or triangles in a clashing block colour are clipped by each band's edges. Content sits on borderless, generously rounded white or solid-colour tiles, or directly on the colour in huge, tight, chunky grotesque type. There are no outlines, no shadows and no smooth gradients (not even in charts); contrast between colour fields does all the separation, so it reads loud, appetising and confident. ## Signature details (must be visible) - Exactly 8 band colours (4 dark + 4 light incl. cream); no other hues anywhere except the status/neutral tokens and the off-token tints listed under Components. Dark bands (cream #FFF4E2 text): tomato #D42A12, green #0B6B43, cobalt #2443D6, ink #1C1410. Light bands (ink #1C1410 text): mustard #FFC21A, pink #FF6FA8, orange #FF7A1A, cream #FFF4E2 (the neutral page) - Band order rule: no two neighbouring sections share a hue, and two dark bands may touch only if one of them is ink. Landing order: tomato hero (the nav bar is painted the same tomato, so they read as one band) → ink logos → mustard features → green stats → pink showcase → cobalt testimonials → cream pricing → orange FAQ → green CTA → ink footer - Contrast: body text and buttons ≥ 4.5:1 everywhere — cream text on the dark bands, ink on the light bands. Mustard #FFC21A on green #0B6B43 is only 4.06:1, so it is allowed only for stat numerals ≥ 3rem; stat labels on green stay cream - Shapes: 1–2 oversized solid shapes per band, positioned off-edge with overflow hidden, always behind content. Hero = a 520px mustard circle at top: -160px / right: -170px of the hero block (the hero starts directly under the nav bar, so the circle never reaches the nav) + a 300×150 pink half-moon sitting on the bottom edge at left 6%. Features = 380px tomato circle at top/right -150px. Stats = 200px orange right-angle triangle in the bottom-right corner. Showcase = 240px cream quarter-round in the bottom-right corner, behind the mock tile. Testimonials = 380px pink circle top-right. Pricing = 380px green circle top-right. FAQ = 380px cobalt circle top-right + 240px tomato quarter-round bottom-left. CTA = 300×150 mustard half-moon on the bottom edge at right 4%. The thin logo strip and the footer carry no shapes - Type sizes: section display clamp(3rem, 6.5vw, 5.5rem); hero Latin headline clamp(3.5rem, 8vw, 7rem), max-width 13ch, line-height 0.95, tracking -0.035em, Bricolage Grotesque 800; hero Thai headline Prompt 800 clamp(3rem, 6vw, 5.5rem), line-height 1.3, no tracking, max-width 16ch, copy written to fit ≤ 3 lines (≈ 8–14 Thai characters per line) — keep the poster feel through size, never by tightening - Tiles: white #FFFFFF or solid block colour, radius 28px, border 0, box-shadow none. A small tile (card, bento tile, KPI card) has one fill colour plus at most one contrasting decorative shape; only full bands and large illustration panels (hero, onboarding art, article figures) may carry two shapes. Icon circles, text, badges and buttons do not count toward this one-fill-plus-one-shape limit, so the cobalt bento tile 1 with its mustard half-moon and a cream icon circle is within the rule; what is banned is a second decorative shape or a third block-colour fill in a small tile - Buttons are borderless pills, weight 700 — 58px tall for hero/CTA buttons (1.1rem text), 44px default, 36px small; hover scale(1.04) rotate(-1deg) with a springy cubic-bezier(.3,1.4,.5,1). Primary colour by background: cream band and white tiles → tomato #D42A12 pill with white #FFFFFF text (5.07:1); mustard / pink / orange bands → ink pill with cream text; tomato / green / cobalt / ink bands → mustard pill with ink text - Bento features on the mustard band: 4-column grid, 16px gap; tile 1 spans 2×2 (cobalt, a 140×70 mustard half-moon sitting on the tile's bottom edge 24px from the left, dome up, clipped by the tile like the hero and CTA half-moons), tiles 2–3 are 1×1 (white, pink), tile 4 spans 2×1 (green), tiles 5–6 each span 2×1 (white, tomato), so the grid is exactly 3 rows × 4 = 12 cells with no holes ## Design tokens — use these exact values Colours (light mode): - background #FFF4E2 - surface #FFFFFF - surface-2 #FFE7C2 - text #1C1410 - text-muted #5A4636 - primary #D42A12 (text on it #FFFFFF) - secondary #FFC21A (text on it #1C1410) - accent #2443D6 - border #1C1410 - success #0B6B43 · warning #B45A00 · danger #C21A0E - chart series #D42A12, #2443D6, #FFC21A, #0B6B43, #FF6FA8 Radius: sm 12px, md 18px, lg 28px, xl 40px, pill 999px Border width: 2px Shadows: sm `none`, md `none`, lg `none` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.1 density Motion: 180ms cubic-bezier(.3,1.4,.5,1) ## Typography (Latin + Thai) - Headings: Bricolage Grotesque 700/800 with Thai fallback Prompt 700/800 - Body: DM Sans 400/500/700 with Thai fallback Anuphan 400/500/700 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700;800&family=DM+Sans:wght@400;500;700&family=Prompt:wght@700;800&family=Anuphan:wght@400;500;700&display=swap - CSS stacks: heading `"Bricolage Grotesque", "Prompt", system-ui, sans-serif`; body `"DM Sans", "Anuphan", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(3rem, 6.5vw, 5.5rem), heading weight 800, heading tracking -0.035em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Prompt’s heavy loopless geometry matches Bricolage Grotesque’s chunky ink-trap headlines, and Anuphan has the same open, round proportions as DM Sans for body text. ## Components - Buttons: primary follows the band rule in the signature (tomato on cream/white, ink on mustard/pink/orange, mustard on tomato/green/cobalt/ink). No border, no shadow. Secondary is a white pill with ink text when it sits directly on a band (e.g. the hero's 'See a live menu'), and a cream #FFF4E2 pill with ink text whenever it sits inside a tile — white tiles and the mustard featured price plan alike. Accent = cobalt pill with cream text; danger = #C21A0E pill with white text; ghost = text only, 12% tint of the text colour on hover. Focus-visible on buttons, chips, tabs and nav links = 3px outline in the band's text colour (ink on light bands and white tiles, cream on dark bands) with a 3px offset - Card: white, radius 28px, padding 24px, no border; hover translateY(-4px) rotate(-0.6deg). Icon in a 56px solid circle that contrasts with its tile, mapped exactly: bento tile 1 cobalt → cream circle, tile 2 white → mustard, tile 3 pink → cream, tile 4 green → mustard, tile 5 white → pink, tile 6 tomato → mustard; in a plain 3-column card grid, mustard on nth-child(3n+1), pink on (3n+2), mustard on (3n). Pricing: plain plans are white tiles with a full-width tomato primary pill; the featured plan is a mustard tile tilted -1.5deg with an ink 'Most popular' badge in cream text and a full-width cream pill CTA with ink text - Inputs: white, radius 18px, 52px tall, 2px inset ring #F1DFC4; focus = 3px ink inset ring plus a 5px mustard halo (no outline); error = 3px danger #C21A0E inset ring. Selected radio card = solid mustard fill; switch off #E9D7BC, on green - Border token 2px #1C1410: used only for focus rings and checkbox outlines — never as an outline on tiles or buttons; table rules use #F1DFC4 - Off-token colours (the only ones allowed besides the 8 bands and the tokens): input ring / table rule #F1DFC4, chart track and segmented-control track #F6E3C6, switch off #E9D7BC, cream at reduced opacity on dark blocks (84% for muted text, 14% for the sidebar plan card fill, 12% for sidebar hover, 25% for the footer divider), and the badge tints and badge text colours below - Badges: solid pills with no border, weight 700 — default cream #FFF4E2 with ink #1C1410 text (on white tiles and coloured bands); success mint #BFF0D4 with #0A4A2F text; warning butter #FFE08A with #5A3300 text; danger blush #FFD0C7 with #8E1608 text; neutral sand #EFE3D2 with #4A3A2E text; solid = ink with mustard text. A badge sitting directly on the cream page (the article kicker above the title) is ink with mustard text, like the eyebrow, because a cream badge would vanish there. Badges inside the product mock, on the mustard featured price plan and on the mobile mustard featured card are ink with cream text. Chips are white pills; the active chip is solid tomato with white text - Eyebrows: solid pills in the band's text colour with the band colour as their text — tomato hero → cream pill + tomato text; mustard band → ink pill + mustard text; pink band → ink pill + pink text; orange band → ink pill + orange text; cobalt band (and the cobalt form block) → cream pill + cobalt text; green band → cream pill + green text; cream page → ink pill + mustard text - Charts: 4px solid lines in tomato and cobalt with no area fill under lines, rounded pill-topped bars in the block palette, donut 9px thick on a #F6E3C6 track; chart series use the chart tokens only — orange #FF7A1A is a section colour, not a series - Nav: painted the same tomato as the hero so the two read as one band; cream links, current link underlined 3px mustard, mustard pill CTA with ink text (it stays mustard because the hero circle never reaches the nav) - Logo strip on an ink band: six partner wordmarks on one row (space-between, 32px gap), Latin names Bricolage Grotesque 800 uppercase ~1.2rem with a mustard icon. Any Thai wordmark or logo (brand or partner) is set in Prompt 800 with no negative tracking and no uppercase. FAQ rows: stacked white 18px-radius tiles (padding 22px 27px, 12px apart) on the orange band; each question ends in a 34px orange circle holding an ink '+' (weight 800) that rotates 45° into an × when the row is open - Footer: ink #1C1410 band with no shapes — mustard logo circle + cream wordmark and a muted cream tagline on the left, then 3 link columns with cream weight-700 uppercase headings (Latin only) and links in rgba(255,244,226,.84); a 1px cream divider at 25% opacity above the cream-muted legal line ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: poster-sized headline that fills the viewport width, visual below. Navigation: bar style. Sections in order: hero → logos → features → stats → showcase → testimonials → pricing → faq → cta. Feature section as bento. Landing: the poster hero on tomato. Poster scale comes from size, not width: the Latin hero headline is capped at 13ch (about 60% of a 1280px viewport) and Thai at 16ch, so read 'poster-sized headline that fills the viewport width' as poster-sized type, never stretched edge to edge. The hero holds the headline, mustard + white pill CTAs, then the product mock as white tiles. Then: ink logo strip, mustard features band with the 12-cell multicolour bento, green stats band with mustard clamp(3rem, 5.4vw, 4.6rem) numerals and cream labels, pink showcase, cobalt testimonials on white tiles, cream pricing with a mustard featured plan tilted -1.5deg, orange FAQ, green CTA band with a white pill email field and a mustard button, ink footer. Spacing: band-level spacing uses a 9px base (8px × 1.1 density): 9 / 18 / 27 / 36 / 54 / 72 / 108px; content bands have 108px padding top and bottom, the hero 90px top / 126px bottom, and the slim ink logo strip 36px; card grids (testimonials, pricing, stats, plain feature grids) have a 27px gap, the product mock an 18px gap, the showcase columns 54px. Tile-internal values sit outside the 9px scale on purpose: bento gap 16px, card padding 24px (price cards 36px, product-mock tiles 20px), form aside padding 40px, FAQ row gap 12px. Showcase band: pink, 2 columns — left copy (eyebrow, h2, lead, 3 check items), right a white 28px-radius tile with pill tabs (active tab pink) above the product mock (line chart + KPI tiles); the 240px cream quarter-round sits in the bottom-right corner, behind the mock tile and never under the copy column. Sign-up form page: cream page; the left column is a full-height cobalt block (radius 28px, 40px padding) with cream headline and lead and a white 'what you get' tile, a 320px mustard circle tucked behind the tile's bottom-right corner and clipped by the block; the form itself is one white 28px tile. Dashboard: a cream canvas and cream top bar; the sidebar is a solid green block with cream labels and a mustard pill for the active item; the plan card at its foot is a cream-14% tint with a cream title, a cream-84% '72%' caption and a mustard progress fill on a cream-16% track. KPI cards are each a full colour block (tomato, mustard, cobalt, pink) with 2.6rem numbers and the sparkline drawn in currentColor, above white chart tiles with solid, unfilled chart lines; bar labels sit on one baseline under the bars, and the table has a cream rounded header row. ## Content Use realistic product copy (fictional brand) suited to: Restaurants, food delivery and FMCG brands. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Give each section one solid background from 8 band colours (4 dark + 4 light) and never repeat a hue in neighbouring sections (dark bands: tomato, green, cobalt, ink — cream text; light: mustard, pink, orange, cream — ink text); two dark bands touch only when one is ink - Pair every block with an ink or cream text colour that passes 4.5:1 (mustard stat numerals ≥ 3rem on green are the one large-text exception) - Use 1–2 giant solid shapes per band (circle, half-moon, quarter-round or triangle), clipped by the section edge - Keep tiles rounded at 28px (radius lg) and borderless ## Don't - Don’t put text directly over a giant shape — shapes stay behind tiles or in empty band corners, clipped by the band edge - Don’t put two adjacent sections in the same colour, or let two non-ink dark bands touch - Don’t give a small tile a second decorative shape or a third block-colour fill (icon circles, badges and buttons don’t count) - Don’t shrink headlines or stretch them edge to edge — the hero stays big but capped at 13ch (Thai 16ch) - Smooth gradients, glows, blur or drop shadows of any kind — including gradient area fills under chart lines and fading sticky bars - Black outlines and offset hard shadows — that turns it into Neubrutalism - Small scattered squiggles, confetti and terrazzo patterns — that is Memphis - Two neighbouring sections in the same hue, two non-ink dark bands touching, or any hue beyond the 8 band colours and the listed off-token tints - Low-contrast pairs such as white text on mustard or pink, cream text over a mustard shape, or mustard body text / labels on green - Timid, light-weight headlines that the colour blocks overpower ## Stack notes One self-contained HTML file with a