SI Design System
Black and white. One accent. Glass everywhere. Built for Supreme Intelligence.
Colors
Monochrome base with a single violet accent for authority and focus.
#7C3AED
#0A0A0A
#737373
#E5E5E5
#FFFFFF
Typography
Satoshi for headings, Inter for body. Clean hierarchy, tight tracking.
Heading 1 — 3rem
Heading 2 — 2.25rem
Heading 3 — 1.875rem
Heading 4 — 1.5rem
Body Large — The quick brown fox jumps over the lazy dog.
Body — The quick brown fox jumps over the lazy dog.
Small — The quick brown fox jumps over the lazy dog.
Glass Cards
Frosted glass with backdrop blur, semi-transparent backgrounds, and subtle depth.
Standard Glass
Frosted background with 20px blur, white-tinted surface, soft shadow beneath.
With Badge
Cards can hold badges, buttons, and any component. Hover to see the lift effect.
Flat Glass
Same glass effect without the hover interaction. Good for static content areas.
Inputs
Clean form fields with violet focus rings.
Chat Bubbles
Telegram-style conversation UI.
Credit Widget
Shows remaining credits at a glance.
Pricing Cards
Glassmorphism pricing with one featured tier.
- One AI assistant
- Telegram integration
- 24/7 uptime
- Email support
- Everything in Starter
- Priority provisioning
- Advanced tools
- Priority support
- Everything in Power
- Custom integrations
- Dedicated server
- White-glove onboarding
Toasts
Notification feedback for actions.
Modal
Click to preview.