Design system and UI components for Entire VC brand family
Unified design system for all Entire VC products:
- SaaS applications (React, Svelte)
- Marketing sites
- Browser extensions
- Telegram Mini-Apps
- PWAs
| Package | Description | Status |
|---|---|---|
| @entire-vc/tokens | Design tokens, theme CSS, Tailwind preset | ✅ Ready |
| @entire-vc/ui | React UI components (shadcn-based) | ✅ Ready |
| @entire-vc/ui-svelte | Svelte 5 UI components (Bits UI-based) | ✅ Ready |
pnpm add @entire-vc/tokens @entire-vc/ui// tailwind.config.js
const evcPreset = require('@entire-vc/tokens/tailwind-preset');
module.exports = {
presets: [evcPreset],
content: [
'./src/**/*.{js,ts,jsx,tsx}',
'./node_modules/@entire-vc/ui/dist/**/*.{js,mjs}',
],
darkMode: 'class',
};/* globals.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
@import '@entire-vc/tokens/css/entire.css'; /* or spark.css, playground.css, team-relay.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
--font-sans: 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'JetBrains Mono', 'Fira Code', monospace;
}
body {
font-family: var(--font-sans);
}React:
import { Button, Card, CardHeader, CardTitle, CardContent } from '@entire-vc/ui';
export function MyPage() {
return (
<Card>
<CardHeader>
<CardTitle>Welcome</CardTitle>
</CardHeader>
<CardContent>
<Button variant="default">Get Started</Button>
<Button variant="secondary">Learn More</Button>
</CardContent>
</Card>
);
}Svelte 5:
<script>
import { Button, Card, CardHeader, CardTitle, CardContent } from '@entire-vc/ui-svelte';
</script>
<Card>
<CardHeader>
<CardTitle>Welcome</CardTitle>
</CardHeader>
<CardContent>
<Button variant="default">Get Started</Button>
<Button variant="secondary">Learn More</Button>
</CardContent>
</Card>| Theme | Description | Primary Color |
|---|---|---|
entire |
Base brand - neutral, professional | #525769 |
spark |
Creative, energetic (dark theme) | #FF6A3D |
playground |
Tech, trustworthy | #3D8BFF |
team-relay |
Professional, collaborative | #6366F1 |
Add dark class to <html> element:
// Toggle dark mode
document.documentElement.classList.toggle('dark');# Clone
git clone git@github.com:entire-vc/evc-brandkit.git
cd evc-brandkit
# Install
pnpm install
# Build all packages
pnpm build
# Run Storybook
pnpm devevc-brandkit/
├── packages/
│ ├── tokens/ # Design tokens
│ │ ├── css/ # Theme CSS files (entire, spark, playground, team-relay)
│ │ ├── src/ # Token definitions (TS)
│ │ └── tailwind-preset.js
│ ├── ui/ # React components (Button, Card, Input, Dialog, etc.)
│ └── ui-svelte/ # Svelte 5 components (same API as @entire-vc/ui)
├── apps/
│ └── docs/ # Storybook documentation
└── package.json
MIT © Entire VC