DESIGN SYSTEM
B0ASE maintains two distinct design pillars depending on the context: INDUSTRIAL BLUEPRINT for system-level pages and BITSIGN MODERN for tool-centric experiences.
INDUSTRIAL BLUEPRINT
The core b0ase aesthetic. Cold, sharp, and high-contrast. Designed for information density and technical transparency.
- • Full-width layouts (no max-width)
- • Sharp corners (0px radius)
- • Grayscale palette with minimal accents
- • Heavy use of borders and grid lines
BITSIGN MODERN
The tool-centric aesthetic. Accessible, centered, and software-focused. Designed for focused interactions and consumer confidence.
- • Centered containers (max-w-6xl)
- • Rounded corners (8px radius)
- • Blue accents and subtle glow effects
- • Card-based sectioning with soft backgrounds
Layout Principles
Industrial Layout
Full-width execution. Containers expand to use the entire browser viewport.
className="w-full px-4 md:px-8 py-16"Tool Layout
Focused execution. Content is restrained within a centered container.
className="max-w-6xl mx-auto px-4 py-16"Typography
Industrial Titles
BLUEPRINT TITLE
text-5xl font-bold tracking-tighter
Modern Titles
BitSign
text-5xl font-black tracking-tight uppercase
Color Palette
Pure Black
#000000Primary background
Pure White
#FFFFFFPrimary text, buttons
Gray 800
#1F2937Borders, dividers
Gray 400
#9CA3AFBody text, descriptions
Blue 500
#3B82F6Links, accents
Green 500
#10B981Success states, checkmarks
Brand Colors
User-specific brand colors should be dynamic and loaded from the brand assets system. Avoid hardcoded brand colors in component code.
Component Library
Industrial Button
Industrial Card
Data Item
Industrial style uses sharp borders & 0px radius.
Modern Button
Modern Card
Feature Item
Modern style uses rounded-lg corners & subtle blue accents.
Navigation Guidelines
Dashboard Button
When user is signed in, DASHBOARD button should use white text, not blue.
text-white hover:text-gray-300text-sky-400 hover:text-sky-300Breadcrumb Navigation
Use consistent breadcrumb styling for hierarchical navigation.
Best Practices
✓ Do
- • Follow the layout logic of the chosen pillar
- • Use full-width for systems, centered for tools
- • Include back buttons on sub-pages
- • Follow typography hierarchy
- • Use consistent padding (px-4 md:px-8 py-16)
- • Add hover states to interactive elements
- • Maintain responsive design
❌ Don't
- • Mix pillar components (e.g. sharp buttons in rounded cards)
- • Hardcode brand colors
- • Use blue DASHBOARD button when signed in
- • Skip hover states on clickable elements
- • Use inconsistent spacing
- • Forget mobile responsiveness
Contact Information Standards
Email Addresses
Only use approved email addresses:
- ✓ [email protected]
- ✓ [email protected]
- ✓ [email protected]
- ❌ [your-email] or other placeholders
Social Links
- ✓ Telegram: https://t.me/b0ase_com
- ❌ Telegram: https://t.me/b0ase (incorrect)