1919–1933 · dessau
bauhaus
form follows function. red square, yellow triangle, blue circle — kandinsky's primitive-to-color mapping lives at the root of this system.
every page under snaix.homes is built from the pieces on this page. colors, types, motion, components. reference it when you extend the system; when in doubt, reach for what is already here.
a tool should feel designed, not decorated.
snaix.homes is four tightly-coupled tools with a shared face. the design is built to make that face legible at a glance: you should know which tool you are reading about in under a second, and you should never feel the site trying to sell it to you.
the rules below are not a style guide. they are decisions already made, written down so i do not re-litigate them on every new page.
honest about what i stole. six influences, one shared grammar — geometric primitives, an opinion about the grid, and a respect for the reader's time.
12.4 gib, not "a lot".#f4efe4) motion.ts; spiritual nod to chenglou/prete and matt perry's popmotion three primaries on a warm paper ground. primaries are used as state: red for critical, yellow for focus, blue for action. neutrals do the rest of the work.
--red--yellow--blue--steel-1--steel-3--steel-5--steel-7--steel-9--inktwo families. archivo for ui & display — geometric, humanist, with ss01 enabled. jetbrains mono for code & chrome. lowercase is the default for headings; it signals informality and system-level thinking.
.t-display.t-h1.t-h2.t-h3.t-body.t-small.t-mono.t-mono-smtext is animated as a first-class subject. random is cheap. use motion to direct attention — only on headings, hero copy, and metric callouts. body text is always static.
<BlockReveal/><Typewriter/><Scramble/><Tally/><CommandStream/>the working pieces. every one is small, composable, and uses tokens — never hard-coded colors or sizes.
a bordered paper-raised surface. use for content groups, docs callouts, summary cards.
same shape, ink surface. use for emphasized statements, terminal-adjacent content.
three geometric primitives, three primary colors. almost every decorative element on the site is one of these, rotated and cropped.
square · redcircle · bluetriangle · yellow
the on-disk layout under packages/theme/src/styles/. keep
new work aligned to this shape — don't start new css files for
component-scoped rules unless the component is itself a new page.
tokens.css design tokens, reset, type scale, responsive breakpoints, dark theme theme.css theme toggle, persistence, data-theme attribute motion.{css,ts} text motion primitives: Typewriter · Scramble · Tally · BlockReveal · CommandStream · GridFlip · TickerRow layout.css TopBar · Footer · Panel · MarginNote · BauhausMark portal.css portal page (snaix.homes landing) home.css bcmr landing pikpak.css pikpaktui landing iconchanger.css iconchanger landing claudit.css claudit landing pages.css docs · install · changelog · about · cli design-system.css this page type does the heavy lifting. every page should read well with all images disabled.
red · yellow · blue only communicate state. decoration uses neutrals.
animation directs attention. if it is not pointing at something, remove it.
titles are lowercase. capitalization is reserved for product proper nouns.
shapes, not pictograms. the bauhaus mark carries what an emoji would.
colors and sizes come from vars. new components must accept both themes.