Brand standards

How to present TaskVoice: the logo and its files, exact colors, type, spacing, and the contrast rules that keep it readable.

Logo

TaskVoice has one mark and one horizontal lockup. Use the files below exactly as supplied: never redraw, re-space or recolor them.

Mark: A solid T with a diagonal cut, drawn on a 64-unit grid with an 8-unit inset built into the file.
Lockup: The T beside the outlined TaskVoice wordmark, 352 × 72. Use it at first contact, such as headers and footers.
Minimum size: Lockup at least 140px wide. Mark at least 24px square.
Clear space: Each file already includes its clear space. Never crop the artwork to the shape, and keep other elements outside the file's bounds.
Motion: The entrance and loader animations end on the static master. Under reduced motion, show the static file.

Approved variants

Horizontal lockup, Signal
Default on light surfaces: Signal Orange T with an Ink wordmark.
Download SVG
Horizontal lockup, dark
Default on Ink and other dark surfaces: Signal Orange T with a Paper wordmark.
Download SVG
Horizontal lockup, one-color Ink
Single-color reproduction on light surfaces, such as print or embossing.
Download SVG
T mark, Signal Orange
App icons, favicons and compact headers once the name is established.
Download SVG
T mark, Ink
Single-color mark on light surfaces.
Download SVG
T mark, Paper
Single-color mark on Ink and other dark surfaces.
Download SVG

These are the same vector files taskvoice.com serves. Download them here rather than copying the logo from a screenshot.

Logo usage

Each example uses the real logo file. The don'ts are distorted with styling on this page only, to show what to avoid.

Do
Use the Signal lockup on Paper and other light surfaces.
Do
Use the dark lockup on Ink and other dark surfaces.
Do
Use the T mark alone once the name is already on screen.
Don't
Don't stretch or squash the logo. Scale it proportionally.
Don't
Don't recolor the mark or wordmark outside the supplied files.
Don't
Don't place the logo on Signal Orange or busy backgrounds.
Don't
Don't put the light-surface lockup on a dark ground.
Don't
Don't rotate the logo or add shadows, outlines or effects.

Color

Six core colors, mapped to semantic roles for light and dark themes. Values are exact; copy them as written.

Ink
#181918
rgb(24, 25, 24) · --tv-ink
Primary text, the wordmark on light surfaces, and dark surfaces.
Paper
#F5F3EE
rgb(245, 243, 238) · --tv-paper
Page background in light mode and text on Ink.
Signal Orange
#FF703D
rgb(255, 112, 61) · --tv-orange
The T mark and the single main action of an area, always with Ink text.
Lavender
#BCA6FF
rgb(188, 166, 255) · --tv-lavender
Focus rings and links on dark surfaces.
White
#FFFFFF
rgb(255, 255, 255) · --tv-white
Raised surfaces such as cards in light mode.
Slate
#62645E
rgb(98, 100, 94) · --tv-slate
Secondary and muted text on light surfaces.

How to use color

Ink and Paper carry almost everything. Signal Orange is an accent, not a background for text-heavy areas.
Use Signal Orange for the single main action of an area, with an Ink label. Its border is Ink in light mode and Signal Orange in dark mode (--tv-action-border).
Never use Signal Orange or Lavender to mean a status. Status has its own tones, always with an icon and the literal state.
A person's decision, such as a human approval, is solid Ink so it is never confused with a passed check.

Semantic roles

