totalaud.io Brand Guidelines
IMPORTANT: totalaud.io is SEPARATE from Total Audio Promo (totalaudiopromo.com). Do not mix these brands.
When building frontend for totalaud.io, ALWAYS use these brand constraints:
Brand Identity
- Brand Name: totalaud.io (lowercase, always)
- Product: Calm Creative Workspace for Independent Artists
- Tone: Calm, minimal, artist-first, experimental
- Status: Experimental project (sandbox for new ideas)
Colour Palette
:root {
/* Core colours - Dark theme PRIMARY */
--background: #0F1113; /* Matte Black */
--foreground: #FAFAFA; /* Light Grey/White */
--accent: #3AA9BE; /* Slate Cyan */
--border: rgba(255,255,255,0.1);
/* Semantic */
--muted: #71717A;
--success: #22C55E;
--warning: #F59E0B;
--error: #EF4444;
}
Typography
- Primary: Geist Sans / Inter (clean, modern)
- Monospace: Geist Mono / JetBrains Mono
- Line Height: 1.4–1.6
- Max Width: 70ch for reading
Motion Tokens
const motion = {
fast: '120ms cubic-bezier(0.22, 1, 0.36, 1)', // Micro feedback
normal: '240ms cubic-bezier(0.22, 1, 0.36, 1)', // Pane transitions
slow: '400ms ease-in-out', // Calm fades
}
Aesthetic Direction
totalaud.io is CALM, not chaotic.
- Minimal, not overwhelming
- Soft motion, not jarring
- Dark theme by default
- Generous whitespace
- No visual clutter
- Subtle glow effects on accent colour
Four Core Modes
- Ideas Mode — capture & organise creative/marketing ideas
- Scout Mode — discover real opportunities (playlists, blogs, radio, press)
- Timeline Mode — plan release actions visually
- Pitch Mode — craft narratives and bios with AI coaching
Visual Elements
- Subtle glows:
text-shadow: 0 0 40px rgba(58, 169, 190, 0.15)
- Soft borders:
rgba(255,255,255,0.1)
- Rounded corners: Consistent border-radius
- Depth: Subtle layering, not flat
What to AVOID
- ❌ Bright/loud colours
- ❌ Complex animations
- ❌ Cluttered layouts
- ❌ Generic AI aesthetics
- ❌ Purple gradients
- ❌ Aggressive CTAs
- ❌ Light/white backgrounds (that's Total Audio Promo's style)
- ❌ Blue accent colour (that's Total Audio Promo's accent)
What to EMBRACE
- ✅ Calm, dark backgrounds (#0F1113)
- ✅ Slate cyan accents (#3AA9BE) - sparingly
- ✅ Soft shadows and glows
- ✅ Clean typography
- ✅ Mobile-first responsive
- ✅ Framer Motion for animations
- ✅ Generous negative space
- ✅ Progressive disclosure
Brand Comparison
| Aspect |
totalaud.io |
Total Audio Promo |
| Theme |
Dark (#0F1113) |
Light (#FFFFFF) |
| Accent |
Slate Cyan (#3AA9BE) |
Blue (#3B82F6) |
| Feel |
Calm, experimental |
Professional, SaaS |
| Tone |
Artist-first, creative |
Founder-led, credible |
| Purpose |
Creative workspace |
Promotion tools |
1---2name: totalaud-brand3description: Use when building UI for totalaud.io - enforces brand colours, typography, and calm aesthetic4---5
6# totalaud.io Brand Guidelines
7
8**IMPORTANT**: totalaud.io is SEPARATE from Total Audio Promo (totalaudiopromo.com). Do not mix these brands.
9
10When building frontend for totalaud.io, ALWAYS use these brand constraints:
11
12## Brand Identity
13
14- **Brand Name**: totalaud.io (lowercase, always)
15- **Product**: Calm Creative Workspace for Independent Artists
16- **Tone**: Calm, minimal, artist-first, experimental
17- **Status**: Experimental project (sandbox for new ideas)
18
19## Colour Palette
20
21```css
22:root {
23 /* Core colours - Dark theme PRIMARY */
24 --background: #0F1113; /* Matte Black */
25 --foreground: #FAFAFA; /* Light Grey/White */
26 --accent: #3AA9BE; /* Slate Cyan */
27 --border: rgba(255,255,255,0.1);
28
29 /* Semantic */
30 --muted: #71717A;
31 --success: #22C55E;
32 --warning: #F59E0B;
33 --error: #EF4444;
34}
35```
36
37## Typography
38
39- **Primary**: Geist Sans / Inter (clean, modern)
40- **Monospace**: Geist Mono / JetBrains Mono
41- **Line Height**: 1.4–1.6
42- **Max Width**: 70ch for reading
43
44## Motion Tokens
45
46```typescript
47const motion = {
48 fast: '120ms cubic-bezier(0.22, 1, 0.36, 1)', // Micro feedback
49 normal: '240ms cubic-bezier(0.22, 1, 0.36, 1)', // Pane transitions
50 slow: '400ms ease-in-out', // Calm fades
51}
52```
53
54## Aesthetic Direction
55
56**totalaud.io is CALM, not chaotic.**
57
58- Minimal, not overwhelming
59- Soft motion, not jarring
60- Dark theme by default
61- Generous whitespace
62- No visual clutter
63- Subtle glow effects on accent colour
64
65## Four Core Modes
66
671. **Ideas Mode** — capture & organise creative/marketing ideas
682. **Scout Mode** — discover real opportunities (playlists, blogs, radio, press)
693. **Timeline Mode** — plan release actions visually
704. **Pitch Mode** — craft narratives and bios with AI coaching
71
72## Visual Elements
73
74- **Subtle glows**: `text-shadow: 0 0 40px rgba(58, 169, 190, 0.15)`
75- **Soft borders**: `rgba(255,255,255,0.1)`
76- **Rounded corners**: Consistent border-radius
77- **Depth**: Subtle layering, not flat
78
79## What to AVOID
80
81- ❌ Bright/loud colours
82- ❌ Complex animations
83- ❌ Cluttered layouts
84- ❌ Generic AI aesthetics
85- ❌ Purple gradients
86- ❌ Aggressive CTAs
87- ❌ Light/white backgrounds (that's Total Audio Promo's style)
88- ❌ Blue accent colour (that's Total Audio Promo's accent)
89
90## What to EMBRACE
91
92- ✅ Calm, dark backgrounds (#0F1113)
93- ✅ Slate cyan accents (#3AA9BE) - sparingly
94- ✅ Soft shadows and glows
95- ✅ Clean typography
96- ✅ Mobile-first responsive
97- ✅ Framer Motion for animations
98- ✅ Generous negative space
99- ✅ Progressive disclosure
100
101## Brand Comparison
102
103| Aspect | totalaud.io | Total Audio Promo |
104|--------|-------------|-------------------|
105| Theme | Dark (#0F1113) | Light (#FFFFFF) |
106| Accent | Slate Cyan (#3AA9BE) | Blue (#3B82F6) |
107| Feel | Calm, experimental | Professional, SaaS |
108| Tone | Artist-first, creative | Founder-led, credible |
109| Purpose | Creative workspace | Promotion tools |
majiayu000