Wordmark

A stylized logotype for a brand/product name. Wrap a highlighted portion in <WordmarkAccent> for a two-tone mark (e.g. the "UI" in "Silica UI"); a leading icon/glyph works as a plain child too.

Real use · brand logotype

SilicaUIAcme

Sizes

SilicaSilicaSilicaSilicaSilica

Colors

BasePrimarySecondaryAccent

Using Wordmark

Silica ships one design system through three paths. They share a class vocabulary but are not interchangeable — pick the one that matches what you are building.

Plain HTML — CSS classes

The Tailwind v4 plugin. Works in any framework or none — Rails, Django, PHP, Go, a static file. This path is complete for Wordmark — it needs no JavaScript, so the classes below are the whole story.

/* in your CSS */
@import "tailwindcss";
@plugin "@wizeworks/silicaui";

Root class wordmark, with 13 modifiers:

.wordmark
.wordmark-accent
.wordmark-error
.wordmark-info
.wordmark-lg
.wordmark-md
.wordmark-neutral
.wordmark-primary
.wordmark-secondary
.wordmark-sm
.wordmark-success
.wordmark-warning
.wordmark-xl
.wordmark-xs

React

Typed components over those same classes, with behavior and accessibility from Base UI.

npm i @wizeworks/silicaui-react

import { Wordmark } from "@wizeworks/silicaui-react";

Props

Prop	Type	Required	Description
color	SilicaColor	no	Solid accent color for the whole mark; maps to wordmark-<color>.
size	SilicaSize	no	Default md.
as	React.ElementType	no	@deprecated Use render. Typically "a" when the mark links home.
render	React.ReactElement	no	Render as a different element, composing your props with this component's — the same render Button/Badge/Card take, and Base UI's own composition model: <Wordmark render={<Link href="/" />}>…</Wordmark> Preferred over as, because the element carries its OWN props and they are type-checked against it (Wordmark cannot know that Link needs an href).
src	string	no	A logo image rendered before the name. The one-prop path, for when the mark is a URL rather than a slotted component; children composition is the richer path and both lower to the same DOM.
alt	string	no	Alt text for src. Defaults to "" (decorative): the brand NAME renders beside the logo, so announcing both just repeats it. Set it explicitly for a mark-only wordmark, where the logo carries the name.

Source of the demo above

The exact file that renders the examples above, so it can never drift from them. It imports a few of this site’s own layout helpers (../lib/…), so read it for the component calls rather than copying it whole.

Show source

import { Wordmark, WordmarkAccent } from "@wizeworks/silicaui-react";
import { Section, Row } from "../lib/Section";

const Mark = (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 2 2 7l10 5 10-5-10-5Z" />
        <path d="m2 17 10 5 10-5" />
        <path d="m2 12 10 5 10-5" />
    </svg>
);

export function WordmarkDemo() {
    return (
        <>
            <Section title="Real use · brand logotype">
                <Row>
                    <Wordmark>
                        Silica<WordmarkAccent>UI</WordmarkAccent>
                    </Wordmark>
                    <Wordmark as="a" href="#" color="primary">
                        {Mark}
                        Acme
                    </Wordmark>
                </Row>
            </Section>

            <Section title="Sizes">
                <Row>
                    <Wordmark size="xs">Silica</Wordmark>
                    <Wordmark size="sm">Silica</Wordmark>
                    <Wordmark size="md">Silica</Wordmark>
                    <Wordmark size="lg">Silica</Wordmark>
                    <Wordmark size="xl">Silica</Wordmark>
                </Row>
            </Section>

            <Section title="Colors">
                <Row>
                    <Wordmark>Base</Wordmark>
                    <Wordmark color="primary">Primary</Wordmark>
                    <Wordmark color="secondary">Secondary</Wordmark>
                    <Wordmark color="accent">Accent</Wordmark>
                </Row>
            </Section>
        </>
    );
}

Vanilla — node tree to HTML

Wordmark — the brand lockup: an optional MARK (logo image or a slotted svg/Icon child) beside the brand name. Build a node tree, project it with toHtml(), and let the zero-dependency runtime hydrate it. This is the path for generated or user-authored documents — a site builder, CMS output, a static export.

npm i @wizeworks/silicaui-html @wizeworks/silicaui-behaviors

import { atom, toHtml } from "@wizeworks/silicaui-html";

const node = atom("Wordmark", "wordmark", { /* props */ }, [/* children */]);
const markup = toHtml(node);

Styling on this path is the class string in the second argument — the same classes as the Plain HTML section above. There is no color prop here; write "wordmark wordmark-primary" rather than passing a colour as a prop.

Takes children: yes
Hydrated by: nothing — this one is static markup

The full API for Wordmark, on every path, is available through the Silica MCP server.