Semantic color roles in light and dark themes
Role	Token	Light	Dark
Background	--tv-bg	#F5F3EE	#181918
Surface	--tv-surface	#FFFFFF	#222322
Sunken surface	--tv-surface-sunken	#E9EAE5	#2C2D2A
Text	--tv-fg	#181918	#F5F3EE
Muted text	--tv-fg-muted	#62645E	#ABADA5
Control border	--tv-border-control	#85877F	#80827A
Decorative border	--tv-border-decor	#DCDCD4	#363733
Action	--tv-action-bg	#FF703D	#FF703D
Action hover	--tv-action-bg-hover	#FF8659	#FF8659
Action pressed	--tv-action-bg-pressed	#E85F2F	#E85F2F
Action border	--tv-action-border	#181918	#FF703D
Accent text	--tv-accent-text	#AE3A12	#FF703D
Link	--tv-link	#6140AA	#BCA6FF
Focus ring	--tv-focus	#6140AA	#BCA6FF
Success status	--tv-status-success-fg / -bg	#296449#E0EFE6	#7CCB9F#1C3327
Warning status	--tv-status-warning-fg / -bg	#9A5700#FFF0CF	#E8B04E#3A2D12
Danger status	--tv-status-danger-fg / -bg	#AC302B#FBE0DC	#FF9D94#3F201D
Review status	--tv-status-review-fg / -bg	#6140AA#E9E1FF	#BCA6FF#2C2545
Neutral status	--tv-status-neutral-fg / -bg	#62645E#E9EAE5	#ABADA5#2C2D2A

Typography

Space Grotesk gives titles their character; Inter keeps everything else calm and readable. Both are open-source fonts under the SIL Open Font License.

Space Grotesk
Ship the whole fleet
Display and headings, h1 to h6. Weights 600 and 700.
Inter
See checks, reviews and conflicts together.
Body copy, interface labels and controls. Weights 400 to 600.
Geist Mono
PR #128 · 2a9f3c1
Code, commit SHAs, IDs and exact values only.

Type scale

Page title
Space Grotesk 600 · 56/60px desktop, 36/40px mobile · −0.025em
Section title
Space Grotesk 600 · 28/34px desktop, 24/32px mobile
Lead
Inter 400 · 18/28px · muted
Body
Inter 400 · 16/28px
Label
Inter 500 · 14/20px
Caption
Inter 400 · 12/16px · muted

Spacing and shape

Spacing follows a 4px scale. Corners stay small and consistent so content, not chrome, stands out.

4px
8px
12px
16px
24px
32px
48px
64px

Controls4px radius

Panels8px radius

Marketing panels12px radius

Control radius: 4px--tv-radius-control
Panel radius: 8px--tv-radius-panel
Marketing panel radius: 12px--tv-radius-marketing-panel
Control heights: 32 / 40 / 48px--tv-control-height-sm / md / lg
Table row height: 48px--tv-row-height
Focus ring: 2px, 3px offset--tv-focus-width / --tv-focus-offset
Motion durations: 140 / 220 / 280 / 500mshover / panel / view / enter
Easing: cubic-bezier(0.2, 0.8, 0.2, 1)--tv-ease-standard

Accessibility and contrast

Ratios below are calculated from the exact color values with the WCAG 2.1 formula, for both themes.

Body text and labels reach at least 4.5:1 against their background; focus rings and control borders reach at least 3:1.
Every interactive element keeps a visible focus ring: 2px, offset 3px, in the focus color.
Status is never color alone. Pair the tone with an icon and the literal state, such as “Blocked”.
Give logo images the accessible name “TaskVoice”, and name an icon-only home link “TaskVoice home”.
Respect reduced motion: show the static logo instead of the entrance or loader animation.

Brand contrast pairs
Pair	Minimum	Light	Dark
Text on background--tv-fg on --tv-bg	4.5:1	15.90:1	15.90:1
Muted text on surface--tv-fg-muted on --tv-surface	4.5:1	5.99:1	6.95:1
Muted text on sunken surface--tv-fg-muted on --tv-surface-sunken	4.5:1	4.96:1	6.10:1
Action label on Signal Orange--tv-action-fg on --tv-action-bg	4.5:1	6.41:1	6.41:1
Accent text on background--tv-accent-text on --tv-bg	4.5:1	5.55:1	6.41:1
Link on surface--tv-link on --tv-surface	4.5:1	7.44:1	7.54:1
Human approval label--tv-human-fg on --tv-human-bg	4.5:1	15.90:1	15.90:1
Focus ring on surface--tv-focus on --tv-surface	3:1	7.44:1	7.54:1
Control border on surface--tv-border-control on --tv-surface	3:1	3.64:1	4.05:1

Pairs to avoid

2.48:1
Signal Orange text on Paper
Use Accent text (#AE3A12) for orange-toned text on light surfaces.
2.48:1
Paper text on Signal Orange
Action labels on Signal Orange are always Ink.