Brand
The wordmark, the mark, and the surfaces the identity is allowed to sit on.
Interactive example
Brand
Binary Dreams is a studio that builds mobile apps with care. The identity reads calm and confident: quiet surfaces frame a fixed bright blue brand accent.
Positioning
The brand describes a mobile-first product studio, established in 2026. Keep the tone declarative and the surfaces quiet, so the official blue stays clear.
Wordmark
The wordmark sets Binary Dreams in the display face across two lines, tightly tracked, with an accent period after the first word. The supporting line stays in the sans face at muted text weight.
Mark
The mark pairs a rounded rectangle carrying two cut-out windows with a blue capsule and a single counter-form dot. Draw the rectangle in text ink and the windows in canvas. The capsule uses --bd-brand-accent, and its dot uses --bd-brand-accent-fg. These roles stay fixed across themes and application overrides.
On dark
On ink surfaces the wordmark shortens to bd., set in the display face on a text-ink background with canvas-colored letters. The period keeps the fixed brand accent in both forms.
Contrast
Place the wordmark on canvas, surface, or ink only. Check the blue period and capsule against Graphite and Blueprint surfaces in both modes. Never rely on color alone to carry meaning.
Tokens
Official brand accents read --bd-brand-accent and --bd-brand-accent-fg. These variables do not change with themes or Provider overrides. Supporting surfaces read --bd-text, --bd-canvas, and --bd-surface. Typography reads --bd-font-display and --bd-font-sans. The hero card uses --bd-hero-wash for its background image.
Related
See Colors for application color roles, Provider for scoped supporting surfaces, and LogoStrip for placing wordmarks in a row.