shadcn.io is not affiliated with official shadcn/ui
Voice Spectrums Brand Identity About Block for React Aria
A brand voice for a writing studio as four spectrums: a marker on a hairline scale between two opposites, with a sentence we say and one we don't, beside a small greyscale specimen of the wordmark and type.
Installation
Overview
A brand-identity block for React with React Aria, written for Voicecraft, a fictional brand-writing studio. A split behind a hairline divider: at the start, a heading, one sentence and a small greyscale specimen of the studio's wordmark, a display serif and a plain sans, in cells that share their hairlines. At the end, the voice as four spectrums (Playful to Serious, Plain to Precise, Warm to Formal, Bold to Modest), each a row ruled edge to edge: a hairline scale with a marker where the studio sits, the position said in words ("Leans playful"), and a sentence we say beside one we don't. The scales follow the page's direction, so the first word stays at the start and the marker moves the right way in a right-to-left layout. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Guides, with CSS for the entrance and your theme's tokens for every colour. For about pages, brand pages and any studio that wants to describe its voice with examples, not adjectives. The sentences are example copy.
FAQ
How do I change the spectrums and where the marker sits?
The spectrums are SPECTRUMS at the top of the file: the word at each end, a position from 0 (the start's word) to 100 (the end's), a sentence we say and one we avoid. The words under the heading and the "Leans playful" line are computed from the position: below 45 it leans to the first word, above 55 to the second, and in between it is "Right in the middle".
How is a scale read by a screen reader?
The scale drawing is hidden from assistive technology and the same fact is in text: each row's heading names the pair ("Playful to serious"), the line beside it says where the studio sits ("Leans playful"), and the two sentences are a description list with the terms "We say" and "We don't say". Nothing is conveyed by colour: the marker is a position on a line.
Is the specimen an image?
No, it is two small cells of text and an icon in foreground tones: the wordmark with a quote mark in a rounded square, and the display and text type as "Aa". It uses your theme's serif and sans families. It is hidden from assistive technology, and the caption beside it says what it shows.
Is this a brand kit with downloads?
No. The voice is the feature, so there are no logo files, swatches or downloads here. A block that shows a downloadable kit is a different block in the same category.