Brand Identity Virtu · Signal Vol. 01

Design system &
brand guide.

Signal is the visual language for Virtu Studios — an editorial, architectural system built on paper-and-ink contrast, monospace metadata, and a single electric accent. Bone paper, Graphite ink, Signal lime.

Studio

Virtu

System

Signal

Revision

2026.04

Tagline

A studio for founders

Color system

Six literal brand colors that never flip, plus semantic tokens that adapt across light and dark modes. Graphite is ink. Bone is paper. Signal is the accent that cuts through both.

Literal palette — fixed values

Graphite #0B0B0C

Ink · dark mode background · primary text on light

Graphite 2 #141416

Raised surface on dark · cards · popovers

Bone #E8E7E3

Paper · light mode background · text on dark

Bone 2 #DCDBD6

Muted paper · secondary surfaces · disabled states

Signal #E8FF5C

Primary accent · highlights · selection · CTAs on dark

Beacon #1F3DFF

Secondary accent · pull quotes · editorial emphasis

Semantic tokens — mode-aware

Token	Light mode	Dark mode	Usage
`--background`	Bone	Graphite	Page ground
`--foreground`	Graphite	Bone	Body text, icons
`--primary`	Graphite	Signal	Primary actions — flips on dark
`--accent`	Signal	Signal	Hover states, focus rings, selection
`--border`	Graphite 12%	Bone 14%	Hairline rules, grid dividers

Typography

Three type roles: Host Grotesk for display headlines with italic emphasis, Inter Tight for body copy, and JetBrains Mono for metadata labels. Tight tracking on display; wide tracking on mono.

Display · Host Grotesk

Headlines, hero type, pull quotes, stat numbers

800 extrabold Italic emphasis −0.03 to −0.05em tracking

Your vision,
engineered.

Use italic weight within display type for emphasis — never a separate color. Signal highlight marks draw attention to key words without breaking the typographic rhythm.

Sans · Inter Tight

Body copy, UI labels, form fields, navigation fallbacks

400–600 ss01 + cv11 features 19px / 1.45 lede

Virtu is a studio for founders. We take on four projects a year and ship small, specific things, well — the product you described in the first call, built exactly like you described it.

Mono · JetBrains Mono

Eyebrows, section labels, nav links, badges, metadata

10–10.5px 0.14–0.16em tracking Always uppercase

Now booking · Q3 2026 — est. 2022 — A · Studio — 01 / 03

Type scale

Hero clamp(64px, 12vw, 192px) Display

Section clamp(28px, 3.2vw, 40px) Section title

Lede 19px / 1.45 Body lede paragraph text

Meta 10.5px / 0.16em Metadata label

Logo & mark

The Virtu mark is a geometric symbol built from four quarter-circle forms — modular, architectural, and scalable. The wordmark pairs custom letterforms with the mark for lockups.

Mark on Bone · Light

Mark on Graphite · Dark

Mark on Signal · Accent

Wordmark · Footer lockup

1× mark height clearspace

✓ Do

Use Graphite or Bone fills that match the background contrast. Keep the mark at integer pixel heights (32px nav, 48px+ hero). Pair with mono tagline separated by a 1px rule.

✗ Don't

Don't rotate, stretch, or add drop shadows. Don't place the mark on busy photography without a solid ground. Don't use Signal as a mark fill except in deliberate accent contexts.

Components & patterns

Signal favors pill-shaped CTAs, hairline borders, and editorial grid cells. Components use sharp 4px radii (architectural, not soft) with monospace labels on interactive elements.

Buttons · CTAs

Book a call See work Start a project Learn more

Badges · Eyebrows

Now booking · Q3 2026 Virtu · № 04 Signal

Search / Input

Pull quote

“A small studio. Four projects a year.”

Code block

// Graphite ground · Bone text · Signal syntax
const studio = {
  name: "Virtu",
  system: "Signal",
  projectsPerYear: 4,
  accent: "#E8FF5C"
};

Editorial grid layout

A · Studio — 01 / 03

Virtu is a studio for founders. We take on four projects a year and ship small, specific things, well.

Start a project

B · Practice — 02 / 03

4/yr

Projects, capped

C · Promise — 03 / 03

A small studio.
Four projects a year.

Motion, radius & spacing

Animations use a shared easing curve. Layout max-width is 1360px with 40px horizontal padding. Border radius stays sharp at 4px — architectural, not friendly-rounded.

fadeUp

Hero entrances. 1s duration, 20px Y translate.

cubic-bezier(0.16, 1, 0.3, 1)

scrollPulse

Scroll indicators. 2s infinite opacity + height pulse.

Hover lift

CTAs translate −1px on hover. 160ms ease. Used on pills and nav actions.

transform: translateY(-1px)

Radius tokens

Token	Value	Usage
`--radius`	4px (0.25rem)	Cards, inputs, code blocks
`--radius-md`	6px	Shadcn button default
`--radius-pill`	999px	CTAs, badges, eyebrows

Design system &brand guide.