Brand System · Command Center · v1 · 2026-05-20

Cool by
default.

The one system every Drey site inherits. Dark, technical, alive. Open this first — match its tokens and modules exactly, and anything you build is on-brand without thinking.

00 · North Star

What this brand
is for.

An ops-room run by a systems architect with taste. Builder + security + "aura" energy, made visual. It says: this person ships things that actually work — and operates at a level you don't usually see.

01 · Tokens

The values.

Color — chosen with intent

Color psychology drove this, not vibes. 60% near-black, ~30% amber (brand), ~10% cyan (data). Keep amber and cyan in their lanes — adjacent at high saturation they vibrate.

Type

Spacing & motion

02 · Signature Modules

The 8 parts.

Drop these on any page and it's instantly Drey. Each one says something — don't add a 9th, compose with these.

Drop-in foundation — paste into every site's CSS

/* Drey Brand System — Command Center. Paste in :root */
:root{
  --bg:#0A0905; --bg2:#13110A; --fg:#F0E9DA; --soft:#6E6450;
  --am:#E8A33D; --am-deep:#C9821F; --c:#2BD4FF; --rule:#221C12;
  --grot:"Archivo",sans-serif; --mono:"JetBrains Mono",monospace;
}
/* blueprint grid + scanlines — module 8, set on body */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.45;
  background-image:linear-gradient(#241d10 1px,transparent 1px),linear-gradient(90deg,#241d10 1px,transparent 1px);
  background-size:46px 46px;mask-image:radial-gradient(circle at 50% 0%,#000,transparent 80%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.26;
  background:repeating-linear-gradient(0deg,transparent 0 2px,rgba(0,0,0,.16) 3px,transparent 4px)}

1 · Terminal boot — says: "built in a command line"

<div id="term"></div>
<script>
var term=document.getElementById('term');
var L={p:'drey@command ~ % ',c:'./boot',o:'builder · st. pete · systems online'};
var el=document.createElement('div'),s=document.createElement('span');
s.style.color='var(--am)';s.textContent=L.p;el.appendChild(s);
var cm=document.createElement('span');el.appendChild(cm);term.appendChild(el);var i=0;
(function tc(){if(i<L.c.length){cm.textContent+=L.c[i++];setTimeout(tc,30+Math.random()*40);}
  else{var o=document.createElement('div');o.style.color='var(--soft)';o.textContent='  '+L.o;term.appendChild(o);}})();
</script>

2 · Decode-on-load — says: "this resolves out of noise"

// scrambles random chars, then resolves to the target word
function decode(el,target){
  var ch='ABCDEFGHJKLMNPQRSTUVWXYZ#%$&/<>_',f=0;
  var iv=setInterval(function(){var s='';
    for(var k=0;k<target.length;k++) s+=(f>k*3)?target[k]:ch[Math.floor(Math.random()*ch.length)];
    el.firstChild.nodeValue=s; f++;
    if(f>target.length*3+2){clearInterval(iv);el.firstChild.nodeValue=target+'.';}
  },52);
}
// usage: decode(document.getElementById('name'),'DREY');

3 · Live status panel — says: "I ship constantly, here's proof"

<div class="panel"><div class="ph">live_status <span class="cy">● streaming</span></div>
  <div class="stat">ships deployed <b id="s1">0</b></div>
  <div class="meter"><i id="m1"></i></div></div>
<script>// count-up; numbers in cyan, meter fills amber→cyan
function an(id,b,suf){var el=document.getElementById(id),t0=performance.now();
  (function f(t){var p=Math.min((t-t0)/1400,1);el.textContent=(b%1?(b*p).toFixed(1):Math.round(b*p))+(suf||'');
    if(p<1)requestAnimationFrame(f);})(performance.now());}
an('s1',47);document.getElementById('m1').style.width='94%';
</script>

4 · Self-drawing node-graph — says: "everything connects into a system"

<svg viewBox="0 0 300 90">
  <path class="edge" d="M40 45 L150 45"/> // stroke-draws in
  <circle class="node" cx="150" cy="45" r="18"/> // build → drey → ship → aura
</svg>
/* CSS */ .edge{fill:none;stroke:var(--c);stroke-width:1.3;
  stroke-dasharray:300;stroke-dashoffset:300;animation:draw 2s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.node{fill:var(--bg2);stroke:var(--am);stroke-width:1.3;filter:drop-shadow(0 0 6px rgba(232,163,61,.4))}

02 · Modules 5–8

5 · Gradient ticker — says: "always moving, always shipping"

<div class="ticker"><div class="t" id="tk"></div></div>
/* CSS */ .ticker{background:linear-gradient(90deg,var(--am-deep),var(--am));color:var(--bg);overflow:hidden;white-space:nowrap}
.ticker .t{display:inline-block;padding:7px 0;font-family:var(--grot);font-weight:900;font-size:12px;
  text-transform:uppercase;animation:scr 24s linear infinite}@keyframes scr{to{transform:translateX(-50%)}}
<script>var it=['Ships things that work','Learn','Build with','Build for','Dottie','Trace','Aura'];
var h=it.map(function(t){return '<span>'+t+' &mdash;</span>'}).join('');
document.getElementById('tk').innerHTML=h+h;// doubled for seamless loop</script>

6 · Magnetic doors — says: "interactive, alive, pick one"

<a class="door"><span class="w mag">Learn</span></a>
<script>document.querySelectorAll('.mag').forEach(function(el){var p=el.parentElement;
  p.addEventListener('pointermove',function(e){var r=el.getBoundingClientRect();
    el.style.transform='translate('+((e.clientX-(r.left+r.width/2))*0.1)+'px,'+((e.clientY-(r.top+r.height/2))*0.16)+'px)';});
  p.addEventListener('pointerleave',function(){el.style.transform='translate(0,0)';});});</script>
/* .w needs: display:inline-block; transition:transform .18s ease,color .18s */

7 · Cursor glow — says: "warm light follows you"

<div class="glow" id="glow"></div>
/* CSS */ .glow{position:fixed;width:560px;height:560px;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(232,163,61,.13),transparent 64%);transform:translate(-50%,-50%)}
<script>var g=document.getElementById('glow');
addEventListener('pointermove',function(e){g.style.left=e.clientX+'px';g.style.top=e.clientY+'px';},{passive:true});</script>

8 · Blueprint grid + scanlines — says: "ops room / under construction"

Included in the drop-in foundation above (the two body::before / body::after rules). Always on — it's the ambient texture that kills "plain."

03 · Voice

How it talks.

Short. Specific. Active. Like a smart friend who builds systems — never corporate, never hype.

04 · Apply it anywhere

The rules.

Every Drey site, page, OG image, deck, or social chrome starts here.

Do / Don't

05 · Implementation

Wire it in.

Next.js + Tailwind is the default stack. Port the vars anywhere else.

Tailwind — tailwind.config.ts

export default {
  theme:{extend:{
    colors:{ bg:"#0A0905","bg-2":"#13110A", fg:"#F0E9DA","fg-soft":"#6E6450",
      am:"#E8A33D","am-deep":"#C9821F", cy:"#2BD4FF", rule:"#221C12" },
    fontFamily:{ grot:['Archivo','sans-serif'], mono:['"JetBrains Mono"','monospace'] },
    letterSpacing:{ tightest:'-.06em', tight2:'-.04em', wide2:'.2em' },
  }},
} satisfies import('tailwindcss').Config;

Next.js fonts — app/layout.tsx

import { Archivo, JetBrains_Mono } from "next/font/google";
const grot = Archivo({ subsets:["latin"], weight:["500","600","800","900"], variable:"--font-grot", display:"swap" });
const mono = JetBrains_Mono({ subsets:["latin"], weight:["400","500","700"], variable:"--font-mono", display:"swap" });
// <body className={`${grot.variable} ${mono.variable} bg-bg text-fg font-mono`}>

Start here

1. Paste the drop-in foundation CSS (Section 02) into :root + body.
2. Build the hero with module 1 (boot) or 2 (decode) + at least one more module.
3. Hold 60-30-10, keep amber/cyan in their lanes, follow the voice rules.
4. Reference the live flagship: ~/Desktop/drey-style-v2/mixes/MIX4-command-center.html.

This system is the floor, not the ceiling. Compose the 8 modules into new layouts — but every Drey surface should be recognizable as this in 3 seconds.