Oboe Brand Guidelines

Section 01

Brand Overview

Identity, personality, and brand elements at a glance

Oboe is an AI-powered personalized learning platform with the tagline "Learn anything." The brand positions itself as a warm, intellectual companion for curiosity-driven learners.

The primary logo is the "Oboe" wordmark set in Souvenir Std, a warm serif with a 1970s editorial feel. It appears in italic style at large sizes. A secondary mark is a simple rabbit icon (SVG illustration) used as a favicon and decorative element. The rabbit mascot also appears playfully on the 404 error page as bunnies poking out of holes.

The voice is intelligent but approachable. Copy uses light, inviting language ("I want to learn about...", "Get started for free"). The animated tagline rotates through topics like "the etymology of the word etymology" and "financial modeling to impress your boss" — showing breadth with a whimsical, curious tone.

Warm — cream and butter tones instead of cold whites
Intellectual — serif typography evokes books and libraries
Approachable — light font weights, friendly rabbit mascot
Whimsical — animated taglines, playful 404 page
Minimal — generous whitespace, few elements
Premium — restrained palette, elegant type choices

Section 02

Color Palette

A warm-neutral system with cream and butter accents — no loud colors

The warmth comes from hues in the 20–43° range (amber/brown). The palette is sophisticated, bookish, and deliberately muted.

Core Colors

Background

Page background, warm off-white

Foreground

Body text, near-black with cool tone

Primary Surface

Sidebar, secondary backgrounds

Primary Foreground

Headings, dark warm brown-black

Secondary / Black

CTA buttons, strong actions

Secondary Foreground

Text on black buttons

Accent & UI Colors

Card

Warm cream for card surfaces

CTA Gold

Sign-up button, soft butter yellow

Muted

Warm beige, inputs, subtle fills

Muted Foreground

Secondary text, captions

Border

Borders, dividers, focus rings

Link / Teal

Links on auth pages, muted teal

Popover

Dropdown/popover backgrounds

Destructive

Errors, destructive actions

CSS Custom Properties

:root {
  --background:           30 33% 98%;    /* #FCFAF8 */
  --foreground:           180 6% 15%;    /* #242929 */
  --primary:              30 17% 95%;    /* #F3F0ED */
  --primary-foreground:   20 10% 15%;    /* #2A2522 */
  --secondary:            0 0% 0%;       /* #000000 */
  --secondary-foreground: 0 0% 98%;      /* #FAFAFA */
  --card:                 43 55% 96%;    /* #F9F4E8 */
  --card-foreground:      20 10% 15%;    /* #2A2522 */
  --accent:               220 14% 96%;   /* #F2F4F6 */
  --accent-foreground:    20 10% 15%;    /* #2A2522 */
  --muted:                43 30% 90%;    /* #EBE5D8 */
  --muted-foreground:     20 10% 40%;    /* #706158 */
  --border:               20 10% 85%;    /* #DDD7D5 */
  --input:                43 30% 90%;    /* #EBE5D8 */
  --ring:                 20 10% 85%;    /* #DDD7D5 */
  --popover:              30 33% 95%;    /* #F5F0EB */
  --destructive:          0 84.2% 60.2%; /* #EC4444 */
}

Section 03

Typography

Two fonts create a bookish-meets-modern duality

Primary — Display & Body Serif

Souvenir Std

Learn the etymology of the word etymology. Enriched, personalized, and interactive courses.

"Souvenir Std", Georgia, serif · Weight 300 (light) · Warm, bookish, 1970s editorial

Secondary — UI Sans-Serif

Public Sans

Sign up for free · Log in · Configure · History of the Vikings · New Course · Daily Puzzle

"Public Sans", Helvetica, Arial, sans-serif · Weight 300–400 · Clean, modern, open-source

Type Scale

22px 300 Animated tagline emphasis

16px 300 Body text — Souvenir Std serif

16px 400 Suggestion chips — Public Sans

14px 300 Navigation buttons

12px 300 Auth buttons, small UI text

Key insight: Oboe uses font-weight 300 (light) almost everywhere, creating an airy, delicate, premium feel. Bold (700) is reserved only for auth page links.

/* Font stacks */
--font-serif: "Souvenir Std", Georgia, serif;
--font-sans:  "Public Sans", Helvetica, Arial, sans-serif;

/* Typical body */
body {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.3;
}

/* UI elements */
button, nav, .chip {
  font-family: var(--font-sans);
  font-weight: 300;
}

Section 04

Button Styles

Five distinct button types — from soft gold CTAs to minimal chips

Sign up for free

Primary CTA

Log in

Secondary

Continue

Black CTA

↑

Generate

← History of the Vikings

Suggestion Chip

Background: #FAEECC (soft golden butter)
Text: #2A2522 (dark brown)
Border: 1px solid #DDD7D5
Border-radius: 10px
Padding: 8px 16px
Font: Public Sans, 12px, weight 300

