BRAND SYSTEM

House & product guidelines

Standardized tokens and voice rules for the Greatapps umbrella and its three products. Source of truth: src/assets/brand-guidelines.ts (v1.0.0).

GREATAPPS

Bringing AI innovation to everyday life

Greatapps is the umbrella brand for three interconnected AI products — GreatRouter, GreatStudios, and GreatChat. Marketing presents a unified light-mode editorial system with shared typography and a single house accent.

Colors

  • House accent #45B1E8 Section labels, links, cookie-consent toggles, product gradient bars on marketing cards. Primary CTA buttons use black fill, not accent fill.
  • Text primary #000000 Headlines, body copy, logo wordmark.
  • Text secondary rgba(0,0,0,0.6) Subtitles, nav links at rest, supporting copy.
  • Surface #FAFAFA Page background.
  • Surface paper #FFFFFF Cards, header when scrolled, modals.
  • Border rgba(0,0,0,0.06) Dividers, card outlines, mobile nav separators.
  • Error #EF4444 Form validation and destructive states only.

Typography

  • Body / UI — Pliant (100–700). All marketing prose. Body text is uppercase on marketing pages; subtitles use sentence case (text-transform: none).
  • Mono / labels — JetBrains Mono (300–700). Nav links, section labels (9px, 0.12em tracking), stats, code hints.
  • Display accent — Saira Stencil One (400). Optional display lockups on umbrella and Studios marketing — not used in product app UI.

Do

  • Use #45B1E8 for accent moments — labels, hovers, gradient bars.
  • Keep CSS custom properties in global.css as the token source for the umbrella site.
  • Use Pliant + JetBrains Mono everywhere on Greatapps.

Don't

  • Add Tailwind or a second design system to Greatapps.
  • Claim SOC 2 or other unverified compliance in marketing copy.
  • Disclose backend infrastructure providers (hosting, workers, inference platforms) in customer-facing UI.
  • Use dark mode on the umbrella marketing site.
PRODUCTS

Per-product identity

Shared house principles with recognizable product personalities.

GREATROUTER

One endpoint. Every model.

GreatRouter is the intelligent routing layer — one API that classifies intent and selects the best model. Visual identity is editorial and minimal: sharp geometry, crisp borders, grey-and-black palette with sky-blue accent.

  • Technical and precise
  • Editorial — uppercase typography, block layouts
  • Trustworthy for developers and platform teams
  • Transparent about models, not about infrastructure
Accent: #45B1E8
Visit site →
GREATSTUDIOS

The creative suite

GreatStudios is the multi-modal creative platform — image, video, music, interior, fashion, chat, and flow studios. Marketing shares the Greatapps token set with modality-specific gradients for studio identity.

  • Creative and expressive within a disciplined grid
  • Studio-forward — each modality has its own gradient accent
  • Professional but approachable for designers and enthusiasts
  • Auto-routed — no manual model picker in the app
Accent: #45B1E8
Visit site →
GREATCHAT

One app. Seven core experiences.

GreatChat is the AI super app for individuals and teams — seven unique core experiences (Chat, Editor, Mail, Meeting, Calendar, Shopping, Travel), each a distinct mini-app, with an agent that acts for you. The product app deliberately diverges from the shared blue accent: opaque black primary with steel grey secondary tones for a calm, document-first shell.

  • Super-app-first — flat white chrome, inset content panels
  • Agent-led and calm — neumorphic chat stream, minimal color noise
  • Professional — enterprise-ready tone without blue UI chrome
  • Multi-experience — one toolbar, seven unique experiences
App primary: #000000 · Steel: #8A9BA8
Visit site →
MATRIX

Cross-product comparison

What is shared vs unique across properties.

