kajo.
/ˈkɑjo/ · a faint glow
the dark one. built for a page that is trying to make an impression.
the word
kajo /ˈkɑjo/ (a faint glow). the light you see before the thing making it. a glow on the horizon at four in the morning, no source in sight.
you turn toward it before you can name it, which is the whole job of a first screen. the glow is never the source, so the loudest register still sits behind what you came for.
kajo is the theme the design system was extracted from: a portfolio that had to look like something, on a near-black violet ground with an aurora sitting behind it. the accents are cool and saturated and they carry a lot of weight, because there is a lot of dark for them to carry it against.
the ground
every theme speaks the same role vocabulary. these six are the ones doing the heavy lifting in kajo.
bgnear black, tinted violet. never pure #000surfaceone step up, still dark. cards sit hereaccentthe aurora. the primary voiceaccent-altthe second voice. paired, never aloneinkprimary text, AA on every surface rolefaintdecorative only. it never carries meaning
the surface
a portfolio hero assembled from the catalog: Button, Badge, StatCard and the type scale, on this ground.
work that glows in the dark.
selected projects from nine years of building for the web, shown on the ground they were designed for.
the timing
the languid end of the vocabulary. durations stretched past the baseline, and a spring that settles with a faint overshoot. things arrive rather than appear, which is affordable here because nobody is filling in a form at speed.
fasthover, pressbasemost transitionsslowentrancesambientatmosphere driftuse it for
- portfolios and launch pages
- a case study that opens with a full-bleed hero
- surfaces where an atmosphere or a sula element is the point
not for
- a dense table someone reads all day
- a first-run flow where one control must be found fast
- anything that has to survive a white slide
you are standing in kajo right now, and this site is the thing it was built for. that is the easy case. the other two carry all of it without being built for any of it, which is the harder proof.
the other registers
same components, same roles, a different reading of every one of them. nothing forks.