Academy Brand Guidelines

A guide to keep Academy look and voice consistent across every touchpoint.

Academy Brand Guidelines

A guide to keep Academy look and voice consistent across every touchpoint.
The Academy Brand

This guide captures the essentials of the Academy brand—how we look, how we speak, and how we show up. Use it to keep our work consistent across web, product, and marketing, so the experience feels unmistakably RoleModel no matter where someone meets us.

02.

Color

Color sets the tone before a single word is read. Our palette is built to feel confident, modern, and clear—supporting strong hierarchy and accessible contrast. Use core colors for structure and recognition, and apply accent colors intentionally to guide attention.

:root[data-theme="academy-ocean"] {
  --font-family-primary: "Space Grotesk", sans-serif;
  --font-family-alt: "Geist Mono", sans-serif;

  --color-primary: #04B870;
  --color-secondary: #3161B5;
  --color-accent: #3EA9B5;
  --color-dark: #293747;
  --color-light: #F2F2F2;

  --color-background: var(--color-light);
  --color-surface: #FFFFFF;
  --color-text: var(--color-dark);
  --color-text-inverse: var(--color-light);
  --color-accent: var(--color-secondary);
  --color-border: color-mix(in srgb, var(--color-dark) 18%, transparent);
}
:root[data-theme="academy-ocean"] {
  --font-family-primary: "Space Grotesk", sans-serif;
  --font-family-alt: "Geist Mono", sans-serif;

  --color-primary: #04B870;
  --color-secondary: #3161B5;
  --color-accent: #3EA9B5;
  --color-dark: #293747;
  --color-light: #F2F2F2;

  --color-background: var(--color-light);
  --color-surface: #FFFFFF;
  --color-text: var(--color-dark);
  --color-text-inverse: var(--color-light);
  --color-accent: var(--color-secondary);
  --color-border: color-mix(in srgb, var(--color-dark) 18%, transparent);
}

03.

Typography

Typography is where clarity becomes craft. Our type system is designed for calm readability, strong hierarchy, and a direct voice. Keep layouts simple, use consistent scales, and let spacing do the heavy lifting.

Primary Font Family

Space Grotesk

Space Grotesk

Alt Font Family

Geist Mono

Geist Mono

Hero

Use for the single, biggest statement on a page—the boldest headline or primary message.

Size

10rem

Line-Height

1em

Letter-Spacing

-0.05em

Develop your career

Display

Use for section-leading headlines that set the theme and pull attention without taking over the page.

Size

4.5rem

Line-Height

1.1em

Letter-Spacing

-0.04em

Your full-service software development partner

H1

Use for major sections to establish top-level hierarchy.

Size

3.7rem

Line-Height

1.1em

Letter-Spacing

-0.04em

Ready for Software that fits your business?

h2

Use for secondary section titles that live under an H1 and break content into clear, scannable chunks.

Size

2.7rem

Line-Height

1.1em

Letter-Spacing

-0.05em

Our Core Values

Subheading

Use directly under a headline to add context, detail, or a short supporting message.

Size

2.875rem

Line-Height

1.3em

Letter-Spacing

-0.03em

Let’s get the conversation started.

Body

Use for the main readable text—paragraphs, descriptions, and anything meant to be scanned and understood quickly

Size

2rem

Line-Height

1.5em

Letter-Spacing

-0.02em

Whether you work in construction, manufacturing, healthcare, or finance, investing in

custom software can streamline your workflow, eliminate errors, and increase team productivity.

Mono Caps

Use for section headings and call-outs in asides and secondary content.

Size

1.05rem

Line-Height

1.2em

Letter-Spacing

0

Develop your Career

Aa

04.

Voice

Our tone of voice embodies our brand’s personality, built on trust, collaboration, and expertise. We aim to be approachably professional—conversational and friendly.

Intentional

Every line has a job. We don’t fill space — we move things forward.

Purpose

Say the point early

Structure

One idea at a time

Next step

Make the ask clear

Your business is our focus through every phase of your project.

Professional

Concise when it helps. Clear in any context.

Clarity

Plain language first

Confidence

Certain, not arrogant

Precision

Fewer words, better words

We share our experience with you in a partnership to guide you through the custom software development process.

Approachable

We sound human. We don’t posture.

Pace

Short, clear sentences

Word choice

Familiar over fancy

Warmth

Helpful, not salesy

Let’s talk about your project!

Instructive

We teach by showing. We help people make decisions.

Explain

Define terms as needed

Guide

Offer a path, not a lecture

Options

Give tradeoffs + recommendation

Let us guide you through your options.

Engaging

Curious and present. We listen, then respond.

Questions

Ask before assuming

Listening

Reflect understanding

Momentum

Keep it moving

The best software projects don’t start with code—they start with understanding your business, your goals, and how software can help you reach them.

04.

Imagery

The Clay Icon style captures how we see learning: a student is clay in the hands of a potter—shaped patiently, with skill, into something useful and lasting. Use soft, hand-formed shapes with rounded edges, warm earthen tones, and gentle highlights that suggest material being molded. Each icon should feel tactile and in-progress, never rigid or mechanical—evidence of a craftsman’s hand guiding raw potential into form.

Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image
Grid image