User Guide · v0.1
Blue Professional Design System
A single-accent design system: warm paper background with a graph-paper grid, one cobalt accent, and a single Noto Sans font for every language. Built for B2B SaaS pitches, consulting deliverables, and internal reviews.
1 · Installation & getting started
Add two lines to your page. No build step, no dependencies.
<link rel="stylesheet" href="https://blue-pro-cdn.pages.dev/blue-pro.min.css"> <script src="https://blue-pro-cdn.pages.dev/blue-pro.min.js" defer></script> <body class="bp"> <button class="bp-btn">Action</button> </body>
Tip
Add the bp class to <body> to enable the graph-paper background. Use bp-no-grid for a flat surface.
2 · Colors & design tokens
Paper #FDFBF7
Cobalt #1E2BFA
Ink #111
Muted #6B6B6B
| Token | Value | Used for |
|---|---|---|
| --bp-radius-sm | 4px | Button, card, input |
| --bp-space-md | 3rem | Section spacing |
| --bp-grid-size | 24px | Background grid step |
| --bp-dur | 220ms | Hover duration |
3 · Typography — one font, every language
Noto Sans renders clearly across every writing system:
English — The quick brown fox jumps over the lazy dog.
Tiếng Việt — Vùng đất phương Nam có những cánh đồng bát ngát.
Русский — Съешь же ещё этих мягких французских булок.
Ελληνικά — Ξεσκεπάζω την ψυχοφθόρα βδελυγμία.
العربية — نص تجريبي للخط.
4 · Components
Buttons
Form
Must be at least 8 characters.
Card & zig-zag
Trustworthy by default
WCAG AA contrast, restrained motion, animating only transform/opacity.
Skeleton & empty state
No items yet.