Brand Guidelines

A comprehensive reference for using the That Is A Q identity consistently across digital, print, and experiential touchpoints.

Philosophy & Mission

We question assumptions to build exceptional outcomes. Our brand reflects curiosity, precision, and forward motion.

Core Principles

Curiosity First

We ask "why" before we build "how." Every project starts with deep discovery.

Radical Clarity

Complex ideas deserve simple, elegant expressions. No fluff, just signal.

Crafted Precision

Pixel-perfect design, clean architecture, and intentional typography.

Future-Ready

We design for scale, adaptability, and emerging technologies.

Color Palette

Our palette balances energy with sophistication. Click any swatch to copy the hex code.

Primary
#6C5CE7
Copied!
Secondary
#00CEC9
Copied!
Accent
#FD79A8
Copied!
Highlight
#FDCB6E
Copied!
Base Dark
#0A0E27
Copied!
Surface
#121638
Copied!

Typography

Space Grotesk for headlines conveys technical confidence. Inter for body text ensures maximum readability across interfaces.

H1 / Display

Question everything.

Space Grotesk / 800 / 2.5rem
H2 / Section

Build the answer.

Space Grotesk / 700 / 1.75rem
H3 / Card

Interface Elements

Space Grotesk / 600 / 1.25rem
Body / Base

Clear communication drives trust. We avoid jargon unless necessary, and always prioritize accessibility and scanability.

Inter / 400 / 1rem / 1.6 LH
Caption / Meta
Status / Labels / Tags
Inter / 500 / 0.85rem

Voice & Tone

Our written communication mirrors our design philosophy: intentional, direct, and human.

Direct & Confident

Avoid hedging. State facts clearly. Use active voice. "We ship weekly" over "Efforts are made to deliver periodically."

Intelligent but Accessible

Respect the reader's time. Explain complex concepts simply. Never condescend or overcomplicate.

Forward-Looking

Focus on outcomes and possibilities. Use progressive language that aligns with innovation without hype.

Consistent Formatting

Capitalize headings in title case. Use sentence case for body text. Always spell out acronyms on first use.

UI & Design System

Interface components follow an 8px baseline grid, consistent border radius, and layered depth model.

Buttons & States

Primary actions use the accent gradient. Secondary actions use transparent backgrounds with borders. Hover states lift slightly; active states compress minimally.

Spacing & Rhythm

All padding, margins, and gaps align to an 8px scale. Standard gaps: 8, 16, 24, 32, 48, 64px.

Surface & Depth

Base: Transparent/Background
Level 1: Cards, inputs (rgba(18,22,56,0.6) + 1px border)
Level 2: Modals, dropdowns (higher blur, stronger shadow)
Radius: 8px (UI elements), 12px (cards), 16px (containers)