Voice Aura — Asset Showcase

Brand Assets

Logo variations for light and dark contexts. Minimum display size: 24px for icon, 140px width for full logo.

logo-icon.svg

logo-full.svg

logo-icon-white.svg

Custom Icons

Voice-specific SVG icons created for the design system.

play-circle

pause-circle

waveform

microphone

volume-high

Lucide Icon Set

54 curated icons from Lucide (MIT license). Full library has 1,900+ icons.

Audio / Voice

mic

mic-off

headphones

volume-2

volume-x

audio-waveform

podcast

radio

speaker

waves

Playback

play

pause

square

circle-play

circle-pause

Navigation

arrow-right

chevron-down

chevron-right

chevron-up

external-link

Actions

send

upload

download

copy

share-2

bookmark

log-in

log-out

Content

file-text

code

globe

languages

video

message-square

Feedback

heart

star

thumbs-up

check

bell

eye

eye-off

Utility

settings

user

lock

mail

phone

clock

zap

sparkles

Commerce & Social

credit-card

shield-check

github

twitter

Patterns & Decorative Elements

Background textures, waveforms, and dividers for visual interest.

Halftone Dots

16x16 tile · halftone-dots.svg

Grid Dots

24x24 tile · grid-dots.svg

Sound Wave Hero

120x300 · sound-wave-hero.svg

Wave Divider

1440x60 · wave-divider.svg

CSS Pattern Mixin

@include va-halftone-overlay();

CSS Halftone Overlay (Mixin)

Pure CSS · no image file needed · configurable opacity & color

Illustrations & Mockups

Device frames and interface mockups for feature sections and demos.

voice-studio-mockup.svg (600x400)

phone-mockup.svg (280x560)

Typography

IBM Plex superfamily — Serif for headings, Sans for body, Mono for code. All from Google Fonts under SIL OFL.

IBM Plex Serif

Built for unmatched speed

Regular 400 Medium 500 SemiBold 600 Bold 700

IBM Plex Sans

Fastest TTS API. Customizable voice Studio.

Light 300 Regular 400 Medium 500 SemiBold 600 Bold 700

IBM Plex Mono

const voice = await api.generate(text);

Regular 400 Medium 500

Color Palette for Assets

Use these exact values when recoloring downloaded SVGs and illustrations.

Primary Blue

#0478FF

Near Black

#1A1919

Light Grey

#E9E9EA

Section BG

#F7F7F8

Body Text

#4B5563

Muted

#9CA3AF

White

#FFFFFF

Border

#E5E7EB

Open-Source Asset Sources

All recommended platforms for downloading additional assets. Verify licenses per-asset for SVG Repo.

Platform	Best For	License	Attribution
Lucide Icons	UI icons (primary library)	MIT	Not required
Phosphor Icons	Extended icon needs	MIT	Not required
unDraw	Feature illustrations, empty states	CC0	Not required
SVG Repo	SVG icons & illustrations	Varies	Check per asset
Hero Patterns	CSS/SVG background patterns	Free	Not required
Google Fonts	IBM Plex font family	SIL OFL	Not for usage
IBM/plex (GitHub)	Self-hosted font files	SIL OFL	License file for redistribution

Asset Guidelines

Quick reference for sourcing, optimizing, and attributing assets. Full details in ASSET_GUIDELINES.md.

5-Gate Acquisition Flow

Gate	Check	Action
1	Existing assets	Search `assets/` first — avoid duplicates
2	License	ISC, MIT, CC0, SIL OFL = approved. Freepik/Flaticon free = conditional (attribution)
3	Visual consistency	Must match 1.5px stroke, 24px grid, rounded caps
4	Optimization	SVGO (`svgo.config.js`), max 3 KB per icon, 50 KB per illustration
5	Documentation	Add entry to ATTRIBUTIONS.md

Where to Find Assets

Need	First Choice	Fallback
UI icon	Lucide ISC	Phosphor, Tabler
Illustration	unDraw CC0	Storyset (attr. req.)
Pattern / texture	`assets/patterns/`	Hero Patterns Free
Stock photo	Unsplash	Pexels
Decorative icon	Flaticon (attr. req.)	—

Current Inventory

Category	Count	License
Lucide icons	56	ISC
Custom icons	5	ISC
Brand assets	3	ISC
Blog images	4	ISC
Illustrations	2	ISC
Patterns	14	ISC
Fonts	2 families	SIL OFL
Total	86	No attribution required