Glissando

Brand System v1.1 — Visual Identity Reference
March 2026
01
Color Palette
Rosewood base, terracotta primary accent, dusty plum secondary, petrol supporting. Warm surfaces, rich darks, two accent temperatures.
Rosewood
Mid
Clay
Terracotta
Plum
Petrol
Parchment
Linen
--rosewood
#2B1F1E
Primary text, CTA fill, nav active
--rosewood-mid
#4A3634
Hover states, deep gradient end
--clay
#6B524F
Secondary text, metadata, labels
--terracotta
#C4705A
Primary accent — links, focus, active states
--terracotta-light
#D88B78
Hover accent, active pill highlight
--terracotta-deep
#A85A46
Pressed state, deep accent
--plum
#6B4A5E
Secondary accent — completion, brand moments
--petrol
#3A5258
Supporting — dark mode, code tint, cool contrast
--parchment
#F3ECE4
Primary surface (background)
--linen
#FAF6F1
Card surface, elevated elements
--bone
#F0EDE8
Tertiary surface, sidebar, divider fill
--umber
#1A1211
Dark mode primary surface
Terracotta Opacity Ramp
04081218305585
Plum Opacity Ramp
04081218305585
Petrol Opacity Ramp
04081218305585
Color Roles
Terracotta — Primary Accent
Links & wayfinding
Focus rings (glow)
Active/processing states
Interactive element highlights
Section labels & markers
Wave mark default color
Plum — Secondary Accent
Completion states
Background washes on settled content
Brand moments (marketing, hero)
Output card tint when complete
Dark mode atmospheric accent
Hover states on secondary elements
Petrol — Supporting
Dark mode surface layering
Code/output subtle tinting
Cool contrast moments
Tooltip backgrounds
Tertiary button states
Data visualization complement
Dark Mode Mapping
Umber
Rosewood
Mid
Terra
Plum
Petrol
Surface: --umber #1A1211 Card: --rosewood #2B1F1E Elevated: --rosewood-mid #4A3634 Text: --parchment @ 85%
02
Typography
Bricolage Grotesque for display, General Sans for body and UI, IBM Plex Mono for metadata. Ink traps in display face add personality at large sizes; body face is clean and legible at all sizes; mono face is warm and humanist.
Display — Bricolage Grotesque
Glissando
The smooth slide between notes
Bricolage Grotesque 600–700 / Wordmark + hero headings only / -0.02em tracking
Body & UI — General Sans
Glissando transforms your raw intent into precisely engineered prompts. Describe what you need, choose your target model, and the Composer shapes your objective into an optimized instruction set — ready to paste.
COMPOSE PROMPT  ·  Professional Mode  ·  Collection  ·  Claude 4 Opus
General Sans 400–600 / All body text, UI labels, buttons, pills, output text
Mono — IBM Plex Mono
requestId: a3f8c92e  |  model: claude-4-opus  |  mode: professional  |  tokens: 1,247
IBM Plex Mono 400–500 / Technical metadata, token counts, request IDs — warm humanist mono, aligns with organic brand feel
ElementFaceSizeWeightTracking
Wordmark--font-display18–20px700-0.02em
Hero heading--font-display36–48px600–700-0.02em
Section title--font-display24px600-0.01em
Field label--font-body10px7000.1em
Body text--font-body14–15px4000
UI label / pill--font-body11–12px500–6000
Button text--font-body13px6000
Output text--font-body13–14px4000
Metadata / mono--font-mono11–12px4000
03
Component Direction
Shape language and interaction principles. Smooth, warm, physical — controls that feel like they belong on an instrument, not a spreadsheet.
Pill-shaped controls
All interactive elements use border-radius: 999px. Buttons, pills, toggles, tags. The signature shape — smooth and fluid, echoing the glissando motion.
Solid-dark primary CTA
Primary action is always --rosewood fill with --parchment text. Creates gravity. Accent color is for wayfinding, not the main action.
Glow-only focus
Focus states use box-shadow: 0 0 0 4px rgba(196,112,90,0.08) with a subtle border-color shift. No hard rings. Feels like warmth radiating from the element.
Shadow shift for state
Card states indicated by warm shadow changes + subtle background tint — not left-border accents. Processing: --terracotta shadow. Complete: --plum tint.
Warm shadows
All shadows use rgba(43,31,30,x) — derived from rosewood, never pure black. Creates depth that feels like it belongs on the warm surface.
Wave mark as icon
The sinuous wave from the logo replaces all generic icons: CTA button icon, nav rail marker, loading spinner animation. The most-seen brand element.
Collection icon
Vinyl disc + sleeve, disc behind sleeve at ~71% exposure. Center hole fully visible with gap from sleeve edge. Half-arc grooves at display sizes, simplified at 16px. SVG spec: cx=31 r=14 hole-r=4 sleeve-w=22
Model-specific borders
Output cards carry subtle brand-color borders for their target model (ChatGPT green, Claude orange, Gemini blue). Third-party colors stay unchanged.
Grain texture
Subtle noise overlay on primary surface, tinted to --parchment. Adds physicality. Reduced to near-zero on cards and interactive elements.
04
Naming Conventions
Musical metaphor expressed through the language of craft, not performance. Terms should feel natural to non-musicians while rewarding those who catch the reference.
Composer
The tool itself
Person who writes music + the tool composes prompts. "Compose Prompt" as CTA. Direct, accurate, musical.
Compose
Primary action verb
The act of creating. "Compose Prompt" rather than "Generate" or "Create." Carries craft and intentionality.
Collection
Saved prompts
A curated gathering. More intentional than "History," more intuitive than "Repertoire." Your collection of composed works.
05
UI Application
The complete system applied to the Glissando interface. Light mode (primary) and dark mode shown.
Light Mode — Complete State
Glissando
Composer
Collection
Objective
Write a comprehensive tax strategy memo for a sole proprietor transitioning to an S-Corp, covering timing, salary requirements, and estimated savings.
Target Model
ChatGPT
Claude
Gemini
Mode
Casual
Professional
Compose Prompt
Complete
The current date is 2026-03-02. You are a senior CPA and tax strategist with 15 years of experience advising small business owners on entity structure transitions. The client is a sole proprietor earning $180K annually...
Copy to Clipboard
Processing State
Glissando
Objective
Write a tax strategy memo...
Composing...
Composing...
Empty State
Glissando
Objective
Describe what you need...
Compose Prompt
Your composed prompt will appear here
Dark Mode — Complete State
Glissando
Composer
Collection
Objective
Write a comprehensive tax strategy memo for a sole proprietor...
Target Model
ChatGPT
Claude
Gemini
Compose Prompt
Complete
The current date is 2026-03-02. You are a senior CPA and tax strategist with 15 years of experience advising small business owners on entity structure transitions...
Copy to Clipboard
06
Implementation Reference
Files to modify and token mapping for the CSS custom property system.
FileChange
public/styles/base.cssAll CSS custom properties — colors, fonts, opacity ramps, shadow tokens
public/styles/components.cssAccent references, pill/button colors, model-specific borders
public/styles/layout.cssBackground gradients, grain texture tint, nav rail, shadow definitions
public/index.htmlGoogle Fonts + Fontshare link tags, theme-color meta
public/styles/auth.cssModal/dialog color references
Font Loading
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link href="https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
Glissando Brand System v1.1 — March 2026. Updated: IBM Plex Mono (replaces Geist Mono), Collection icon (disc + sleeve), segmented controls. Model-specific glow colors (ChatGPT/Claude/Gemini) are third-party brand colors and remain unchanged.