← Back to home

Brand Guidelines

AIQuo is a Product Execution Studio. Our visual identity reflects precision, technical excellence, and clarity. These guidelines ensure consistency across all touchpoints.

Colors

Our UI palette is monochromatic — black, white, and grays. This creates a clean, professional, product-focused aesthetic that lets the work speak for itself. Following the approach of modern AI companies like OpenAI and Anthropic.

Text

Primary
#0a0a0a
--text
Secondary
#404040
--text-secondary
Muted
#6b6b6b
--text-muted

Backgrounds

Background
#ffffff
--bg
Surface
#fafafa
--bg-subtle
Contrast: All text colors meet WCAG AA accessibility standards (4.5:1 minimum contrast ratio).

Photography & Imagery

While our UI remains monochromatic, our photography and illustrations use the Coral palette to convey warmth, humanity, and approachability. This color is reserved exclusively for imagery — never for UI elements.

Coral Palette

Use for: Photography overlays, gradients, illustrations, abstract graphics, blog imagery.

#7f1d1d Coral 900
#b91c1c Coral 800
#dc2626 Coral 700
#ef4444 Coral 600
#f87171 Coral 500
#fca5a5 Coral 400
#fecaca Coral 300
#fee2e2 Coral 200
#fef2f2 Coral 100

Usage Guidelines

Photography Overlays

Apply coral tones as subtle overlays on team photos and workspace imagery to create warmth.

Abstract Gradients

Use darker coral tones (700-900) for abstract backgrounds in blog posts and research content.

Soft Backgrounds

Light coral (100-200) for subtle section backgrounds that need to stand out without disrupting the clean aesthetic.

Photography Style

Candid, not posed Real moments of collaboration and focus
Natural light Warm, ambient lighting preferred
Human connection People interacting, not isolated portraits
Tech as tool Technology present but not protagonist
Important: Coral is for imagery only. UI elements (buttons, links, text) remain monochromatic black/gray.

Typography

Our type system uses two complementary families: Inter for all text, and JetBrains Mono for technical elements and labels.

Inter — Headlines
Product Execution Studio
Inter — Body Text
We transform ambitious ideas into shipped products. Our technical expertise and systematic approach ensure your vision becomes reality.
JetBrains Mono — Labels / Technical
START A CONVERSATION

Voice & Tone

AIQuo communicates with clarity, confidence, and warmth. We are experts who care deeply about our clients' success.

Brand Personality

Confident, not arrogant

We know our craft deeply but remain humble and curious.

Clear, not simplistic

We explain complex topics accessibly without dumbing them down.

Warm, not casual

We're approachable and human while maintaining professionalism.

Direct, not blunt

We get to the point respectfully and constructively.

Writing Principles

Do

"We build AI solutions that solve real business problems."

Don't

"We leverage cutting-edge AI to revolutionize paradigms."

Core message: "We are experts who care." This should come through in every piece of communication.

The Hexagon

The hexagon is our visual symbol of execution. It represents structure, efficiency, and the interconnected nature of product development.

Why the Hexagon?

The hexagon appears throughout nature and engineering as the optimal structure for strength and efficiency.

  • Six sides — Representing the core disciplines of product execution
  • Tessellation — Symbolizing how our work connects and scales
  • Structural integrity — Maximum strength with minimal material

Design Tokens

CSS custom properties for implementing the AIQuo design system. Copy these directly into your stylesheets.

UI Colors

Token Value Preview
--bg #ffffff
--bg-subtle #fafafa
--text #0a0a0a
--text-secondary #404040
--text-muted #6b6b6b
--accent #0a0a0a
--border rgba(0, 0, 0, 0.08)

Imagery Colors (Coral Palette)

Name Value Preview
Coral 900 #7f1d1d
Coral 700 #dc2626
Coral 500 #f87171
Coral 300 #fecaca
Coral 100 #fef2f2

Font Stack

Usage Font Family
Headlines & Body 'Inter', -apple-system, sans-serif
Labels / Technical 'JetBrains Mono', monospace

Spacing Scale

Token Value
--space-1 4px
--space-2 8px
--space-3 12px
--space-4 16px
--space-5 24px
--space-6 32px
--space-7 48px
--space-8 64px

Border Radius

Token Value
--radius-sm 4px
--radius-md 6px
--radius-lg 8px