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 #0c1020 with 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) with backdrop-filter

License

Internal use across Web3 ecosystem products.