Resume Place

Brand book →Read the engagement →Figma →

Tangelo Orange leads. Midnight Blue carries institutional weight. Three cuts of Messina hold the editorial range.

Live system2024Tokens on disk, rendered live

00 · Overview

Resume Place

Tangelo Orange leads. Midnight Blue carries institutional weight. Three cuts of Messina hold the editorial range.

The design system behind Resume Place, the first-ever federal resume writing service. Brand Book v1.1 (September 2024) codified the Tangelo / Midnight palette, the Messina type family across Sans / Serif / Mono, the wordmark and circle-checkmark logomark, and the Ten Steps and CCAR Accomplishment Builder sub-brand systems.

Brand buckets

Type sizes

Space steps

Radius tokens

01 · Foundations / Color

Color

Named brand buckets layered over a semantic system. Product UI leans on the semantic layer. Marketing leans on the buckets directly.

Brand buckets

2 buckets

orange

3 stops

tangelo

#F94D00

mahoganyWood

#C04000

spicedTea

#B35C44

blue

3 stops

deep

#1C3664

evening

#0F264C

midnight

#223240

Neutral

3 stops

richGray

#010203

darkGray

#5B5E60

lightGray

#D2D9DB

Semantic roles

13 roles

default

#F94D00

focus

#C04000

content

#FFFFFF

default

#1C3664

focus

#0F264C

content

#FFFFFF

default

#B35C44

focus

#C04000

content

#FFFFFF

default

#5B5E60

focus

#010203

content

#FFFFFF

default

#FFFFFF

focus

—

content

—

default

#010203

focus

—

content

—

default

#F4F4F0

focus

—

content

—

default

#5B5E60

focus

—

content

—

default

#D2D9DB

focus

—

content

—

default

#D2D9DB

focus

—

content

—

default

#F94D00

focus

—

content

—

default

#C04000

focus

—

content

—

default

#FFFFFF

focus

—

content

—

02 · Foundations / Typography

Typography

The type families this brand uses, the scale it ships with, and the weights it relies on.

primary

Messina Sans

'Messina Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

The quick brown fox jumps over the lazy dog. 0123456789

editorial

Messina Serif

'Messina Serif', 'Newsreader', Georgia, 'Times New Roman', serif

The quick brown fox jumps over the lazy dog. 0123456789

mono

Messina Sans Mono

'Messina Sans Mono', 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace

The quick brown fox jumps over the lazy dog. 0123456789

condensed

Messina Sans Condensed

'Messina Sans Condensed', 'Manrope', 'Messina Sans', 'Inter', ui-sans-serif, sans-serif

The quick brown fox jumps over the lazy dog. 0123456789

Scale

1 sizes

11px

Designing the system, not the skin.

Weights

5 weights

light · 300

book · 400

semibold · 600

bold · 700

black · 900

03 · Foundations / Spacing

Spacing

The brand's spacing scale and container widths. Mono-keyed for scan, not for memorization.

Scale

13 steps

4px

4px. Micro

8px

8px. Tight

12px

16px

16px. Base

20px

24px

24px. Comfortable

32px

32px. Spacious

40px

48px

48px. Section gap

64px

64px. Large section

80px

96px

128px

128px. Hero breathing room

Containers

3 widths

narrow

720px

Reading / form / long-form article width

max

1140px

Standard content width

wide

1440px

Marketing hero / dashboard width

04 · Foundations / Radius

Radius

Corner-radius tokens. Small UI sharp. Large surfaces soft. Pills and avatars full.

none

4px

6px

12px

full

9999px

05 · Foundations / Motion

Motion

Durations and easings. Conservative product-UI motion. Quick hovers, gentle transitions, no theatrics.

Duration

4 durations

instant

0ms

No animation (reduced-motion fallback)

fast

150ms

Hover, focus, micro-interactions

normal

300ms

Standard transitions

slow

500ms

Reveals, page transitions

Easing

4 curves

default

500ms

Standard ease. Most transitions

500ms

Ease-in. Exits

out

500ms

Ease-out. Entrances

linear

500ms

Linear. Progress and continuous motion only

03 · Components

Component library

A token-driven component set. Every component reads from the brand scope above. Swap the brand and the same components reskin without code changes.

Button

Six variants (primary, secondary, accent, neutral, ghost, outline), three sizes, default and pill shapes.

Tokens

--primary--secondary--accent--radius-md--radius-full--font-primary

Variants

Sizes

Shape

State

Input

Text input, textarea, and label. Standard size scale with hover and focus states tied to the primary token.

Tokens

--primary--base-300--background--foreground--radius-md

Sizes

State

With label

Email address

Note

Card

Default, soft, and outlined surfaces. Composable header, body, and footer regions.

Tokens

--background--base-100--base-200--base-300--radius-lg

Default

Standard surface for product UI. Sits on the base background with a subtle border.

Soft

A muted variant for secondary content. Reads as supporting, not primary.

Outlined

Transparent background with a defined edge. Good for placement over decorated surfaces.

Badge

Status indicators and chips. Pulls from brand and status tokens for semantic meaning.

Tokens

--primary--accent--success--warning--danger--radius-full

Brand

PrimarySecondaryAccentNeutralSoft

Status

InfoSuccessWarningDanger

Size

SmallMedium

Avatar

Image or initials, four sizes, optional brand tone for placeholder fills.

Tokens

--primary--secondary--accent--neutral--radius-full

Sizes

Tones

Tabs

Underline and pill variants. Active tab uses the primary token; inactive tabs sit at 60 percent foreground.

Tokens

--primary--foreground--base-100--base-300

Underline

Active lesson workspace.

Pill

Home view content.

07 · Patterns

Composed patterns

Pattern assemblies for Resume Place land in the next phase. The Foundations and Components above are the ingredients. Patterns combine them into navigation, account, and dashboard surfaces specific to this brand. Today this view shows the engagement fixtures only.

In progress

08 · Screens

Real screens

Production-shaped screens for Resume Place land in the next phase. The brand book at /brand/resume-place already carries the editorial side: heritage, voice, applied work, page archetypes. Screens here will be the rendered counterparts.

In progress