jamie prince
e8182262b2
- Extract design tokens (colors, typography, spacing) from dao-marketplace - Build component CSS: base, card, button, forms - Create interactive Vite showcase app with tabbed navigation - Add README, .gitignore, AGENTS.md - Build passes (vite v8.2.2)
73 lines
2.3 KiB
Markdown
73 lines
2.3 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
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
|
|
```css
|
|
@import "@web3/style-guide/css/web3-style.css";
|
|
```
|
|
|
|
### Option B: Tokens Only
|
|
```css
|
|
@import "@web3/style-guide/tokens/index.css";
|
|
```
|
|
|
|
### Option C: Individual Components
|
|
```css
|
|
@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.
|