https://github.com/srcfl/srcful-design-system
Design system, components, and brand guidelines for Sourceful Energy
https://github.com/srcfl/srcful-design-system
Last synced: 4 months ago
JSON representation
Design system, components, and brand guidelines for Sourceful Energy
- Host: GitHub
- URL: https://github.com/srcfl/srcful-design-system
- Owner: srcfl
- Created: 2026-01-05T10:59:37.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2026-01-22T18:17:24.000Z (5 months ago)
- Last Synced: 2026-01-23T11:25:41.704Z (5 months ago)
- Language: TypeScript
- Homepage: https://srcful-design-system.vercel.app
- Size: 4.98 MB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sourceful Design System
Design system, components, and brand guidelines for Sourceful Energy.
**Live site:** [design.sourceful.energy](https://design.sourceful.energy)
## What's included
- **50+ React Components** - Built on Radix UI and styled with Tailwind CSS
- **Design Tokens** - Colors, typography, spacing, shadows as CSS variables
- **Brand Guidelines** - Logo, colors, typography, voice & tone
- **Dark Mode** - Full dark mode support across all components
- **Accessibility** - WCAG 2.1 AA compliant, keyboard navigation, screen reader support
## Quick Start
```bash
npm install @sourceful-energy/ui
```
```tsx
import { Button, Card, Input } from "@sourceful-energy/ui"
import "@sourceful-energy/ui/styles.css"
function App() {
return (
Click me
)
}
```
## Development
```bash
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
```
## For Claude Code Users
This design system is optimized for AI-assisted development. To use it in your projects:
### 1. Copy the template
Copy [`CLAUDE.project-template.md`](./CLAUDE.project-template.md) to your project root as `CLAUDE.md`:
```bash
curl -o CLAUDE.md https://raw.githubusercontent.com/srcfl/srcful-design-system/main/CLAUDE.project-template.md
```
### 2. Install the package
```bash
npm install @sourceful-energy/ui
```
### 3. Start building
Claude Code will automatically read your `CLAUDE.md` and use the design system for all UI work.
See the [Claude Code setup guide](https://design.sourceful.energy/docs/claude-code) for more details.
## Structure
```
├── app/ # Next.js documentation site
│ ├── docs/ # Getting started, tokens
│ ├── components/ # Component documentation
│ └── brand/ # Brand guidelines
├── components/
│ └── ui/ # React components
├── lib/ # Utilities
└── registry/ # Component schemas (JSON)
```
## License
MIT © Sourceful Energy