Attribute Greatapps GreatRouter GreatStudios GreatChat
House accent #45B1E8 #45B1E8 #45B1E8 App: none (black/steel). Marketing: #45B1E8 gradients (legacy)
Text primary #000000 #111111 #000000 #000000
Secondary interactive rgba(0,0,0,0.6) rgba(17,17,17,0.62) rgba(0,0,0,0.6) #8A9BA8 (app)
Body font Pliant Pliant Pliant Pliant
Mono font JetBrains Mono JetBrains Mono JetBrains Mono JetBrains Mono
Display font Saira Stencil One Pliant (no stencil) Saira Stencil One Saira Stencil One (marketing)
Marketing case Uppercase body Uppercase body Uppercase body Uppercase marketing; sentence case app
Light / dark Light only Light only Light canonical (legacy dark CSS) Light only (app + target marketing)
Nav active state Color shift on hover #45B1E8 underline or bold Accent labels Black text; steel hover — no blue chips
Primary CTA Black fill Black / accent border Black fill Black fill (app)
Corner radius (app) 4–16px scale 0px editorial + token scale 8px default 4px stream inset; 8px MUI default
Media naming greatapps-ai-* greatrouter-ai-* greatstudios-ai-* greatchat-ai-*
VOICE & TONE

How we write

  • Enterprise-credible: state what the product does with specificity.
  • No hype: avoid superlatives that cannot be measured.
  • Interconnected narrative: Router powers Studios and Chat routing.
  • Human benefit first: everyday tasks, teams, creators — not abstractions.
  • Active voice, present tense, short sentences (Google Technical Writing).

Preferred terms

route / routingstudio / studios (GreatStudios only)experiences / apps / mini apps (GreatChat)super appinternal knowledgeautointentcollaborate

Avoid

RAG (user-facing)revolutionary / game-changingSOC 2 (unless verified and approved)backend provider names in product UImodel picker (GreatStudios)

LOGO & MEDIA

Assets

