Brand guidelines
The personal identity of Jan Lynnel Balitaan. One monogram, two themes, three typefaces and a short list of rules — enough to keep every resume, repository and profile looking like it came from the same person.
One line, from root to flight
A bird at the moment it takes off, drawn as one unbroken stroke. It begins as the J of Jan, curled low; climbs into the arch of ᜊ — Baybayin BA, the first letter of Balitaan in the script written in these islands before anyone arrived to change it; and leaves as a wing. The line never lifts, because what gets started gets finished.
Construction & minimums
Geometry
Drawn on a 200 × 190 grid at a constant 17-unit stroke. One path runs tail, leg, arch and wing; the arch is a true semicircle of radius 38. The arrowhead's base is buried ten units inside the stroke, so it overlaps rather than butts. Never redraw it by eye.
Clear space
Keep free space around the mark equal to the stroke width — 17 units, about a tenth of the mark's height — on every side. Nothing crosses into it.
Minimum size
16 px tall. Below that the arrowhead's notch fills in and the curl under the tail closes up; use the solid-head variant instead.
Ink, mint, amber
A deep ink base so the work stands out against it, mint as the primary voice, azure for depth, and amber reserved for the things worth stopping on. Light-theme accents are darkened versions of the same hues, so contrast holds on white.
The signature. Primary buttons, the mark, stat figures, gradient text.
Primary accent — links, active states, eyebrows. #00795C on light.
Secondary accent — depth, the far end of the gradient. #1A5FC4 on light.
The terminal node. Achievements and honors only — never decoration.
Dark-theme page base. Paired with #0C141D surfaces.
Light-theme page base. Paired with pure white surfaces.
Three voices, one register
A geometric display face with enough character to be recognizable, a neutral body face that disappears while you read it, and a mono for anything that is data rather than prose.
Jan Lynnel Balitaan
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789
I build the backend services, APIs and automation platforms that engineering and operations teams run on — from system architecture through to the production support call.
ABCDEFGHIJKLMNOPQRSTUVWXYZ · abcdefghijklmnopqrstuvwxyz · 0123456789
$ whoami --verbose
{ "role": "Senior Fullstack Application Developer", "years": 9 }
EYEBROWS AND LABELS SET UPPERCASE · 0.16EM TRACKING
The short list of rules
- Use the gradient mark on ink, and the darkened gradient on paper.
- Drop to monochrome whenever color is unavailable or unreliable.
- Use the tile for anything below 24 px — favicons, avatars, app icons.
- Keep the amber node. It is the only warm color in the system and it carries the idea.
- Let the mark sit on its own clear space.
- Don't recolor the gradient or swap in a different accent.
- Don't stretch, skew, rotate or outline the mark.
- Don't add a drop shadow, bevel or glow to the glyph itself.
- Don't place the bare mark on a busy photograph — use the tile.
- Don't re-letter the monogram in another typeface. It is a drawing, not type.
Voice
Plain, specific and unhurried. Name the system, name the stack, say what it did. No superlatives, no invented metrics, no "passionate about technology" — the work is the claim.
In code
Every value above is a CSS custom property in
assets/css/brand.css.
Change it there and the whole system follows.
| Token | Dark | Light | Role |
|---|---|---|---|
| --brand-mint | #00D9A3 | #00D9A3 | Brand constant, mint |
| --brand-azure | #3B8EFF | #3B8EFF | Brand constant, azure |
| --brand-amber | #FFB347 | #FFB347 | Brand constant, terminal node |
| --accent | #00D9A3 | #00795C | Primary accent, theme-aware |
| --accent-2 | #3B8EFF | #1A5FC4 | Secondary accent |
| --accent-3 | #FFB347 | #9A5B00 | Achievement accent |
| --bg | #06090D | #F7F9FB | Page base |
| --surface | #0C141D | #FFFFFF | Cards and panels |
| --line | #192634 | #E1E8EF | Borders and rules |
| --text | #E6EDF5 | #0B131C | Body text |
| --text-muted | #93A4B8 | #4A5D72 | Secondary text |
| --font-display | Space Grotesk | Headings and wordmark | |
| --font-body | Inter | Prose | |
| --font-mono | JetBrains Mono | Labels, data, terminal | |