Components Primitives
Brand
Identify CoreUX with a text wordmark or a compact boxed signature, using the bundled display typeface.
On this page
Examples
The unboxed identity at 40 px, in ink on an ivory surface.
Preview only: surrounding canvas and spacing. All metrics are illustrative.
'use client';
import { BrandWordmark } from '@coreux/ui';
export default function Wordmark() {
return (
<div style={{ background: '#F4F1E9', padding: 24 }}>
<BrandWordmark size={40} />
</div>
);
}
Usage
Use BrandWordmark to identify CoreUX in a header, footer, or compact brand signature. It always renders the text “CoreUX” in The Seasons; it has no children, custom text, or logo-image prop.
Wordmark keeps the background transparent and uses ink text by default. Boxed adds a navy surface and resolves to ivory text when tone is omitted. The two examples preserve the Wordmark and Boxed seeds with their 40 px and 24 px sizes.
For an unboxed mark on a dark surface, choose tone="ivory" and supply the surface yourself. Avoid explicit tone="ink" with variant="boxed": the package accepts it, but navy text on navy is unreadable.
Props
Only size has a parameter default. The variant class defaults to wordmark inside CVA, and the effective tone is resolved from the variant at render time. The table distinguishes those rules from an explicit parameter value.
| Prop / type | Default | Description |
|---|---|---|
sizenumber | 24 | Inline fontSize in CSS pixels. The default is 24; no range or finiteness checks are enforced. |
classNamestring | undefined | Classes merged with cn onto the root element. Other HTML and ARIA attributes are not forwarded; supply semantics on a wrapper. |
tonenull | "ink" | "ivory" | undefined | Resolved at render time: omitted or null becomes ivory for boxed, ink otherwise. Explicit ink/ivory overrides that choice. Tone only changes text; boxed always has a navy background. |
variantnull | "wordmark" | "boxed" | undefined | Omitted means wordmark via the installed CVA defaults. boxed adds navy background, 12 px horizontal / 6 px vertical padding, and a small radius. null suppresses variant classes. |
Accessibility & layout
The root is a span containing real text. It is not a link, heading, button, or image. To link to a homepage, place it inside a real anchor with an appropriate destination. Do not hide the text unless another nearby element supplies the same name.
The component does not forward ARIA attributes or event handlers. Its CSS pixel font size is fixed; there are no breakpoints, range checks, or automatic resizing. Leave room for the complete word at narrow widths and zoom. Boxed also adds padding to its intrinsic width.
Install the bundled styles and observe the CoreUX font-use restrictions in the installation guide. Without its display font, the mark will not match the intended identity.
Use EyebrowLabel for contextual labels rather than replacing the brand text.
Consumer setup
Browsing, previews, and copying are public. Installing the private @coreux/ui package requires repository read access and permission to use the bundled CoreUX brand fonts.
Follow the one-time installation guide for the pinned Git dependency, Tailwind v4 stylesheet setup, fonts, and troubleshooting. Keep the 'use client' directive in each example; no provider is required.
The quick start walks through a copied StatBlock in a minimal app.
Source & revision
This reference targets @coreux/ui version 0.1.0 at 06f42fd. Types come from its installed declarations; explanations and defaults are checked against this implementation.
Revision and upgrade notes · Contribution and coverage guide
View BrandWordmark source (repository access required)