Brand Guide › Components
Components
The building blocks, all from the 5.0 system (pure-ui.css). Reuse these — don't reinvent spacing, radius, or shadow.
Buttons
Pills & status
ACTIVESENTPENDINGVOID
Card
Card title
White surface, 1px hairline border, 13–16px radius, the one shadow. Optional 3px gold left-accent for module tiles. Hover: lift 3px + deepen shadow.
Input
All components live in
pure-ui.css (canon: design.system.pure_ui_css). Skeletons, empty states & mobile helpers included.Loading & waiting
The animated PURE logo is our one loading indicator. Use it for every waiting moment — page & section loads, requests in flight, AI thinking, uploads, parsing, saves. No spinners, no bouncing dots, no emoji.
Served from /pure-loader.gif. Helper: <script src="/pure-loader.js"> → PureLoader.overlay(msg) full-screen veil, PureLoader.inline(el,msg) fills a section, PureLoader.dots(el) inline/chat thinking.
PURE Brand Guide · Components