Logo

  • Minimum size: 22px
  • Maintain clear space equal to the height of the icon on all sides of the lockup.
  • White (#FFFFFF) or light grey (#FAFAFA) only.
  • Do not place wordmarks on photography, gradients, or dark fills without a dedicated light panel.

Media naming

{greatapps|greatrouter|greatstudios|greatchat}-ai-{descriptive}.{png|jpg|webp}

  • Hero marketing: ~16:10 (640×400 reference in Greatapps router page).
  • Blog cards: 3:2 or 16:9 gradient placeholders.
  • App screenshots: native device aspect; crop to content area.
  • Provider logos: square or 4:3 in integration grids.
LOGO USAGE

Wordmarks & icon assets

Minimum size 22px. Maintain clear space equal to the height of the icon on all sides of the lockup.

GREATAPPS
Greatapps

Thin + bold split — GREAT (Pliant 100) · APPS (Pliant 600), uppercase.

GREATROUTER
GreatRouter

Pliant uppercase wordmark; hub icon (#111111) at 20px in marketing header.

GREATSTUDIOS
GreatStudios

Pliant uppercase; studio gradient bars on cards provide modality context.

GREATCHAT
GreatChat

Pliant uppercase for marketing; greatchat-icon.svg for in-app panel toggles.

Downloadable assets

Greatapps icon (PNG)
Greatapps icon (PNG)

22×22 hub icon used in marketing header and footer. Black, opaque.

Download ↓
Greatapps favicon (PNG)
Greatapps favicon (PNG)

Browser favicon and Apple touch icon fallback.

Download ↓
Greatapps favicon (SVG)
Greatapps favicon (SVG)

Scalable favicon — preferred where the browser supports SVG icons.

Download ↓
OG image (SVG)
OG image (SVG)

Open Graph and Twitter share card. 1200×630, light background, wordmark + accent gradient bar.

Download ↓

Background rules

COLOR PALETTES

Four product palettes

Greatapps anchors the system. Each product carries its own personality within the same accent rules.

GREATAPPS

Bringing AI innovation to everyday life

House accent #45B1E8 Section labels, links, cookie-consent toggles, product gradient bars on marketing cards. Primary CTA buttons use black fill, not accent fill.
Text primary #000000 Headlines, body copy, logo wordmark.
Text secondary rgba(0,0,0,0.6) Subtitles, nav links at rest, supporting copy.
Surface #FAFAFA Page background.
Surface paper #FFFFFF Cards, header when scrolled, modals.
Border rgba(0,0,0,0.06) Dividers, card outlines, mobile nav separators.
Error #EF4444 Form validation and destructive states only.
GREATROUTER

One endpoint. Every model.

Accent / primary #45B1E8 Links, focus rings, active nav underlines, filter highlights, chip surfaces on marketing.
Accent hover #3899CC Hover states on accent controls (marketing.css).
Text primary #111111 Body and headlines — slightly softer than pure black.
Text secondary rgba(17,17,17,0.62) Supporting copy and muted labels.
Surface #FFFFFF Page and card backgrounds.
Surface alt #F8F8F8 Placeholder blocks, alternate rows.
Border rgba(0,0,0,0.12) Crisp editorial dividers — stronger than Studios/Greatapps.
Accent muted rgba(69,177,232,0.12) Subtle accent backgrounds.
GREATSTUDIOS

The creative suite

Accent / primary #45B1E8 Primary brand accent, CTA highlights, cookie consent, section labels.
Text primary #000000 Headlines and UI text.
Text secondary rgba(0,0,0,0.6) Descriptions and metadata.
Surface #FAFAFA Marketing page background.
Surface paper #FFFFFF Cards and panels.
Border rgba(0,0,0,0.05) Light card outlines.
Image studio linear-gradient(135deg, #3B82F6, #8B5CF6) Image modality gradient bar and placeholders.
Video studio linear-gradient(135deg, #F59E0B, #EF4444) Video modality gradient.
Music studio linear-gradient(135deg, #10B981, #3B82F6) Music modality gradient.
Fashion studio linear-gradient(135deg, #EC4899, #8B5CF6) Fashion modality gradient.
GREATCHAT

One app. Seven core experiences.

Primary (app UI) #000000 Text, icons, primary buttons, active states in the web app. Replaces legacy blue in product UI.
Secondary / steel #8A9BA8 Hover states, secondary actions, collaborator accents, peer message colors.
Steel muted #6B7280 Tertiary metadata and muted collaborator palette.
Background default #F5F5F5 App shell background behind white chrome.
Surface paper #FFFFFF Sidebar, header, cards — flat white, no tint.
Text secondary rgba(0,0,0,0.6) Placeholders (12px), sub-headers, supporting labels.
Error #EF4444 Destructive actions only.
Marketing accent (legacy) #45B1E8 Still present on greatchatai.com marketing gradients — migrate new marketing work toward black/steel app tokens.
TYPOGRAPHY

Three typefaces, one system

All three are licensed under the SIL Open Font License via Google Fonts.

Aa
Body / UI / display

Pliant

Weights: 100–700

Loaded via <link> in Layout.astro. Marketing body uses uppercase; app body uses sentence case.

Open on Google Fonts
Aa
Mono / labels

JetBrains Mono

Weights: 300–700

Nav links, section labels (9px, 0.12em tracking), stats, code blocks.

Open on Google Fonts
Aa
Display accent (optional)

Saira Stencil One

Weights: 400

House and Studios display accents. GreatRouter uses Pliant (not stencil) for its display role.

Open on Google Fonts
VOICE & TONE

Copy examples — do and don't

Concrete examples for writers and designers shipping copy.

DO

"Route any request — image, video, music, or text — through one endpoint."

Clear, concrete, names the actual capabilities.

DON’T

"Revolutionary AI that will transform how you create."

Avoid superlatives that cannot be measured ("revolutionary," "transform").

DO

"GreatChat: one app, seven core experiences."

Single, repeatable line; lead with the product proposition.

DON’T

"Our SOC 2-compliant infrastructure built on AWS."

No unverified compliance claims; do not name backend infrastructure providers.

DO

"The assistant searches your internal knowledge — not the public web."

Use internal knowledge in user-facing copy (not "RAG").

DON’T

"Pick from GPT-4, Claude, Gemini, or Llama in the model picker."

GreatStudios has no manual model picker — submit model: "auto".

Claims policy

RESOURCES

Downloads & references

Everything teams and partners need for on-brand use.

Brand guidelines (source) brand-guidelines.ts — typed source of truth. Open Greatapps icon (PNG, 22px) Hub icon for headers and favicons. Download Greatapps favicon (SVG) Scalable favicon. Download OG image (SVG) Share card for social previews. Download Pliant on Google Fonts Body and display font. Open JetBrains Mono on Google Fonts Mono and label font. Open Saira Stencil One on Google Fonts Optional display accent. Open

Need something we don't list here? Write to press@greatstudiosai.com.

DOCUMENTED DELTAS

Known inconsistencies

Documented deltas across repos that these guidelines standardize going forward.

Developer reference: docs/BRAND-GUIDELINES.md · Creative agents: docs/CREATIVE-AGENT-TEAM.md