Web3 Corporate Style Guide
A shared design system for products across the Web3 ecosystem. Derived from the visual language of the DAO Marketplace project.
Quick Start
npm install
npm run dev # Vite dev server with live component showcase
npm run build # Production build
Repository Structure
src/
├── tokens/ # Design tokens (CSS custom properties)
│ ├── index.css # Master token import
│ ├── colors.css # Color palette
│ ├── typography.css # Font families, sizes, weights
│ └── spacing.css # Layout dimensions, radii, gaps
├── css/ # Component stylesheets
│ ├── web3-style.css # Master stylesheet (imports all below)
│ ├── base.css # Reset, header, nav, main, responsive
│ ├── card.css # .pixel-card component
│ ├── button.css # .pixel-btn component
│ └── forms.css # Form controls, footer, grids
├── components/ # (reserved for future React/Vue components)
├── App.tsx # Interactive showcase app
├── main.tsx # Entry point
└── demo.css # Showcase-specific styles
Integration
Option A: Full CSS Import
@import "@web3/style-guide/css/web3-style.css";
Option B: Tokens Only
@import "@web3/style-guide/tokens/index.css";
Option C: Individual Components
@import "@web3/style-guide/css/card.css";
@import "@web3/style-guide/css/button.css";
Design Language
| Token | Value | Usage |
|---|---|---|
--color-bg-primary |
#0c1020 |
Page background |
--color-accent-green |
#59d8ae |
Brand indicator, success |
--color-accent-blue |
#6f8bff |
Buttons, focus rings |
--color-text-primary |
#e7eaf1 |
Body text |
--font-family-base |
Inter, system-ui, ... |
All UI text |
Brand Conventions
- Dark-first: All views use
#0c1020with radial mesh gradients - Green status dot: 10px glowing indicator in product headers
- Blue interactive: Buttons and focus rings use
#6f8bff - Floating footer: Fixed bottom bar with backdrop blur
- Glassmorphism: Cards use
rgba(21,27,48,.82)withbackdrop-filter
License
Internal use across Web3 ecosystem products.