v1 · October 2026
The EasyCoder brand system.
The mark, the wordmark, the colors and the type — documented truthfully, as the system is actually used across the product, the site and the desktop app. This page is itself typeset with it.
01 — The mark
Round-capped < and > brackets around a slash, drawn on a 1000×1000 grid, stroked — never filled — in three gradient variants.
Geometry
- – Viewbox 0 0 1000 1000; left bracket apex x=190, right x=810, vertical span 250–630.
- – Stroke widths: 120 (brackets), 85 (slash); round caps and joins.
- – Three gradients: gL #10C7F4→#1267FF, gR #35D9F3→#0876F9, gS #5FD8FA→#2F7DF5.
Clear space
Keep free space around the mark of at least one quarter of the bracket height (the dashed frame above — h/4).
Minimum sizes
Mark 20 px (16 px with the safe-spacing tile). Wordmark 72 px wide. 20 px 16 px
Misuse — always and never
Use the mark as delivered, gradients intact.
Recolor the mark — no solid fills, no monochrome, no new palettes.
Stretch, skew, rotate, outline or add drop shadows.
Place the navy wordmark on dark — use wordmark-light there.
02 — The wordmark
Two image variants — navy glyphs plus the gradient ".dev". Always the IMAGE; never approximate it with a live font.
One variant per surface
Pick by background polarity; never recolor a variant to fake the other.
Clear space h/4
Same quarter-of-glyph-height rule as the mark.
Minimum 72 px wide
Below that, use the mark alone.
03 — Color
Only the brand gradient carries color on the dark surfaces — everything else is ink, slate and white.
Gradients
gL#10C7F4 → #1267FF135°
gR#35D9F3 → #0876F9x-90°
gS#5FD8FA → #2F7DF5135°
Surfaces & text
#05070B
page, dark
#0d1117
cards, dark
#F6F8FA
light canvas
#ffffff
cards, light
#1F2328
ink
#8B949E
· #57606A muted
#238636
success · CTA green (emails)
04 — Typography
All product and marketing text. The system leans on scale contrast: very large bold headings set directly against small utility text and 11–13 px mono telemetry, with little in between.
Display 4.25rem/800 · H2 3rem/700 · Body 16px/400 · Caption 13px
Anything that comes from a machine: agent streams, audit rows, token chips, file paths, hex codes.
edit src/webhooks/stripe.ts · +34 −112
05 — Assets
Hosted at the domain, ready to link or download.
-
Download →
logo-mark.svg
vector mark · gradients included
-
Download →
wordmark.png
navy glyphs · light surfaces
-
Download →
wordmark-light.png
white glyphs · dark surfaces
-
Download →
favicon.svg
mark on dark rounded tile
Canonical URLs: easycoder.dev/mark.svg · /wordmark.png · /wordmark-light.png · /favicon.svg
06 — In application