RogerIQ — AI-Native Customer Support

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/rogeriq.com -->
<!-- Extracted: 2026-05-02T00:04:44.017Z | Schema: v1 | Quality: 90/100 -->
---
version: alpha
name: "RogerIQ — AI-Native Customer Support"
description: "RogerIQ projects an image of efficient, modern, and highly capable AI automation for customer support. It balances a serious, results-oriented approach with an enthusiastic and accessible presentation, emphasizing practical solutions over technical complexity."
colors:
  primary: "#f26b3a"
  tertiary: "#1a1a2e"
  neutral: "#78716c"
  surface: "#ffffff"
  on-surface: "#000000"
  on-surface-secondary: "#78716c"
  surface-dark: "#1a1a2e"
typography:
  headline-lg:
    fontFamily: "Outfit"
    fontSize: "36px"
    fontWeight: "700"
    lineHeight: "40px"
    letterSpacing: "-0.9px"
  headline-md:
    fontFamily: "Outfit"
    fontSize: "16px"
    fontWeight: "600"
    lineHeight: "24px"
  headline-sm:
    fontFamily: "Outfit"
    fontSize: "14px"
    fontWeight: "600"
    lineHeight: "20px"
    letterSpacing: "0.35px"
  body-md:
    fontFamily: "Outfit"
    fontSize: "15px"
    fontWeight: "400"
    lineHeight: "22.5px"
rounded:
  md: "8px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#1a1a2e"
    textColor: "#fffbf7"
    rounded: "3.35544e+07px"
    padding: "8px 24px"
    fontSize: "14px"
    fontWeight: "500"
    borderColor: "#fffbf7"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "#000000"
    rounded: "3.35544e+07px"
    padding: "8px 24px"
    fontSize: "14px"
    fontWeight: "500"
    borderWidth: "1px"
  button-outline:
    rounded: "3.35544e+07px"
    padding: "6px 12px"
    fontSize: "12px"
    fontWeight: "500"
    borderWidth: "1px"
---

# RogerIQ — AI-Native Customer Support — Design System

## Overview

RogerIQ's design system embodies the archetypes of The Magician and The Hero, manifesting as an AI-native, efficient, and solution-oriented platform. This design language directly supports RogerIQ's mission to deliver highly capable AI automation for customer support, positioning it alongside industry leaders like Intercom, Zendesk, Gong, and Drift. The aesthetic is modern and direct, prioritizing clarity and functionality to convey expertise without unnecessary complexity. It is engineered to be accessible, ensuring that its advanced capabilities are presented in a user-friendly manner.

The visual identity avoids ostentatious displays of technology or overly playful elements. It is not whimsical or experimental. Instead, RogerIQ's design is grounded in practical application, reflecting a serious, results-oriented approach. The system is built to communicate confidence and reliability, focusing on how AI solves real-world customer support challenges rather than merely showcasing its technical prowess. Every design decision reinforces the brand's commitment to delivering tangible value and seamless user experiences.

**Key characteristics:**

- Vibe — AI-native, Efficient, Modern, Solution-oriented, Accessible, Direct
- Archetypes — The Magician, The Hero
- Comparable to — Intercom, Zendesk, Gong, Drift
- Design era — contemporary-functional
- Emotional tone — empowering-efficient
- Target audience — Businesses and customer support teams seeking advanced, autonomous AI solutions to streamline operations and improve customer satisfaction, valuing practical results and ease of implementation.
- Visual energy — 7/10 (high-energy/bold)

## Colors

The RogerIQ color palette is anchored by the primary color #f26b3a, a vibrant and assertive orange. This hue signals energy, innovation, and a clear call to action, embodying the brand's solution-oriented and efficient nature. It represents the 'magic' of AI in solving complex problems. The stark contrast with the #ffffff surface color ensures high readability and a clean, modern aesthetic, reinforcing the brand's direct and accessible communication style. This combination projects both enthusiasm and professional capability, aligning with the brand's AI-native and modern identity.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#f26b3a` | Tomato |
| accent / tertiary | `#1a1a2e` | Near-Black |
| surface | `#ffffff` | White |
| background | `#ffffff` | White |
| text | `#000000` | Black |
| secondary text | `#78716c` | Dim Gray |
| muted | `#78716c` | Dim Gray |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| surface | `#1a1a2e` | Near-Black |

## Typography

The RogerIQ type system exclusively utilizes the Outfit font family. This choice provides a clean, geometric sans-serif aesthetic that reinforces the brand's modern, efficient, and AI-native identity. Outfit's contemporary lines communicate precision and clarity, essential for a solution-oriented platform. Hierarchy is established through weight and size variations, ensuring critical information is immediately discernible. This direct and organized typographic approach mirrors the brand's commitment to accessibility and straightforward communication, avoiding decorative or complex typefaces that could detract from the message of practical AI automation.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| Outfit | body | google-fonts | 400, 500, 700 |
| Outfit | heading | google-fonts | 600, 700 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Heading 2 | Outfit | 36px | 700 | 40px | -0.9px |
| Heading 3 | Outfit | 16px | 600 | 24px | — |
| Heading 4 | Outfit | 14px | 600 | 20px | 0.35px |
| Body | Outfit | 15px | 400 | 22.5px | — |

