Houston Dragna · Identity System · 2026
01 The Mark
The HD monogram: an italic H whose right stem doubles as the spine of a D, with three trailing arcs off the bowl. The arcs are the idea · motion, echo, repeat. Everything else in the system supports that read.
The site runs one variant per theme, everywhere chrome appears: topbar, corner, and all footers. One mark per lockup, never both.
The primary mark. Lives on Ink Black and any dark ground. This is the default answer to "which logo".
The light-ground mark. The plate gives it an edge the bare mark loses on near-white. Never place it on a dark ground; it disappears.
Twelve files exist. Colorway variants are for special placements · merch, one-off art, colored grounds · and always sit on a ground that gives the mark at least 3:1 edge contrast.
Single-color on dark. For contexts where full color is too loud: watermarks, print over photography.
Brand blue single-color. Reads on dark and on snow.
Named "Green" in the files; the color is brand chartreuse. Dark grounds only.
The plated full-color lockup. Works on either ground; the site's original topbar mark before theme pairing.
Inverse of the light-theme mark. Dark or colored grounds.
Also in the set: Knockout Red, Knockout Chartreuse, Filled Red, Filled Off Black. Same ground rules apply.
No off-palette tints, ever. Use a supplied variant or nothing.
The ratio is fixed (roughly 4:3). Scale both axes together or not at all.
The italic lean IS the motion. Rotating it fights the drawing.
No glows, shadows, outlines, or gradients on the mark.
The off-black knockout on a dark ground vanishes. Match variant to ground, always.
One mark per lockup. Two variants side by side is a bug, not a system.
02 Palette
Five colors. No tints, no invented values, no gradients. Anything that is not one of these five, the dim grey, or an alpha of them, is off-brand. Click any swatch to copy its hex.
Blue
#0015FFThe workhorse fill: tags, chips, buttons, the hero name. Snow text on it.
Ink Black
#06070FFills and dark plates. The page ground is its 25% desaturated sibling, #06070D.
Neon Chartreuse
#E9F500The dark-theme accent. Menus, labels, crosses, primary buttons. Ink Black text on it.
Bright Snow
#F7F9FAText on dark, text on blue, text on fuchsia. Never pure white.
Hot Fuchsia
#FF1245The interruption color: hover states, warnings, one word in a headline. Small doses.
Dim
#8B8B92Secondary text on dark only. Too light to print on white; use #5A5A63 there.
Fills and text are different jobs. A color that works as a 48px button can fail as an 11px label, so every loud color has a text form per theme. These are the only sanctioned variants.
| Role | Dark theme | Light theme | Why |
|---|---|---|---|
| Blue as text | #1F42FF 3.1:1 | #0011CC 9.9:1 | Pure #0015FF is 2.4:1 on dark. Display sizes only in dark. |
| Blue link hover | #4E77FF 5.2:1 | #0015FF | Readable at any size. |
| Accent as text | #E9F500 16.8:1 | #0011CC 9.9:1 | Chartreuse has no legible form on light. Its darkened version reads olive and is banned; blue carries the accent instead. |
| Fuchsia as text | #FF1245 4.6:1 | #B3002A 6.5:1 | Darkened, not desaturated. |
| Body ink | #F7F9FA | #15161C | Light body ink is #15161C, not Ink Black; the fill and the text part ways here. |
| Dim ink | #8B8B92 | #5A5F66 | Meta rows, captions, coordinates. |
Click to copy.
03 Typefaces
Three faces, three jobs, no exceptions. Display shouts, mono organizes, body explains. No serifs anywhere in the system, and no outlined or decorated display faces, ever.
Display · Archivo Variablewght 900 · wdth 118% · tracking -0.02em · leading 0.86
Command every channel.
Control every stage.
Mono · Space Mono10 to 11px · tracking .08 to .16em · always uppercase
Error 404 · Page not found 30.4515° N / 91.1871° W Est. 2015 · 11 yrs
Body · Instrument Sans16 to 19px · weight 400 to 600 · leading 1.65 · sentence case
Body copy carries the argument, so it stays quiet: sentence case, generous leading, a measure under 70 characters. Emphasis comes from weight 600, never from italics and never from color.
| Slot | Face | Recipe |
|---|---|---|
| Hero & page titles | Archivo 900 | stretch 118% · ls -.02em · lh .86 · UPPERCASE |
| Section headings | Archivo 900 | stretch 110 to 118% · ls -.01em · lh .9 to 1.05 |
| Eyebrows, labels, meta | Space Mono 700 | 10 to 11px · ls .08 to .16em · UPPERCASE |
| Buttons & pills | Space Mono 700 | 11px · ls .08em · UPPERCASE · radius 44px |
| Body, captions, answers | Instrument Sans | 400/600 · sentence case · max 70ch |
| Print stand-ins | Archivo Black · Space Mono · Instrument Sans (resume system v5+) | |
Drag the axes · click the text to retype it
HOUSTON
04 Dual Ground
One system, two grounds. Dark is the default and the identity; light is a full first-class citizen, not an inversion filter. The accent changes hands between them: chartreuse carries dark, brand blue carries light.
Frequently asked.
The accent, the crosses, the logo, and the text derivatives all swap together. Nothing is recomputed by filter; every value is a deliberate token.
Accent chartreuse → blue · crosses chartreuse 21% → blue 50% · logo Filled Full Color → Box Knockout Off Black · every text derivative per the color table · scrollbar · preloader ink.
Blue fills stay blue · fuchsia stays the interruption · on-image text stays snow with a chartreuse kicker in both themes, because imagery is a dark ground regardless of theme · this document itself: personal tools ship dark only.
05 Movement
Everything arrives fast and settles slow. Three easings cover the whole site; if a curve is not one of these, it does not ship. Click a card to run it.
Buttons lift 2px and flip to another palette color. Display-type links cycle the palette per hover. The flip is instant-feeling: 200 to 250ms.
06 Grounds & Furniture
The recurring props that make a page read as this brand before a single word is set.
The cross field
26px hairline crosses on a 152px grid (128px on phones), every other row offset half a cell so it never reads as graph paper. Chartreuse at 21% on dark, blue at 50% on light. Within 300px of the cursor they push away, lean 6 degrees, and swell 10%. It is the background of this very page.
The coordinate rail
Vertical Space Mono marginalia on both page edges: name and year on the left, 30.4515° N / 91.1871° W on the right. Location is furniture, never a headline; the footer says Available worldwide.
One rhythm token
Every section's top and bottom padding is the same clamp(60px, 6.5vw, 92px) value, so two stacked sections always read as exactly twice it. Bespoke margins are how spacing drifts; there are none.
The chrome band
A fixed 48px lane, 12px from the top: the mark left, the pill right. Radius language everywhere else follows it · 60px nav pill, 44px buttons, 28px panels, 14px cards.
Numbered eyebrows
Sections announce themselves with a chartreuse index chip and a mono label: 06 · Questions. The number is set in the accent; the label stays dim.
Hero discipline
The hero name and morph fill exactly 60% of the viewport width at every size, leading 0.86, sitting over imagery with the meta row pinned beneath. On-image text is snow in both themes.
07 Words
The writing is part of the identity. Short declaratives, the joke on the second sentence, zero filler.
| Instead of | Write |
|---|---|
| I'm a passionate creative who loves... | Design, photo, and film for music brands. |
| Page not found — sorry! | Every road leads somewhere. This one leads nowhere. |
| Available for hire!!! | Available worldwide. |
| EST. 2015 — 11 YRS | Est. 2015 · 11 yrs |