@siena-ai/design-system 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +90 -0
- package/dist/components.json +22 -0
- package/dist/globals.css +725 -0
- package/dist/index.d.mts +2010 -0
- package/dist/index.d.ts +2010 -0
- package/dist/index.js +11111 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +10717 -0
- package/dist/index.mjs.map +1 -0
- package/dist/postcss.config.mjs +7 -0
- package/package.json +149 -0
package/README.md
ADDED
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
# Siena Design System
|
|
2
|
+
|
|
3
|
+
## Start Here
|
|
4
|
+
|
|
5
|
+
**Want to build something?** Copy-paste this into Terminal:
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
git clone https://github.com/siena-ai/design-system-seed my-project
|
|
9
|
+
cd my-project
|
|
10
|
+
npm install
|
|
11
|
+
npm run dev
|
|
12
|
+
```
|
|
13
|
+
|
|
14
|
+
Then open Claude Code, open that folder, and describe what you want to build.
|
|
15
|
+
|
|
16
|
+
→ **[Full setup guide](./docs/for-everyone.md)** if you need help with installation
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
20
|
+
## How It Works
|
|
21
|
+
|
|
22
|
+
```
|
|
23
|
+
┌─────────────────────────────────────────────────────────────────┐
|
|
24
|
+
│ PAGES → /dashboard, /settings, /products │
|
|
25
|
+
│ ▲ │
|
|
26
|
+
│ ORGANISMS → Hero, StatCard, DataTable, TeamMemberList │
|
|
27
|
+
│ ▲ │
|
|
28
|
+
│ ATOMS → Button, Input, Card, Dialog, Badge (49) │
|
|
29
|
+
│ ▲ │
|
|
30
|
+
│ DESIGN TOKENS → Colors, Typography, Shadows, Spacing │
|
|
31
|
+
└─────────────────────────────────────────────────────────────────┘
|
|
32
|
+
Change tokens at the bottom → Everything above updates
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
→ [Full architecture diagrams](./docs/architecture.md)
|
|
36
|
+
|
|
37
|
+
---
|
|
38
|
+
|
|
39
|
+
## Why This Exists
|
|
40
|
+
|
|
41
|
+
We built this so **anyone at Siena** can create prototypes, demos, and internal tools that look exactly like our production product — in minutes, not days.
|
|
42
|
+
|
|
43
|
+
**Why not use v0, Lovable, or other tools?**
|
|
44
|
+
|
|
45
|
+
Those tools are great for generic UIs. But they don't know Siena. They'll give you blue buttons when we use terracotta. They'll use cold grays when we use warm creams. You'll spend hours tweaking to match our brand.
|
|
46
|
+
|
|
47
|
+
With this system + Claude Code:
|
|
48
|
+
- You describe what you want in plain English
|
|
49
|
+
- Claude builds it using our actual components
|
|
50
|
+
- The result is **production-fidelity** from the start
|
|
51
|
+
|
|
52
|
+
```
|
|
53
|
+
You describe it → Claude builds it → It looks like Siena
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
This is the fastest way to go from idea to something real.
|
|
57
|
+
|
|
58
|
+
---
|
|
59
|
+
|
|
60
|
+
## Guides
|
|
61
|
+
|
|
62
|
+
| Guide | Who it's for | What you'll learn |
|
|
63
|
+
|-------|--------------|-------------------|
|
|
64
|
+
| **[For Everyone](./docs/for-everyone.md)** | Marketing, CS, PM, anyone building prototypes | How to set up Claude Code, build UIs by describing them, save your work, deploy to share |
|
|
65
|
+
| **[For Engineers](./docs/for-engineers.md)** | Frontend, fullstack working on Siena platform | NPM package usage, component API, PR rules, how to contribute |
|
|
66
|
+
| **[Architecture](./docs/architecture.md)** | Tech leads, engineering managers | System design, sync strategy between seed and production, roadmap |
|
|
67
|
+
| **[Meeting Pre-Read](./docs/status.md)** | Everyone | Wednesday agenda, open questions, pre-work |
|
|
68
|
+
|
|
69
|
+
---
|
|
70
|
+
|
|
71
|
+
## Quick Links
|
|
72
|
+
|
|
73
|
+
| What | Where |
|
|
74
|
+
|------|-------|
|
|
75
|
+
| Component showcase | http://localhost:3000/design-system (run `npm run dev` first) |
|
|
76
|
+
| Save your work | [How to save](./docs/for-everyone.md#part-3-save-your-work-important) |
|
|
77
|
+
| Deploy to Vercel | [How to deploy](./docs/for-everyone.md#part-4-share-your-work) |
|
|
78
|
+
| Questions | [#design-system on Slack](https://siena-ai.slack.com/archives/C0A82QMM326) |
|
|
79
|
+
|
|
80
|
+
---
|
|
81
|
+
|
|
82
|
+
## Principles
|
|
83
|
+
|
|
84
|
+
1. **One source of truth** — All Siena products use these components
|
|
85
|
+
2. **Compose, don't fork** — Build by combining existing pieces
|
|
86
|
+
3. **Warm, not cold** — Cream backgrounds, terracotta accents, no glows
|
|
87
|
+
|
|
88
|
+
---
|
|
89
|
+
|
|
90
|
+
**Questions?** Ask in [#design-system](https://siena-ai.slack.com/archives/C0A82QMM326) on Slack.
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$schema": "https://ui.shadcn.com/schema.json",
|
|
3
|
+
"style": "new-york",
|
|
4
|
+
"rsc": true,
|
|
5
|
+
"tsx": true,
|
|
6
|
+
"tailwind": {
|
|
7
|
+
"config": "",
|
|
8
|
+
"css": "src/app/globals.css",
|
|
9
|
+
"baseColor": "neutral",
|
|
10
|
+
"cssVariables": true,
|
|
11
|
+
"prefix": ""
|
|
12
|
+
},
|
|
13
|
+
"iconLibrary": "lucide",
|
|
14
|
+
"aliases": {
|
|
15
|
+
"components": "@/components",
|
|
16
|
+
"utils": "@/lib/utils",
|
|
17
|
+
"ui": "@/components/ui",
|
|
18
|
+
"lib": "@/lib",
|
|
19
|
+
"hooks": "@/hooks"
|
|
20
|
+
},
|
|
21
|
+
"registries": {}
|
|
22
|
+
}
|