design system · v0.1.1
A small, dark-first design system for psyn apps.
Line icons, a Bootstrap-style CSS framework, and the tokens that hold it together — built to be obvious, intentional, and easy to drop into any app. Small is a feature.
01 / what it is
One system, every psyn app
Feeds, trader, pawbook, hub — all speak the same visual language. Tokens define color, type, and spacing once; everything else inherits.
02 / icons
124 line icons, four ways
A 24px grid, 1.75px stroke. Ship them as individual SVGs,
a <symbol> sprite, an icon webfont, or multi-size PNGs.
03 / framework
Components that already look right
Buttons, forms, cards, modals, tables — themed for the psyn dark aesthetic, light-mode aware, with a tiny vanilla-JS layer for the interactive bits.
stable
v0.1
See components
04 / get started
Drop in two files
<link rel="stylesheet" href="psyn-ui.css">
<link rel="stylesheet" href="icons/psyn-icons.css">
<script defer src="psyn-ui.js"></script>
Read the guide