Megan Warren · Tech Identity
primary mark: M / W monogram · the stacked sigma
01 · The mark
Logo variations
One geometric mark, built to survive any context: full gradient for hero moments, flat fills wherever a single colour has to do the work.
02 · System
Dark palette & tokens
Near-black plum carries it, the teal→violet gradient leads. Click any swatch to copy the hex.
Surfaces
Brand gradient stops
03 · Signature
Gradient & glow
The one effect that carries the brand. Teal at the crown, indigo through the body, lavender at the feet.
0%16%50%72%100%
CSS gradientclick to copy
background: linear-gradient(180deg,
#6BF4E0 0%, #31D9C9 16%, #3A2A8C 42%,
#5C3DBE 64%, #B79CF2 100%);
04 · Type
Type system
A geometric sans for headlines and UI, a true monospace for code, data and labels.
Space Groteskdisplay · ui
Aa Gg
Ship in the dark.
400 · 500 · 600 · 700
JetBrains Monocode · data
Aa Gg
const mark = () => mw;
0 O o · 1 l I · {} =>
05 · In the wild
Usage
zsh · megan@dev · 80×24
❯ npm create mw-app ./payload
◇ scaffolding from megan-warren/stack …
✔ 17 files written · 0 vulnerabilities
→ cd payload && mw dev
❯
1
2
3
4
5
6
export const brand = {
teal: '#34E3CE',
violet: '#6B4BD6',
glow: // the one effect
'0 0 24px',
}
06 · Repo header
payload
A tiny, typed toolkit for building in the dark. By Megan Warren.
npmv1.0.0
buildpassing
licenseMIT
07 · Apple
App & developer icons
The 1024 master Apple requires: opaque, no alpha, mark centred on plum. Derive every smaller size from it.
Payload
Megan Warren · Developer Tools
★★★★★ · 4.9
GET
08 · VS Code
Editor theme
“Megan Warren Dark”: a teal-on-plum colour theme, shipped as an extension. Token map below maps the palette to syntax.
Megan Warren Dark
meganwarren · Color Theme
↓ 12.4k · ★ 4.9
Install
Token map
keyword
string
function
property
comment
number
09 · Banners
Profile banners
Ready-made ratios for the places people find you: exported at full pixel size in the asset pack.
GitHub social preview · 1280×640
Megan Warren
Numbers, made human - now in the dark.
@meganwarren · github.com/meganwarren
X / header · 1500×500
Megan Warren
building in the dark
LinkedIn · 1584×396
Megan Warren
STEM · code · clear thinking
10 · Motion
Motion language
Four reusable behaviours. Subtle, never flashy: the gradient does the talking.
gradient sweep · progress
11 · Reactions
Reactions & iconography
Brand-coloured status glyphs for commits, reviews and chat. Built from the same geometric, miter-joined language as the mark.
Icon style
2.5px geometric strokes · miter joins · teal accents on plum
12 · Avatars
Avatar & favicon set
Megan Warren · dark tech kit · v1, sibling to the warm primary brand