swiftign is the internal design system we use across every Swiftaw and Fortized surface. born in 2026 while we were rebuilding both sites at the same time and realised we kept reaching for the same little tricks.
so we gave it a name and wrote it down.
the vibe, in one breath
dark, slightly playful, mildly off-axis. things tilt. things wobble a little. nothing is perfectly aligned because perfectly aligned is boring. stickers, capsules, soft chips, 3D buttons - all sitting on a near-black background with a single warm yellow doing most of the heavy lifting.
the tokens
backgrounds stay dark and near-neutral. one yellow accent per product carries the brand. six soft tints (yellow / pink / blue / mint / lilac / peach) handle everything else - chips, callouts, status pills, sticker tints.
#0d1117 swiftaw bg
#080a0f fortized bg
#fef83d swiftaw yellow
#fff93e fortized yellow
pink
blue
mint
lilac
peach
- display
Syne600 / 700 / 800 - letter-spacing tight (-.5pxto-3.6px)- body
DM Sans300-600 - 15.5px base, line-height 1.55- radii
- chips
100px· cards14-24px· pills999 - shadows
- hard offset:
0 8px 0 0 #050608· soft glow only on accent - tilt
-3degto+1.5degon cards · straighten on hover · soften≤720px- motion
- 200-250ms easing · bob keyframes for floating decos · 1.6s pulse for live dots
the components
floating capsule nav - centered, blurred, rounded-999, logo handles home. yellow gradient active pill, mobile drawer with sliding "→". 3D buttons (.btn-3d / .btn-3d-ghost) with hard offset shadows that press in on click. sticker cards with subtle tilts that straighten on hover. soft chip tokens in the six tints, used for status, eyebrows, callouts. floating FontAwesome decos that bob gently between sections. Twemoji + Fortized custom emojis (joyster, leafen, knight) used inline as real text.
how to use it
swiftign is meant to be remixed per product. swap the accent. add a tint. invent your own sticker shape. the only fixed things are the off-axis playfulness, the dark canvas, the typographic stack, and the tone of voice. everything else is fair game.
when you're building a new Swiftaw or Fortized app, treat swiftaw.com and fortized.com as your reference textures. open them, scroll them, screenshot them, and take inspiration - don't trace them. you're allowed to invent.
- keep the dark canvas, the single-yellow-accent rule, and the Syne + DM Sans pairing.
- use stickers, capsules and 3D buttons before you reach for anything generic.
- let things tilt slightly. straighten on hover. never align everything to a perfect grid.
- match the voice: lowercase, short, a little weird, never corporate.
- everything else - layout, components, surprise moments - invent freely.
