Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Voice Spectrums Brand Identity About Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A brand-identity block for React with Base UI, 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.

How does it fit on a phone?

The heading and the specimen come first, then the four rows under a rule from rail to rail. In each row the two sentences stack under the scale. Nothing scrolls sideways at 320 pixels.

What moves, and what happens with reduced motion?

The two halves fade up once on load with CSS transitions; with reduced motion they simply appear. The markers don't move.

  • Pro

    Brand kit tabs About

    Press and recognition

    A brand kit for a brand-kit product: tabs for the mark, the theme's own colour tokens with a copy button, a type specimen, and do and don't pairs.

  • Pro

    Do and Don't Design Principles

    Principles and process

    A design-principles section for a design-system manager: four principles in cells, each with its test as a question and the same screen sketched done well and done badly.

  • Pro

    Double Helix Company DNA

    Culture and values

    A company-DNA section for a survey tool: a hand-drawn double helix with five rungs in a framed figure, and a list of five traits that lights a rung and shows what the trait means and how it is hired for.

  • Pro

    Settings Panel Work Style

    Culture and values

    A working-agreements section drawn as a settings panel: six agreements as rows with a drawn switch, the state in words and a line on why, in a tinted frame beside the title.

  • Pro

    Bold Statement About

    Statements

    A bold statement for a furniture marketplace: one sentence in display type with a phrase picked out by a drawing marker on a faded field of dots, and three one-word commitments in a band ruled from rail to rail.

  • Pro

    Statement With Rule Log About

    Statements

    A statement for a calendar app beside its rule applied: five proposals in a ruled log, each with the minutes a week it saves or costs, and a Shipped or Cut verdict computed from that number.

All 150 about blocks