---
id: "2115898182047584456"
source: https://x.com/Osmbproduction/status/2115898182047584456
author: "OB | Editing × Motion (@Osmbproduction)"
media: "photo, 1200x1775"
model: claude-opus-5-5
generated: 2026-10-31
---
# Contrast-Rated Brand Color Mosaic

## Summary
A brand identity sheet that presents a six-color palette as an interlocking block mosaic, each swatch labelled with a name, a monospace hex code and its contrast ratio, followed by two poster cards that remix the same colors as soft blurred gradients and hard quadrants. Worth studying for how it pairs warm rust and orange with a cool aqua and two near-whites, and for the accessibility data baked into the presentation.

## Style
- Theme: mixed (light and dark swatches on a black sheet)
- Mood: warm, confident, systematic, earthy
- Tags: color-palette, brand-guidelines, swatch-mosaic, contrast-ratio, monospace, gradient-poster, identity
- Category: Branding

## Palette
| Role | Hex |
|---|---|
| Deep brown | #1F1110 |
| Garnet | #6D3534 |
| Snow | #F4F4EE |
| Mist | #E5E8DD |
| Signal orange | #FB5F38 |
| Aqua | #A6C8C9 |
| Rust gradient | #984237 |
| Brick | #C94F37 |

## Typography
- Swatch names: grotesk sans, medium (500), title case, about 1.6% of the canvas height. Closest free font: Inter Tight 500 or Instrument Sans 500.
- Hex codes: monospace, regular, uppercase, slightly larger than the names (about 2% of height). JetBrains Mono 400 or IBM Plex Mono 400.
- Contrast ratios: small monospace (about 1% of height) prefixed with a half-filled circle icon, set top left of each block.
- Logo caption: tracked-out mono, uppercase, letter-spacing about 0.15em, under a placeholder monogram.
- Poster credits: tiny sans, semibold name with a lighter handle underneath (a placeholder name and handle).
- Label colors flip per swatch: garnet text on light blocks, aqua names with orange hex codes on the dark blocks.

## Layout
- Portrait 1200x1775 on solid black with about 48px outer margins.
- Top panel (about 62% of the height): a mosaic with no gaps. Left column stacks Snow and Mist; Deep brown fills the top right; a lower row holds Aqua, a tall orange block that overlaps up into the row above, and Garnet.
- Each block has 40px internal padding; ratio at the top, name and hex anchored to the bottom left.
- Bottom row: two equal poster cards (about 44% wide each, about 4:3) with a 48px gutter, square corners, no shadows.

## Elements
- Six swatch blocks with contrast badge, name and hex.
- Placeholder monogram in orange (two interlocking rounded loops) with a short code beneath, top right of the dark block.
- Light poster: left half a soft aqua-to-white blurred gradient, right half four quadrants (mist, aqua, orange, rust) with a vertical light fold where they meet.
- Dark poster: the same structure in garnet, deep brown and orange with a glowing orange smear on the left.

## Motion
Static image. Idea: let each swatch block expand slightly on hover (scale 1.02, 200ms ease-out) while its contrast ratio counts up from 0.

## Rebuild it
1. Wrap the page in `bg-black p-12` and build the mosaic with CSS grid: `grid grid-cols-6 grid-rows-3`, assigning spans so the orange block spans two rows into the middle.
2. Each swatch is a `div` with `p-10 flex flex-col justify-between` and inline background color; compute text color per swatch from a token map.
3. Compute contrast ratios at build time (WCAG relative luminance) against the label color and render them with a half-circle SVG icon.
4. Posters: `grid grid-cols-2` with the left half a blurred radial gradient (`filter: blur(40px)` on two layered blobs) and the right half a 2x2 grid; add a 1px light gradient line for the fold.
5. Motion: `whileInView` stagger the swatches in with opacity 0 to 1 and y 24 to 0, 60ms apart, 500ms ease-out.

## Generation prompt
A brand guideline sheet on a black background showing a six-color palette as tightly packed rectangular blocks (off-white, pale mist, dark chocolate brown, dusty aqua, vivid orange, garnet red), each labelled with a color name, a monospace hex code and a small contrast ratio; beneath it two square-cornered posters that blend the same colors into soft blurred gradients and four-quadrant blocks; clean, warm, modern identity design, no real logos.