Brand

Brand resources

Logos, colors, typography, and copy for press, partners, and anyone representing Breakaway accurately.

Recommended lockup

BREAKAWAYAI
BREAKAWAYAI

Use the mark with the word BREAKAWAY and the AI accent in purple. Do not split the mark from the name in official materials unless space is very tight.

Palette

Tokens stay in sync with the product source of truth (src/config/colors.ts). Primary purple is the brand accent; body text uses ink.

  • #6D28D9

    primary

    Primary accent, CTAs, and links

  • #7C3AED

    primary-bright

    Headline emphasis and hover

  • #8B5CF6

    primary-vivid

    Primary CTA gradient and active focus

  • #151122

    ink

    Primary text and dark contrast surfaces

  • #514A63

    ink-soft

    Secondary body text

  • #FFFFFF

    surface

    Light backgrounds and surfaces

  • #F5F3FF

    surface-muted

    Soft violet-tinted neutral backgrounds

  • #F1ECFE

    primary-wash

    Soft fills and highlighted cards

  • #1B1424

    night

    Dark blocks and light wordmark

  • #22D3EE

    accent

    Secondary accent (illustrations and data)

  • #059669

    success

    Completed states and confirmations

Typography

Families, scale, weights, and tracking sync from src/config/typography.ts. Do not substitute Arial or system UI in official materials.

Type families

  • Headings

    Space Grotesk

    --font-space-grotesk · AI agents for professional firms

  • Body

    Inter

    --font-inter · AI agents for professional firms

  • Labels and data

    JetBrains Mono

    --font-jetbrains-mono · AI agents for professional firms

Type scale

Each token sets family, size, line height, weight, and tracking. In the app use .type-* and .label from src/index.css (see typeUtilityClass in typography.ts).

Production classes

  • .type-display-hero
  • .type-display-section
  • .type-display-section-md
  • .type-display-feature
  • .type-heading-card
  • .type-step-index
  • .type-step-index-sm
  • .type-step-title
  • .type-body-lg
  • .label

  • display-hero

    lh 0.95

    AI for professional firms

    Landing hero and highest-impact headlines

  • display-section

    lh 1.1

    Automation that scales with you

    Section H2s on product and marketing pages

  • heading-page

    lh 1.15

    Brand resources

    Interior page titles (e.g. this guide)

  • heading-card

    lh 1.25

    Logo downloads

    Card titles and compact blocks

  • body-lg

    lh 1.625

    AI agents for professional firms

    Lead paragraphs and intros

  • body

    lh 1.625

    AI agents for professional firms

    Primary body copy

  • body-sm

    lh 1.625

    Same type stack as the site.

    Secondary text and UI metadata

  • label

    lh 1.4

    Brand

    Eyebrows and .label tags (mono, uppercase)

  • caption

    lh 1.625

    primary · #6D28D9

    Technical notes and mock legends

  • nav

    lh 1.25

    Product

    Navbar links and compact controls

Font weights

  • light · 300

    Breakaway

    Occasional editorial; not the default for headings

  • regular · 400

    Breakaway

    Body and paragraphs

  • medium · 500

    Breakaway

    Nav, links, and light emphasis

  • semibold · 600

    Breakaway

    Buttons and emphasis in dense UI

  • bold · 700

    Breakaway

    Display headings and wordmark

Letter-spacing

  • label · 0.18em

    .label class and section eyebrows

    EJEMPLO

  • eyebrow · 0.14em

    Mono subheads in product heroes

    Breakaway

  • wordmark-sm · 0.08em

    Wordmark in tight spaces

    Breakaway

  • wordmark · 0.14em

    Standard wordmark

    Breakaway

  • tight · -0.02em

    Medium display headings

    Breakaway

  • display · -0.04em

    Hero display and extra-large headlines

    Breakaway

Spacing and layout

Margins and containers shared with the site (layout.ts and Tailwind utilities).

  • 1152px

    layout-max

    Main content max width (max-w-layout)

  • 1400px

    layout-wide

    Footer and full-bleed bands with centered content

  • 16px → 24px → 40px

    page-gutter

    Page horizontal padding: px-5 → sm:px-6 → md:px-10

  • 64px → 80px

    section-y

    Vertical section rhythm: py-16 → md:py-20

  • 24px → 32px

    card-padding

    .card inner padding: p-6 → sm:p-8

  • 8px

    stack-sm

    Gap between label and title (gap-2, mt-2)

  • 16px

    stack-md

    Related blocks in forms and lists

  • 32px

    stack-lg

    Between section grids and card groups

Correct usage

Keep clear space around the logo and maintain minimum contrast between text and background.

Do

  • Leave at least the mark height as clear space around the logo.
  • Use purple #6D28D9 or ink on light backgrounds; use the light wordmark on night.
  • Write the name as Breakaway or BREAKAWAY AI depending on context (prose vs. lockup).
  • In press, link to https://breakaway.work the first time you mention the company.

Don't

  • Do not stretch, rotate, or change the mark proportions.
  • Do not recolor the logo outside the palette or add heavy shadows.
  • Do not use the mark as a background pattern or on photos without contrast.
  • Do not imply sponsorship or endorsement by Breakaway without written approval.

Press copy

Copy and paste. You may shorten the long paragraph if the outlet has a character limit.

One line

Breakaway builds AI agents, automations, and integrations for professional services firms in Mexico.

Paragraph

Breakaway is an engineering company in Querétaro, Mexico. It designs and deploys production AI agents, process automation, and integrations across CRM, ERP, and WhatsApp for professional services firms. The founders are directly involved in every project. Learn more at https://breakaway.work.

Press and brand permissions: [email protected]

Let's chat!