Brand Asset Settings Block for React

Replace Glyph (the inline drawing) with your own mark, and BRAND with your name; use only a logo you have the rights to. The logo is sized from one custom property, so a drawing that fills a square box of the chosen height works as it is. The clear space is a quarter of the height on every side; change clearOf for your own rule. Nothing is uploaded: this block draws a sample and never reads a file.

Because a brand's colours are its content. The four palette colours are typed as hex digits (without the hash, so no colour literal sits in the source) and shown inline on the two tiles and the swatches only, as the brand's own; everything else follows the page's theme. The mark itself is greyscale, so it looks right in any preset.

The slider sets the logo's height at true size, and the sentence under it says whether it is legible: the wordmark needs at least 24 pixels, so a Full or Mono logo below that shows a warning and a Use the mark button, which switches to the mark, legible down to 16 pixels. On a narrow screen the tiles scale the largest sizes down to fit, since a wide logo at 128 pixels is wider than a phone tile. The ruler under the slider marks 24.

With the WCAG formula, from the two hex values: relative luminance of each colour, then (lighter plus 0.05) over (darker plus 0.05), cut down to a tenth so a near miss never reads as a pass. Each tile's caption gives the mark's ratio and the dot's, with the words (passes AAA, passes AA, enough for graphics, too low). Change the palette and the numbers follow.

Each swatch's button copies its hex, and Copy palette copies all four as CSS custom properties, one per line. The clipboard is the only thing the page touches, and it needs a secure page; if the browser refuses, the status line says so. Nothing is saved or sent.

The tiles are decorative, and each one's caption says the same in words. The Toggle Group and the Slider are named, the slider reads its value as "64 pixels", the palette buttons are named for their colour and hex, and the status line is a polite live region that is present from the start. On a phone the tiles stack, the palette sits under the controls, and the header's button stays on the first screen.