### Conventions

- Heading case — sentence-case
- Body line-height — 22.5px

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| card | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.685702 0.137358 0.113298 / 0.3) 0px 0px 0px 1px, rgba(242, 107, 58, 0.18) 0px 8px 40px -12px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px` |
| element | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` |

### Gradients

- `linear-gradient(to right bottom in oklab, rgb(255, 222, 200) 0%, rgb(255, 184, 140) 50%, rgb(255, 154, 108) 100%)`
- `linear-gradient(oklab(0.990015 0.00263414 0.00633735 / 0.4) 0%, rgba(0, 0, 0, 0) 50%, oklab(0.990015 0.00263414 0.00633734 / 0.5) 100%)`
- `linear-gradient(to right bottom in oklab, rgb(255, 232, 214) 0%, rgb(255, 212, 184) 50%, rgb(255, 200, 160) 100%)`

## Shapes

Border-radius scale:

- `md` — 8px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Primary**

- Background — `#1a1a2e`
- Text — `#fffbf7`
- Radius — `3.35544e+07px`
- Padding — `8px 24px`
- Font size — `14px`
- Font weight — `500`
- Border — ` solid #fffbf7`
- Sample copy — "Get started"

**Secondary**

- Background — `#ffffff`
- Text — `#000000`
- Radius — `3.35544e+07px`
- Padding — `8px 24px`
- Font size — `14px`
- Font weight — `500`
- Sample copy — "See pricing"

**Outline**

- Radius — `3.35544e+07px`
- Padding — `6px 12px`
- Font size — `12px`
- Font weight — `500`
- Sample copy — "All systems operational"

## Do's and Don'ts

### Do

- Use Outfit font family for all text, with Outfit 600 or 700 for headings and Outfit 400 or 500 for body text.
- Apply sentence-case for all headings, never title case or all caps.
- Ensure body text has a line-height of 22.5px for readability.
- Primary buttons should use a solid background of #1a1a2e with #fffbf7 text, pill-shaped radius (3.35544e+07px), and 8px 24px padding.
- Secondary buttons should use a solid background of #ffffff with #000000 text, pill-shaped radius (3.35544e+07px), and 8px 24px padding.
- Incorporate subtle, multi-layer shadows (e.g., rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0) for depth on cards and elements.
- Utilize linear gradients (e.g., linear-gradient(to right bottom in oklab, rgb(255, 222, 200) 0%, rgb(255, 184, 1)) for background accents or visual interest.
- Maintain a consistent base unit of 2px for all spacing and measurements.
- Use a primary brand color of #f26b3a as an accent for key elements and calls to action, contrasting with the dark accent #1a1a2e and white background #ffffff.

### Don't

- Do not use emoji in any marketing or product copy.
- Avoid exclamations; maintain a matter-of-fact and confident tone.
- Do not use serif fonts; the brand is exclusively sans-serif with Outfit.
- Do not use title case or all caps for headings; stick to sentence-case.
- Avoid overly complex or flowery language; keep vocabulary simple and direct.
- Do not use sharp corners; all buttons and interactive elements should have a pill-shaped or medium 8px border-radius.
- Avoid single-layer, harsh shadows; prefer the subtle, multi-layer shadow style found in the data.
- Do not use a monochrome color palette; leverage the vibrant primary #f26b3a against the dark #1a1a2e and neutral #ffffff.

*Source — inferred*

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 7/10 | casual |
| Playful ↔ Serious | 8/10 | serious |
| Enthusiastic ↔ Matter-of-fact | 9/10 | matter-of-fact |
| Respectful ↔ Irreverent | 7/10 | irreverent |
| Technical ↔ Accessible | 6/10 | balanced |

### Copywriting style

- Avg. sentence length — 8 words
- Vocabulary — simple
- Jargon — some
- CTA style — direct, action-oriented, and benefit-driven
- Rhetorical devices — repetition

### Sample copy

> Resolves, not deflects

> Your AI agent that actually resolves tickets.

> Refunds, orders, bug reports. Roger handles them from first message to closed ticket.

> Unlimited seats, always

> Pay for resolutions, not seats

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| logomark | — | svg | [link](https://extractvibe.com/api/assets/brands/rogeriq.com/logo-1.svg) | 96% |

## Sources

- Live brand page — https://extractvibe.com/brand/rogeriq.com
- Raw JSON — https://extractvibe.com/api/brand/rogeriq.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/rogeriq.com/design.md
- Extracted — 2026-05-02T00:04:44.017Z
- Generator — ExtractVibe vv1
- Quality score — 90/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md