ShiftOps Design · v1.0
shiftops.ai

03 · Brand

The name is the logo.

ShiftOps carries no symbol. The identity is the wordmark — one word, two weights, set in the same Geist the product uses. Everything louder than that belongs to the gradients and the photography.

03.1

The wordmark

One word, two weights.

The identity is text: "Shift" at weight 600 in --fg, "Ops" at weight 400 in --fg-muted, set in Geist with −0.02em tracking, no space between. The weight step and the muted "Ops" are the entire logo. There is no symbol — the three-bar tile was never approved as one and lives only as the favicon below.

ShiftOps
48px · hero / print
ShiftOps
32px
ShiftOps
20px · nav size
ShiftOps
14px · minimum
ShiftOps
clearspace · the height of the "S"
<span style="font-size:20px; letter-spacing:-0.02em;">
  <span style="font-weight:600; color:var(--fg);">Shift</span>
  <span style="font-weight:400; color:var(--fg-muted);">Ops</span>
</span>

/* Spec — this is the whole logo:
   type      Geist (or the tokens.css sans fallback stack)
   weights   Shift 600 · Ops 400
   color     Shift var(--fg) · Ops var(--fg-muted) — it inverts with the theme
   tracking  -0.02em, no space between the words
   clearspace  the height of the "S", all sides
   minimum   14px — below that the weight contrast stops reading
   on photos/gradients: over a scrim only — Shift #fff, Ops rgba(255,255,255,0.7) */
03.2

Usage

Hard to misuse, on purpose.

The wordmark carries no symbol, no gradient, no hue. Two weights of one word survive a badge printer, a broadcast lower third, and a 20px nav without ever needing a redraw.

Do
  • Set it in Geist — weights 600 + 400, tracking −0.02em, no space
  • Keep "Ops" one step quieter: --fg-muted, never a hue
  • Keep clearspace equal to the height of the "S" on all sides
  • Let it invert with the theme through the ink tokens
  • On photos or gradients, set it white on a scrim — Shift #fff, Ops at 70% white
Don't
  • Add a symbol, icon, or container — the favicon tile is not a logo
  • Recolor "Ops" to a hue — not violet, not ok-green, not a gradient
  • Set it in another typeface, one weight, all-caps, or with a space ("Shift Ops")
  • Track it out, stretch it, outline it, or add a drop shadow
  • Render it below 14px — at that size use plain body text
03.3

Favicon & app icon

A tile for the tab. Not a logo.

Browser tabs and home screens demand a square, and the wordmark isn't one. This three-bar tile — a schedule filling — exists for that slot only. It never appears in product or marketing chrome, decks, documents, or print; wherever a layout seems to want a mark, use the wordmark instead.

32px · app icon
16px · favicon
<!-- favicon / app-icon export ONLY — never in page chrome -->
<svg viewBox="0 0 24 24" fill="none">
  <rect width="24" height="24" rx="6" fill="#0a0a0a"/>
  <rect x="6" y="6.5"  width="12" height="3" rx="1.5" fill="#fff"/>
  <rect x="6" y="10.5" width="12" height="3" rx="1.5" fill="#fff" opacity="0.7"/>
  <rect x="6" y="14.5" width="8"  height="3" rx="1.5" fill="#fff" opacity="0.45"/>
</svg>
03.4

Editorial gradients

Where the color actually lives.

Stories, releases, and update cards carry their color as grainy linear gradients — dusk-toned, three stops, always worn with .grain. These six recipes are lifted directly from the marketing site's blog and release tiles. Click a recipe to copy its CSS.

agentic operations violet → rose → ember
vertical physics overcast steel
trust & fill rate field green
the hidden tax amber ledger
the fragmented stack rose to oxblood
labor elasticity soft violet dawn

The recipe: three stops, 130–170° angle, mid-saturation start, near-black or dusty finish. New gradients should feel like event light — dusk over a course, sodium lamps at load-in — never like candy. Always add .grain; captions on gradients are white mono at 85% opacity.

03.5

Photography

Real labor, shot dark.

Photography is the brand's only permitted spectacle, and it earns it by being true: real crews, real venues, working light. Dark, cinematic frames — floodlit gates, dawn load-ins, concourse sodium glow. No stock smiles, no laptops in coffee shops, nobody pointing at a screen.

Direction
  • Real workers mid-task: rigging, pouring, scanning, waving a cart through
  • Low ambient light, one strong practical source, deep shadow detail
  • Always inside a 28px-radius cutout with a bottom scrim and white caption
  • Captions name the place and hour: "Gate A, 5:40 a.m."
Never
  • Full-bleed photography — the frame is part of the system
  • Bright, evenly-lit stock imagery or posed team shots
  • Text or logos placed on the image without a scrim
  • Color-graded filters that fight the token palette

Standing in for a photograph

Same frame, same scrim, same caption discipline

Concourse, T-10 minutes to doors

Every caption is a fact from the floor