No Panic Design

The Brand
Style Guide

Your Brand Direction A strong brand isn't scattered; it's directional. It has a coherent voice, a visual logic, a personality that comes through whether someone's reading your site or an email. That consistency is what builds recognition and trust.

This is what we build - a brand direction so clear that every piece of your work, from website content to your marketing material, stays unmistakably yours.

What follows Our own brand direction in action - not just our colors and typefaces, but how we think, how we move through space, how we sound. It is the thinking behind every touchpoint. This is the kind of direction we create for your brand. Imagine your brand carrying this kind of clarity.

The Idea

Craft & Code, without the panic.

We make websites that work for your business. We work alongside you—learning what moves your business, thinking and creating with you. Our brand reflects how we operate: the confidence of a senior studio doing excellent work, and the attentiveness of a true collaborator.

Confident

Big, structural type. Generous black space. We let the work hold the room.

Clear

Plain English, strong hierarchy, nothing buried. Strategy over guesswork — in copy too.

A little playful

The Winky. Used once, on purpose. Personality you earn, not personality you spray.

At a glance — Color

Maroon Deep

#721010

Maroon

#902424

Ink

#111111

Winky Yellow

#FBB829

At a glance — Type

Oswald

Headlines, labels, navigation. Condensed, uppercase, structural.

Open Sans

Body copy, descriptions, fine print. Friendly, highly legible at every size.

How to use this guide

Start with Foundations. Logo, color, and type are non-negotiable — they make us recognizable. The System and Expression sections show how those foundations assemble into real layouts, components, and copy. When in doubt, the rule of thumb is everywhere: structure first, wink last.

01 — Logo →

Foundations

Logo

The wordmark is the signature. The Winky is the personality. Use them with confidence and a lot of room to breathe — the logo should never feel crowded or apologetic.

Primary — Wordmark

The one-line wordmark

Our default mark. Set in all caps, with the squared geometry that reads as engineered and deliberate. This is the version that leads almost everywhere — site header, proposals, email signatures, decks.

SECONDARY LOGO — THE LOCKUP

The full brand statement

This is the brand at full personality: structured and human, engineered and warm, all in one composition. Where the one-line wordmark leads with authority, the lockup leads with character.

We use it where the brand needs to make a full impression: social avatars, share images, presentation covers, and anywhere a single glance should communicate everything we are.

Brand mark — The Winky

Our standalone icon and avatar

The friendly counterweight to all that structural type. Use it as a favicon, social avatar, sticker, or a single accent moment in a layout.

It earns its keep by being rare. One Winky per page, per slide, per touchpoint. Never as repeating wallpaper, never crowding the wordmark.

Color treatments

Three approved backgrounds

The wordmark lives in ink on light, white on ink, and white on maroon. These are the only three combinations — don't invent a fourth.

Ink on light

Default. White, paper, and pale backgrounds.

White on ink

Dark hero blocks, footers, photography.

White on maroon

Brand bars, accent panels, covers.

Clear space & minimum size

Clear space

Keep clear space equal to the cap-height of the wordmark on every side. Nothing — type, image edges, or other logos — enters that zone.

Minimum size

Don't reproduce the wordmark below 120px. Below that, switch to the Winky mark.

Logo misuse

Don't do this

Use the approved color variants at full opacity, with clear space, on sufficient contrast.

Don't

Stretch, condense, rotate, or recolor the wordmark — including tinting it with the Winky yellow.

Don't

Add drop shadows, outlines, gradients, or place the wordmark over a busy area of a photo.

Don't

Reconstruct the wordmark in another typeface or letter-space it differently from the supplied artwork.

← Prev

00 — Overview

02 — Color →

Foundations

Color

A deliberately tight palette: a deep maroon that carries the brand, a near-black for structure, a working gray for the quiet details, and one yellow wink. Restraint is the point — the palette should feel inevitable, never decorated.

The Core Palette

Every color has a job

The palette is tight by design. Each value does specific work—across every surface, every touchpoint, every context. Nothing is decorative, nothing is accidental. If you find yourself reaching for something outside these, the design problem is worth reconsidering first.

Maroon Deep

#721010 · rgb(114, 16, 16)

The signature. Brand bars, primary buttons (hover/pressed), covers, emphasis.

Maroon

#902424 · rgb(144, 36, 36)

The action color. Default button fill, links, active states, small accents.

