Design-Chaos
Brand Board · v1.2
2026 · Tyler, TX · East Texas Designing since 2003
The Design-Chaos brand, on one page

A little design,
a dash of chaos.

A spectrum-bright identity for an independent studio doing brand, web, print, social & SEO for small businesses across East Texas — opinionated, warm, and wired for motion. Synced to the live site at design-chaos.com.

6 colors · 1 gradient · 1 voice
§ 01 — Brand Standards
Design-Chaos · 01/06
§ 02Identity

One wordmark, five cuts.

Hand-lettered script with a spectrum swash underneath. White letters live on the ink canvas, black letters go on paper and imagery. The stacked cut is for square spaces, the circle badge for stickers and stamps, and the D-C monogram for anything smaller than a business card.

Primary lockup

White on ink, stacked.

The hero version. On the homepage it sits at the centre of the orbiting constellation nav; everywhere else the horizontal cut takes over. Leave it room to breathe.

USE FOR · Web hero · Cover slides · Studio comms
Design-Chaos, black on paper
Design-Chaos, white on ink
Design-Chaos circle badge
D-C monogram
Clear space x = the script's x-height
Minimum sizes
Digital
160 px wide
Print
1.25 in wide

Below these sizes the script loses its character. Drop the tagline first (the notag cut), then switch to the D-C monogram. The site serves the monogram on ink as its favicon and app icon (icon-512.png).

§ 03Color

A spectrum, sampled from the mark.

Six colors pulled directly from the logo gradient — the exact values the live theme ships (theme.json). Ink black is the canvas; paper is the secondary surface. Use one accent at a time per layout — the spectrum is for the gradient.

01 / Sky
Cyan
HEX · 3FC9E8RGB · 63 201 232USE · Calm accents, links
02 / Twilight
Indigo
HEX · 6A4FE0RGB · 106 79 224USE · Depth, secondary CTAs
03 / Signal
Magenta
HEX · D440B5RGB · 212 64 181USE · Primary accent, italics
04 / Flare
Red
HEX · E83E5CRGB · 232 62 92USE · Alerts, gradient mid
05 / Ember
Orange
HEX · F58A3DRGB · 245 138 61USE · Warm accents, badges
06 / Honey
Gold
HEX · F2C24ARGB · 242 194 74USE · Affirmations, "yes"
INK · 0E0B16Primary canvas
SURFACE 2 · 16101FElevated
SURFACE 3 · 1F1730Cards / raised
INK SOFT · B8B0A6Muted text
PAPER · F4EFE6Light surface
The Spectrum gradient

One gradient. Use it sparingly.

Reserved for the moments that matter — italic words, the wordmark itself, primary CTAs, and accent stripes. Never as a full background; the spectrum is louder than it looks.

linear-gradient(135°, …)
Links · 6FD6EE  ·  Ink dim · 6F6A7A
0% · Cyan22% · Indigo48% · Magenta68% · Red84% · Orange100% · Gold
§ 04Typography

Editorial bones, conversational warmth.

A serif with an italic that earns its keep, a clean humanist sans for everything you read, a handwritten face for the human aside, and a mono for the labels that organize the page. All four are self-hosted variable fonts on the live site — no Google Fonts CDN. Italics are a feature; set them in the gradient when you mean it.

Display · Fraunces
Display · Fraunces — H1 / H2 / italic accents
Body · Inter — everything you read
Hand · Caveat — the human aside
Mono · JetBrains Mono — labels, eyebrows
Weight · Fraunces 300 (light) + italic
Tracking · -0.025em to -0.04em on display
Hosting · self-hosted variable woff2
Fallbacks · Georgia serif · system-ui sans

Aa Bb

A
a
B
b
G
g
&
chaos
IN 01
IN 02
IN 03
IN 04
JM 01
JM 02
JM 03
JM 04
H1 · Fraunces · 64 / -0.025em

Built for small business owners who refuse to be invisible.

H2 · Fraunces · 44 / -0.02em

Four crafts. One studio.

H3 · Fraunces · 28 / -0.005em

Designing since 2003

Body · Inter · 18 / 1.55

A homepage shouldn't feel like a brochure. It should feel like the moment a customer walks in and immediately knows they're in the right place — confident, well-lit, and clearly run by someone who gives a damn.

Hand · Caveat · accent

a little design, and a dash of chaos

Eyebrow · Mono · 11 / 0.2em

§ Designed in Tyler, TX — built for East Texas

§ 05Motion

A studio that breathes.

Three signatures carry the brand on the live site — an orbiting constellation nav, a pointer-reactive smoke canvas, and a rotating headline word — over a base layer of the hue-cycling gradient and gentle scroll-reveals. All slow, all eased, all optional: motion decorates, never blocks reading, and respects reduced-motion and no-JS.

01 · Constellation

The nav orbits.

The homepage navigation is a constellation — labeled nodes orbiting the mark. Real <a> links underneath; the orbit is progressive enhancement.

14–22s orbitlinearreal links
02 · Smoke canvas

Chaos you can stir.

A pointer-reactive haze drifts behind the hero in brand colors, reacting to the cursor. Gated off on mobile for performance.

canvaspointermobile-gated
03 · Word-flip

One word, always changing.

A little Web design

The hero keeps one rotating word — Web / Print / Graphic / Social / Content / SEO — swapped on a timer, so the crawlable H1 stays a single clean sentence.

~2s intervalone DOM wordSEO-safe
§ 06Voice

Plain-spoken, opinionated, kind.

Write like you're sitting across from a small business owner with a coffee and ten minutes. Confident, never corporate. Specific, never vague. Funny when it's true, never when it's filler.

We say · We don't say

YES"A little design, a dash of chaos."
NO"Innovative digital solutions for the modern enterprise."
YES"A free 20-minute call, then a written quote — no surprise invoices."
NO"Affordable packages priced to move — contact us for a deal!"
YES"Tell me about your business."
NO"Please fill out the form below to begin your customer journey."

House style

CASESentence case for everything but ALL-CAPS micro labels (eyebrows, badges, monos).
DASHEm-dash with spaces — like this — for asides. No double-hyphens.
CTATwo words + one symbol. "Start a project →" / "See the work →"
NUMBERSReal numbers, never fake stats. Say "Designing since 2003," not "20+ years experience."
House phrases — straight off the live site
Custom design — no templates Hosting in your name Senior hands only No surprise invoices Reply within a day Twenty years in Mobile-first, always Tyler, Texas
PRINCIPLE 01

Show, then tell.

Lead with the work, not the pitch. The case study is the headline; the words are the caption.

PRINCIPLE 02

Specific over clever.

"Custom design — no templates" beats "we build beautiful websites." Names, numbers, places.

PRINCIPLE 03

One italic per thought.

The gradient italic is for the moment that matters in a sentence. Two italics fight each other.

PRINCIPLE 04

Warm, not cute.

Use contractions. Say "you" and mean it. Save jokes for when they're load-bearing — never as decoration.

Design-Chaos · Brand Board · v1.2 · synced to design-chaos.com
2026 · Tyler, TX