Background: transparent
Text: #242929
Border: 1px solid rgba(0,0,0,0.2)
Border-radius: 10px
Padding: 8px 16px

Background: #000000 (pure black)
Text: #FFFFFF
Border-radius: 10px
Font-size: 16px, weight 400
Used on authentication pages for the primary action.

Background: #000000
Text/Icon: #FAFAFA
Shape: Perfect circle (border-radius: 50%)
Size: ~36px diameter
Contains an upward arrow icon.

Background: transparent
Text: #242929
Border-radius: 16px
Font: Public Sans, 16px, weight 400
Prefixed with a left-arrow icon. Stacked vertically with subtle bottom borders.

.btn-primary {
  background: #FAEECC;
  color: #2A2522;
  border: 1px solid #DDD7D5;
  border-radius: 10px;
  padding: 8px 16px;
  font-family: "Public Sans", sans-serif;
  font-size: 12px;
  font-weight: 300;
}

.btn-secondary {
  background: transparent;
  color: #242929;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 10px;
  padding: 8px 16px;
}

.btn-cta-black {
  background: #000000;
  color: #FFFFFF;
  border: none;
  border-radius: 10px;
  padding: 10px 24px;
  font-size: 16px;
}

Section 05

UI Components

Key interface patterns and their construction

Navigation Bar

Serif wordmark left, auth buttons right. Clean, minimal top bar.

Search Bar (Hero Element)

The search bar is the central hero element. Features a file upload (+) button, Configure settings, and a circular black submit button. Rounded 16px corners with subtle shadow.

Suggestion Chips

← History of the Vikings

← The Age of Enlightenment

← What is Dark Matter?

← What is the Turing Test?

← The history of the steam engine

Card Surfaces

Card formula: Warm cream background (#F9F4E8) + subtle border (#DDD7D5) + 10px border-radius. Always use warm tones for surfaces — never pure white or cool grays.

404 Error Page

The 404 page features playful rabbit illustrations popping out of holes — maintaining the whimsical brand personality even in error states. Uses serif text ("Sorry, we couldn't find that page") and a bordered "Go Back Home" button.

Section 06

Layout & Spacing

Generous whitespace, centered hero, and consistent radii

Border Radius Scale

0px
None

8px
Sidebar nav

10px
Buttons, cards

16px
Chips, search

50%
Icon buttons

Layout Structure

Centered single-column layout. The search bar is the hero element, positioned centrally. Suggestion chips stack vertically below. The Oboe mascot and animated tagline sit above the search bar. Extremely generous whitespace throughout — nothing feels crowded.

Top bar: "Oboe" wordmark (serif, italic) on the left, auth buttons on the right.
Left sidebar (collapsible): "New Course" and "Daily Puzzle" buttons with icons. History list below.
The sidebar collapses on the homepage to keep focus on the search bar.

Oboe uses extremely generous whitespace. The homepage has perhaps 5-6 elements total — wordmark, mascot, tagline, search bar, and suggestion chips. Padding is large (32px+), margins between sections are spacious. The design breathes. This restraint is core to the brand.

Spacing rule: When in doubt, add more whitespace. Oboe's design is defined by what it leaves out, not what it includes. Every pixel of padding reinforces the premium, unhurried feel.

Section 07

Design Principles

Seven guiding rules that define the Oboe visual identity

01

Warmth Over Coldness

Cream and butter tones replace pure white and gray. Every surface has warmth — backgrounds skew amber, not blue.

02

Bookish Elegance

Souvenir Std serif font evokes libraries, editorial spreads, and intellectual curiosity. The brand feels like opening a well-loved book.

03

Minimal & Spacious

Generous whitespace, few elements per screen. The design is defined by restraint — what's left out matters as much as what's included.

04

Whimsical Touches

The rabbit mascot, animated rotating taglines, and playful 404 page add personality without undermining the intellectual tone.

05

Light Weight

Font-weight 300 throughout gives an airy, delicate, premium feel. Nothing heavy or bold unless it's a primary call-to-action.

06

Black for Action

Pure black is reserved exclusively for primary CTAs (Continue, Generate). Everything else lives in the muted warm spectrum.

07

No Loud Colors

The "brightest" color in the entire palette is a soft butter yellow (#FAEECC) for the sign-up button. There are no blues, greens, or purples. The brand communicates through warmth and subtlety, not visual loudness.

Do's and Don'ts

✓ Do

Use warm off-white (#FCFAF8) for backgrounds
Default to font-weight 300
Use Souvenir Std for display text
Keep interfaces minimal and spacious
Use black only for primary actions
Add personality through the rabbit mascot
Use the butter-gold (#FAEECC) for key CTAs

✗ Don't

Use pure white (#FFFFFF) for page backgrounds
Use bold (700) weight for body text
Add bright or saturated accent colors
Crowd the interface with many elements
Use cool gray or blue-tinted surfaces
Use generic sans-serif for headings
Add gradients, shadows, or visual noise

Section 08

Implementation Checklist

Quick reference for applying the Oboe brand to new surfaces