Ink

#111111 · rgb(17, 17, 17)

Body text on light, and full-bleed dark content blocks. Our true black.

Gray

#999999 · rgb(153, 153, 153)

Section labels, captions, metadata, muted UI. Never for long body copy.

White

#FFFFFF · rgb(255, 255, 255)

The dominant ground. Open, generous space is part of the brand.

Winky Yellow

#FBB829 · rgb(251, 184, 41)

The Winky's yellow. One small accent moment per surface — eyebrows, the mark, a single highlight.

Proportion

Weight, not equality

Think in proportions, not equal parts. White and ink provide the ground and structure. Maroon defines the brand. Yellow accents - a warmth that appears in small, intentional moments.

WHITE · 60%

INK · 25%

MAROON

Maroon Deep and Maroon are interchangeable by role — Deep for large fields and hover states, Maroon for default interactive fills. Treat them as one family, not two competing reds.

Approved pairings & contrast

What sits on what

Ink on White

19.0 : 1 — body text

White on Ink

19.0 : 1 — dark blocks

White on Maroon

10.1 : 1 — brand bars

Ink on Wink

11.6 : 1 — accent buttons

Watch the gray. Gray on white is roughly 2.8:1 — fine for uppercase labels and metadata, but it fails accessibility for paragraph text. Body copy is always ink.

Color rules

Let white and ink dominate. Use maroon to direct attention to actions and brand moments.

Don't

Fill large areas with the wink yellow or use it as a background for text blocks.

Keep maroon and ink as separate jobs — maroon for interaction, ink for structure and text.

Don't

Introduce new hues, gradients, or tints of the brand colors that aren't on this page.

← Prev

01 — Logo

03 — Typography →

Foundations

Typography

Two families do everything. Oswald — condensed, uppercase, structural — carries headlines and labels. Open Sans handles every word a reader actually has to absorb. The contrast between the two is the whole system.

The Typefaces

Oswald

Display · Headings · Labels

A reworked, condensed take on the classic gothic styles. Set in caps with tight leading it reads as engineered and confident. Weights 300–700; we mostly live at 500 and 600.

ABCDEFGHIJKLM
NOPQRSTUVWXYZ
1234567890

Open Sans

Body · UI · Fine print

A humanist sans optimized for legibility on screen and in print. It stays calm and readable from 13px captions up to 20px intros. Weights 400–700, plus italic.

ABCDEFGHIJKLM
nopqrstuvwxyz 1234567890

The Type Scale

From headline to fine print

Headings aren't just big text—their size signals role and hierarchy to the reader. Used consistently, the scale tells viewers where they are, what matters most, and how content relates.

Sizes are set in rem rather than px, so they respond to a user's browser font preferences. We build with accessibility in mind.

DisplayOswald 600
64–81px / 4–5.04rem
Line-height 0.95

Built on Strategy

Heading 1Oswald 600
40px / 2.52rem / Caps

Your Web Design Needs

Heading 2Oswald 500
32px / 2rem / Caps

Scope of Work

Label / EyebrowOswald 500
13px / 0.81rem / Caps
Tracking 0.26em · Gray

From the Desk Of

Intro / LeadOpen Sans 400
20px / 1.26rem
Line-height 1.65

A discovery-first process that ensures every decision is backed by strategy, not guesswork.

BodyOpen Sans 400
16px / 1rem
Line-height 1.6

We don't take on every project that comes our way. We choose to work with businesses we believe in — and we build websites that work as hard as their owners do.

Caption / Fine printOpen Sans 400
13px / 0.81rem
Gray

This proposal is valid for 30 days from the date above.

Signature detail

The section label

Our most recognizable typographic move: a gray, wide-tracked Oswald label above a heading, often paired with a thin rule. It sets rhythm across pages and slides — use it consistently.

About No Panic Design

A Different Kind of Agency Relationship

Typography rules

Set Oswald in uppercase for headings and labels. Keep body copy in Open Sans, sentence case.

Don't

Use Oswald for paragraphs or long copy — condensed caps are exhausting to read at length.

Hold body line-length to 60–75 characters and leading around 1.6 for comfortable reading.

Don't

Add a third typeface, or letter-space Open Sans. Tracking belongs to Oswald labels only.

← Prev

02 — Color

04 — Layout & Spacing →

System

Layout & Spacing

Space is a brand asset. Generous margins, full-height color blocks, and consistent rhythm serve a purpose: content that is easy to read, sections that are easy to navigate, and a layout where color does the wayfinding. The viewer always knows where they are without being told.

The Scale

A major-third scale

Most sizing decisions are visual guesses. Ours are tuned. Every step on the scale is the previous one multiplied by 1.26 - the ratio of a major third, the interval at the heart of musical harmony. Starting from a base of 1rem - the browser's default paragraph font size - that one ratio generates every type size and spacing increment in the system, so the whole layout stays in proportion the way a chord stays in tune.

Step	px	rem	Typical use
−2	10px	0.63rem	Micro labels, legal fine print
−1	13px	0.79rem	Captions, eyebrows, metadata
base	16px	1rem	Body copy, default spacing unit
+1	20px	1.26rem	Lead / intro paragraphs
+2	25px	1.59rem	Small headings, card titles
+3	32px	2rem	Heading 2, block padding
+4	40px	2.52rem	Heading 1, section gaps
+5	51px	3.18rem	Large headings
+6	64px	4rem	Display, hero margins
+7	81px	5.04rem	Oversized display, cover type

Proportion

The golden ratio for shapes

Where the major third governs sizes, the golden ratio (φ ≈ 1.618) governs shapes. We size image frames and divide image-plus-text rows using φ - the same proportion found throughout nature and classical composition. It reads as balanced without looking mechanically halved.

Golden image frame

image — 1.618 : 1

Default crop for hero and feature imagery:
width ÷ height = φ

Image + text row

image · 1.618

text · 1

Split a row so image-to-text widths sit at φ : 1 (roughly 62% / 38%).

The Grid

Fluid by design

We don't build on fixed containers. Layout is handled with CSS Grid and Flexbox - Grid for page-level structure, Flexbox for components and content flow. Together they create layouts that adapt fluidly across screen sizes rather than snapping between rigid breakpoints.

Whether a project starts mobile-first or desktop-first depends on where its audience lives. Either way, margins stay consistent page to page and the layout feels intentional at every screen size.

Desktop ≥ 1310

Hero

Image

Text

Full-width section

Grid sets the page; two columns run side by side.

Tablet 768–1310

Hero

Image

Text

Full-width section

An even 50/50 split hands the text column more width, so the copy has room to read comfortably.

Mobile ≤ 767

Hero

Image

Text

Full-width section

Flexbox stacks everything into one column.

Composition pattern

Alternating color blocks

Color does the sectioning. Each block tells the viewer where one idea ends and another begins - no dividers, no labels, no breadcrumbs needed. The rhythm is the navigation.

Maroon brand bar

White content section

Ink feature block

White content section

Edges & elevation

Crisp by default

The brand is rectilinear by nature—squared corners, 1px lines, no decorative shadow. Used deliberately, depth means something. It is reserved for moments that earn it: floating UI, overlays, and certain buttons where a soft lift communicates interactivity.

Default

Squared, no radius, no shadow

Rounded

Subtle radius for cards, inputs, buttons

Soft lift

Depth for floating UI and interactive moments

Layout rules

Use whitespace generously and let blocks breathe. Empty space reads as confidence, not waste.

Don't

Crowd elements or fill every corner. Density makes the brand feel cheap and anxious.

Snap spacing to the scale and align to the 12-column grid for predictable rhythm.

Don't

Stack heavy drop shadows or rounded "pill" cards — that's a different brand, not this one.

← Prev

03 — Typography

05 — Buttons & UI →

System

Buttons & UI

The small, repeatable parts. Buttons, labels, cards, and inputs - all built from the same type, color, and spacing foundations.

Buttons & Actions

Hierarchy you can see

Buttons are a limited set, used with purpose. Each style signals a level of priority so the viewer always knows what the primary action is, what's secondary, and what's tertiary. Consistent sizing and padding give every button the same visual weight, so they read as interactive elements rather than decorated text. Hover behavior confirms that; a color shift that tells the user something will happen before they commit to the click.

On light

On dark

Labels

Section label

Getting Started

A label that opens each section—subtle enough to stay out of the way, noticeable because of its uppercase setting and letter-spacing. It creates consistent rhythm across every page and surface.

Eyebrow & step number

01 Foundations

Large numerals mark sequence and hierarchy. The yellow eyebrow is the accent - a single color moment at the top of a section.

Numbered steps

A pattern for sequence and hierarchy

Any time content has an order - phases, principles, layers, priorities - this pattern gives it structure. A large numeral, a short heading, a line of explanation. Clean, consistent, and immediately readable.

Foundations

Color, type, spacing, and logo - the non-negotiable decisions every other choice is built from.

Components

Buttons, labels, cards, and inputs - reusable parts that draw directly from the foundations.

Patterns

Section labels, numbered steps, alternating blocks - compositions that repeat consistently across every page.

Form inputs

Obvious by design

Email Message

Field rules

Form fields follow the same principle as buttons—the user always knows what's fillable, what's active, and what's complete. Each interaction state is visually distinct, so there's no guesswork at any point in the process.

Component rules

Keep one primary (solid or wink) button per view. Everything else is outline or ghost.

Don't

Mix corner radii, button heights, or letter-spacing across a single screen.

Reuse the numbered-step and section-label patterns for instant brand recognition.

Don't

Use the wink button for low-value actions — it loses its punch when it's everywhere.

← Prev

04 — Layout & Spacing

06 — Voice & Tone →

Expression

Voice & Tone

Clear, direct, quietly confident, and human. That's not a tone we perform - it's how we actually operate. We've done the thinking first. The name is the promise: No Panic Design. Earned through experience, thoroughness, and attention to detail.

Voice Principles

How we sound

Clear before clever

Plain English, short sentences, no jargon for its own sake. If a client needs a glossary, we've failed. Strategy over guesswork - in the writing too.

Confident, not loud

We state what we do and why it works, then stop. No hype, no exclamation marks, no "world-class." Confidence doesn't need volume.

Reassuring

We name the thing clients worry about - cost, timelines, ownership - and answer it before they ask. No surprises, no buried clauses.

Warm, with a wink

Human and approachable, without losing professionalism. We're partners, not a portal - but we're still professionals.

Calibration

We are / we're not

We are	We're not
Direct & plain-spoken	Buzzwordy or salesy
Calm & reassuring	Urgent or pushy
Confident	Arrogant or boastful
Warm & human	Stiff & corporate
Lightly playful	Goofy or gimmicky
Specific & honest	Vague or over-promising

In practice

Before & after

Off-brand

"We leverage cutting-edge, best-in-class solutions to synergize your digital transformation journey!!!"

On-brand

"We learn your business first, then build a site around what actually moves it forward. No guesswork."

Off-brand

"Payment is due immediately. A non-negotiable deposit is required prior to any commencement of services."

On-brand

"Your deposit secures your spot in our queue. Pay online in minutes — and we'll confirm your start date at signing."

Our words

Phrases that are ours

A small kit of lines and ideas that recur across the brand. Use them; don't dilute them.

"Websites that work as hard as you do."

Built on strategy, not guesswork.

Craft + Code No surprises, no buried clauses No house style, no templates No Panic

House style

IN PRACTICE

Clear

Plain English, short sentences, active voice. If a client needs to reread a sentence, we've already lost them. Say the thing directly, then stop.

Calm

No exclamation marks, no urgency, no superlatives. The words carry the energy. Confidence doesn't need volume.

Personal

Us with you, always. We're talking with a client, not presenting to a committee. Every touchpoint should feel like a conversation, not a broadcast.

Voice rules

Answer the worry before it's asked. Name cost, timeline, and ownership plainly.

Don't

Reach for superlatives, buzzwords, or fake urgency. Calm confidence beats hype.

Let one line of dry warmth through per page — the wink, in words.

Don't

Pile on jokes or emoji. Personality you spray everywhere stops reading as personality.

The Promise

Without exception

Every project we take on carries this same direction - this same clarity, calm, and attention. That's the work. That's the promise.

Craft & Code, without the panic.

The one-line wordmark

The full brand statement

Our standalone icon and avatar

Three approved backgrounds

Don't do this

Every color has a job

Weight, not equality

What sits on what

From headline to fine print

The section label

A major-third scale

The golden ratio for shapes

Fluid by design

Alternating color blocks

Crisp by default

Hierarchy you can see

A pattern for sequence and hierarchy

Obvious by design

How we sound

We are / we're not

Before & after

Phrases that are ours

IN PRACTICE

Without exception

Visual Code

Design Tools

Cool Stuff

Visual Code

Design Tools

Visual Code

Design Tools