Skip to content

Commit 7e56413

Browse files
bogdaniculaebogdaniculae
committed
docs: foundations updated
1 parent 500d894 commit 7e56413

File tree

11 files changed

+401
-325
lines changed

11 files changed

+401
-325
lines changed

‎docs/foundations/README.md‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,15 @@ This section is under development.
1313

1414
Design tokens and visual styles that form the base of the design system.
1515

16-
| Page | Description |
17-
| ----------------------------- | ------------------------------------------------ |
18-
| [Tokens](./tokens.md) | Semantic color tokens (text, background, border) |
19-
| [Spacing](./spacing.md) | Padding, margin, gap values |
20-
| [Colors](./colors.md) | Primitive color palette |
21-
| [Typography](./typography.md) | Font family, sizes, weights, headings |
22-
| [Icons](./icons.md) | Icon library and sizes |
23-
| [Logos](./logos.md) | Logo assets |
24-
| [Elevation](./elevation.md) | Shadows |
25-
| [Border](./border.md) | Border width |
26-
| [Radius](./radius.md) | Border radius |
16+
| Page | Description |
17+
| ----------------------------- | ------------------------------ |
18+
| [Tokens](./tokens.md) | Semantic color tokens |
19+
| [Spacing](./spacing.md) | Padding, margin, gap |
20+
| [Colors](./colors.md) | Color system overview |
21+
| [Palette](./palette.md) | Primitive color scales |
22+
| [Typography](./typography.md) | Font, sizes, weights, headings |
23+
| [Icons](./icons.md) | Icon library |
24+
| [Logos](./logos.md) | Logo assets |
25+
| [Elevation](./elevation.md) | Surfaces and shadows |
26+
| [Border](./border.md) | Border width |
27+
| [Radius](./radius.md) | Border radius |

‎docs/foundations/border.md‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,34 @@
22
sectionTitle: Foundations
33
sectionOrder: 20
44
title: Border
5-
order: 9
5+
order: 10
66
---
77

88
# Border
99

10-
Border tokens define the thickness of element edges. Use consistent width values for visual harmony.
10+
Border width tokens. For border colors, see [Tokens](./tokens.md#border).
1111

12-
## Width
12+
## Width Tokens
1313

14-
| Token | Tailwind | CSS | Value |
15-
| ---------------- | ---------- | ------------------ | ----- |
16-
| `border.width.0` | `border-0` | `--border-width-0` | 0 |
17-
| `border.width.1` | `border-1` | `--border-width-1` | 1px |
18-
| `border.width.2` | `border-2` | `--border-width-2` | 2px |
14+
| Token | Tailwind | CSS | Value | Use for |
15+
| ---------------- | ---------- | ------------------ | ----- | ---------------------------- |
16+
| `border.width.0` | `border-0` | `--border-width-0` | 0 | Remove borders |
17+
| `border.width.1` | `border-1` | `--border-width-1` | 1px | Default borders, dividers |
18+
| `border.width.2` | `border-2` | `--border-width-2` | 2px | Selected states, focus rings |
1919

20-
## When to Use
20+
## Common Pairings
2121

22-
- **0**: Remove borders (e.g., borderless inputs)
23-
- **1**: Default for most borders (cards, inputs, dividers)
24-
- **2**: Emphasis borders (active states, focus rings)
22+
| State | Width | Color |
23+
| -------- | ---------- | ----------------- |
24+
| Default | `border-1` | `border-default` |
25+
| Selected | `border-2` | `border-selected` |
26+
| Focused | `border-2` | `border-focused` |
27+
| Input | `border-1` | `border-input` |
2528

26-
For border colors, see [Tokens](./tokens.md#border).
29+
## Guidelines
30+
31+
| Do | Don't |
32+
| ---------------------------------------------------- | --------------------------------------------- |
33+
| Use `border-2` with `border-selected` for selection | Mix border widths inconsistently |
34+
| Use `border-2` with `border-focused` for focus rings | Skip focus indicators on interactive elements |
35+
| Keep default borders at 1px | Use thick borders for standard UI |

‎docs/foundations/colors.md‎

Lines changed: 55 additions & 178 deletions
Original file line numberDiff line numberDiff line change
@@ -7,181 +7,58 @@ order: 4
77

88
# Colors
99

10-
::: warning Work in Progress
11-
This section is under development.
12-
:::
13-
14-
## Primitives
15-
16-
Base color scales used to build semantic tokens. For reference only.
17-
18-
::: warning Use semantic tokens instead
19-
Primitives don't adapt to dark mode. Use [Tokens](./tokens.md) for text, background, border, and icon colors.
20-
:::
21-
22-
### Neutral
23-
24-
| Token | Tailwind | CSS | Hex |
25-
| -------------------- | ------------------ | ------------------------ | --------- |
26-
| `color.neutral.0` | `bg-neutral-0` | `--color-neutral-0` | `#ffffff` |
27-
| `color.neutral.100` | `bg-neutral-100` | `--color-neutral-100` | `#f8f8f8` |
28-
| `color.neutral.200` | `bg-neutral-200` | `--color-neutral-200` | `#f0f1f2` |
29-
| `color.neutral.300` | `bg-neutral-300` | `--color-neutral-300` | `#dddee1` |
30-
| `color.neutral.400` | `bg-neutral-400` | `--color-neutral-400` | `#b7b9be` |
31-
| `color.neutral.500` | `bg-neutral-500` | `--color-neutral-500` | `#8c8f97` |
32-
| `color.neutral.600` | `bg-neutral-600` | `--color-neutral-600` | `#7d818a` |
33-
| `color.neutral.700` | `bg-neutral-700` | `--color-neutral-700` | `#6b6e76` |
34-
| `color.neutral.800` | `bg-neutral-800` | `--color-neutral-800` | `#505258` |
35-
| `color.neutral.900` | `bg-neutral-900` | `--color-neutral-900` | `#3b3d42` |
36-
| `color.neutral.1000` | `bg-neutral-1000` | `--color-neutral-1000` | `#292a2e` |
37-
| `color.neutral.1100` | `bg-neutral-1100` | `--color-neutral-1100` | `#1e1f21` |
38-
39-
### BCC (Brand)
40-
41-
| Token | Tailwind | CSS | Hex |
42-
| ---------------- | ------------- | ------------------ | --------- |
43-
| `color.bcc.100` | `bg-bcc-100` | `--color-bcc-100` | `#f0fcfa` |
44-
| `color.bcc.200` | `bg-bcc-200` | `--color-bcc-200` | `#d2eeeb` |
45-
| `color.bcc.300` | `bg-bcc-300` | `--color-bcc-300` | `#a0cec8` |
46-
| `color.bcc.400` | `bg-bcc-400` | `--color-bcc-400` | `#6fb5ad` |
47-
| `color.bcc.500` | `bg-bcc-500` | `--color-bcc-500` | `#3e9f97` |
48-
| `color.bcc.600` | `bg-bcc-600` | `--color-bcc-600` | `#1d7f78` |
49-
| `color.bcc.700` | `bg-bcc-700` | `--color-bcc-700` | `#0c625c` |
50-
| `color.bcc.800` | `bg-bcc-800` | `--color-bcc-800` | `#014d49` |
51-
| `color.bcc.900` | `bg-bcc-900` | `--color-bcc-900` | `#0b3633` |
52-
| `color.bcc.1000` | `bg-bcc-1000` | `--color-bcc-1000` | `#012320` |
53-
54-
### Blue
55-
56-
| Token | Tailwind | CSS | Hex |
57-
| ----------------- | -------------- | ------------------- | --------- |
58-
| `color.blue.100` | `bg-blue-100` | `--color-blue-100` | `#f6fbff` |
59-
| `color.blue.200` | `bg-blue-200` | `--color-blue-200` | `#d9ecff` |
60-
| `color.blue.300` | `bg-blue-300` | `--color-blue-300` | `#a6cdfd` |
61-
| `color.blue.400` | `bg-blue-400` | `--color-blue-400` | `#7cabf9` |
62-
| `color.blue.500` | `bg-blue-500` | `--color-blue-500` | `#608ef6` |
63-
| `color.blue.600` | `bg-blue-600` | `--color-blue-600` | `#446add` |
64-
| `color.blue.700` | `bg-blue-700` | `--color-blue-700` | `#274eb5` |
65-
| `color.blue.800` | `bg-blue-800` | `--color-blue-800` | `#273c8f` |
66-
| `color.blue.900` | `bg-blue-900` | `--color-blue-900` | `#212c64` |
67-
| `color.blue.1000` | `bg-blue-1000` | `--color-blue-1000` | `#091e47` |
68-
69-
### Teal
70-
71-
| Token | Tailwind | CSS | Hex |
72-
| ----------------- | -------------- | ------------------- | --------- |
73-
| `color.teal.100` | `bg-teal-100` | `--color-teal-100` | `#f6fbff` |
74-
| `color.teal.200` | `bg-teal-200` | `--color-teal-200` | `#c3f2f8` |
75-
| `color.teal.300` | `bg-teal-300` | `--color-teal-300` | `#82d3e3` |
76-
| `color.teal.400` | `bg-teal-400` | `--color-teal-400` | `#51b9cf` |
77-
| `color.teal.500` | `bg-teal-500` | `--color-teal-500` | `#1a9eb7` |
78-
| `color.teal.600` | `bg-teal-600` | `--color-teal-600` | `#0b7da1` |
79-
| `color.teal.700` | `bg-teal-700` | `--color-teal-700` | `#005b81` |
80-
| `color.teal.800` | `bg-teal-800` | `--color-teal-800` | `#09486b` |
81-
| `color.teal.900` | `bg-teal-900` | `--color-teal-900` | `#0d324d` |
82-
| `color.teal.1000` | `bg-teal-1000` | `--color-teal-1000` | `#0c2132` |
83-
84-
### Green
85-
86-
| Token | Tailwind | CSS | Hex |
87-
| ------------------ | --------------- | -------------------- | --------- |
88-
| `color.green.100` | `bg-green-100` | `--color-green-100` | `#efffed` |
89-
| `color.green.200` | `bg-green-200` | `--color-green-200` | `#cbf3c9` |
90-
| `color.green.300` | `bg-green-300` | `--color-green-300` | `#83d895` |
91-
| `color.green.400` | `bg-green-400` | `--color-green-400` | `#32c180` |
92-
| `color.green.500` | `bg-green-500` | `--color-green-500` | `#1ca673` |
93-
| `color.green.600` | `bg-green-600` | `--color-green-600` | `#09825d` |
94-
| `color.green.700` | `bg-green-700` | `--color-green-700` | `#0c6241` |
95-
| `color.green.800` | `bg-green-800` | `--color-green-800` | `#094c3b` |
96-
| `color.green.900` | `bg-green-900` | `--color-green-900` | `#073734` |
97-
| `color.green.1000` | `bg-green-1000` | `--color-green-1000` | `#032429` |
98-
99-
### Yellow
100-
101-
| Token | Tailwind | CSS | Hex |
102-
| ------------------- | ---------------- | --------------------- | --------- |
103-
| `color.yellow.100` | `bg-yellow-100` | `--color-yellow-100` | `#fdf8e9` |
104-
| `color.yellow.200` | `bg-yellow-200` | `--color-yellow-200` | `#f8e6a0` |
105-
| `color.yellow.300` | `bg-yellow-300` | `--color-yellow-300` | `#e9c348` |
106-
| `color.yellow.400` | `bg-yellow-400` | `--color-yellow-400` | `#d5a406` |
107-
| `color.yellow.500` | `bg-yellow-500` | `--color-yellow-500` | `#bc870d` |
108-
| `color.yellow.600` | `bg-yellow-600` | `--color-yellow-600` | `#a4670b` |
109-
| `color.yellow.700` | `bg-yellow-700` | `--color-yellow-700` | `#854901` |
110-
| `color.yellow.800` | `bg-yellow-800` | `--color-yellow-800` | `#653805` |
111-
| `color.yellow.900` | `bg-yellow-900` | `--color-yellow-900` | `#4b2c04` |
112-
| `color.yellow.1000` | `bg-yellow-1000` | `--color-yellow-1000` | `#2d1f00` |
113-
114-
### Orange
115-
116-
| Token | Tailwind | CSS | Hex |
117-
| ------------------- | ---------------- | --------------------- | --------- |
118-
| `color.orange.100` | `bg-orange-100` | `--color-orange-100` | `#fffaed` |
119-
| `color.orange.200` | `bg-orange-200` | `--color-orange-200` | `#fee3c1` |
120-
| `color.orange.300` | `bg-orange-300` | `--color-orange-300` | `#f6b981` |
121-
| `color.orange.400` | `bg-orange-400` | `--color-orange-400` | `#f19457` |
122-
| `color.orange.500` | `bg-orange-500` | `--color-orange-500` | `#da772e` |
123-
| `color.orange.600` | `bg-orange-600` | `--color-orange-600` | `#b55919` |
124-
| `color.orange.700` | `bg-orange-700` | `--color-orange-700` | `#943a14` |
125-
| `color.orange.800` | `bg-orange-800` | `--color-orange-800` | `#782612` |
126-
| `color.orange.900` | `bg-orange-900` | `--color-orange-900` | `#5d1712` |
127-
| `color.orange.1000` | `bg-orange-1000` | `--color-orange-1000` | `#420e0d` |
128-
129-
### Red
130-
131-
| Token | Tailwind | CSS | Hex |
132-
| ---------------- | ------------- | ------------------ | --------- |
133-
| `color.red.100` | `bg-red-100` | `--color-red-100` | `#fff8f3` |
134-
| `color.red.200` | `bg-red-200` | `--color-red-200` | `#fee2dd` |
135-
| `color.red.300` | `bg-red-300` | `--color-red-300` | `#fab6ad` |
136-
| `color.red.400` | `bg-red-400` | `--color-red-400` | `#fa877e` |
137-
| `color.red.500` | `bg-red-500` | `--color-red-500` | `#ed6362` |
138-
| `color.red.600` | `bg-red-600` | `--color-red-600` | `#ca414e` |
139-
| `color.red.700` | `bg-red-700` | `--color-red-700` | `#a42237` |
140-
| `color.red.800` | `bg-red-800` | `--color-red-800` | `#811436` |
141-
| `color.red.900` | `bg-red-900` | `--color-red-900` | `#630d2e` |
142-
| `color.red.1000` | `bg-red-1000` | `--color-red-1000` | `#440223` |
143-
144-
### Magenta
145-
146-
| Token | Tailwind | CSS | Hex |
147-
| -------------------- | ----------------- | ---------------------- | --------- |
148-
| `color.magenta.100` | `bg-magenta-100` | `--color-magenta-100` | `#fff8ff` |
149-
| `color.magenta.200` | `bg-magenta-200` | `--color-magenta-200` | `#fce0f8` |
150-
| `color.magenta.300` | `bg-magenta-300` | `--color-magenta-300` | `#f3b4e2` |
151-
| `color.magenta.400` | `bg-magenta-400` | `--color-magenta-400` | `#eb8acf` |
152-
| `color.magenta.500` | `bg-magenta-500` | `--color-magenta-500` | `#de66b0` |
153-
| `color.magenta.600` | `bg-magenta-600` | `--color-magenta-600` | `#be428f` |
154-
| `color.magenta.700` | `bg-magenta-700` | `--color-magenta-700` | `#952e70` |
155-
| `color.magenta.800` | `bg-magenta-800` | `--color-magenta-800` | `#751f57` |
156-
| `color.magenta.900` | `bg-magenta-900` | `--color-magenta-900` | `#5b1043` |
157-
| `color.magenta.1000` | `bg-magenta-1000` | `--color-magenta-1000` | `#3f0534` |
158-
159-
### Purple
160-
161-
| Token | Tailwind | CSS | Hex |
162-
| ------------------- | ---------------- | --------------------- | --------- |
163-
| `color.purple.100` | `bg-purple-100` | `--color-purple-100` | `#f6f9ff` |
164-
| `color.purple.200` | `bg-purple-200` | `--color-purple-200` | `#e3e3fe` |
165-
| `color.purple.300` | `bg-purple-300` | `--color-purple-300` | `#c9c3ec` |
166-
| `color.purple.400` | `bg-purple-400` | `--color-purple-400` | `#afa0e0` |
167-
| `color.purple.500` | `bg-purple-500` | `--color-purple-500` | `#9a82da` |
168-
| `color.purple.600` | `bg-purple-600` | `--color-purple-600` | `#8360c3` |
169-
| `color.purple.700` | `bg-purple-700` | `--color-purple-700` | `#61479c` |
170-
| `color.purple.800` | `bg-purple-800` | `--color-purple-800` | `#493481` |
171-
| `color.purple.900` | `bg-purple-900` | `--color-purple-900` | `#352465` |
172-
| `color.purple.1000` | `bg-purple-1000` | `--color-purple-1000` | `#1d154d` |
173-
174-
### Brown
175-
176-
| Token | Tailwind | CSS | Hex |
177-
| ------------------ | --------------- | -------------------- | --------- |
178-
| `color.brown.100` | `bg-brown-100` | `--color-brown-100` | `#f9faf4` |
179-
| `color.brown.200` | `bg-brown-200` | `--color-brown-200` | `#ece8dc` |
180-
| `color.brown.300` | `bg-brown-300` | `--color-brown-300` | `#d1c5b0` |
181-
| `color.brown.400` | `bg-brown-400` | `--color-brown-400` | `#bea889` |
182-
| `color.brown.500` | `bg-brown-500` | `--color-brown-500` | `#a98c66` |
183-
| `color.brown.600` | `bg-brown-600` | `--color-brown-600` | `#8b6d45` |
184-
| `color.brown.700` | `bg-brown-700` | `--color-brown-700` | `#6e5232` |
185-
| `color.brown.800` | `bg-brown-800` | `--color-brown-800` | `#553d28` |
186-
| `color.brown.900` | `bg-brown-900` | `--color-brown-900` | `#3f2c1e` |
187-
| `color.brown.1000` | `bg-brown-1000` | `--color-brown-1000` | `#2e1b0f` |
10+
The color system has two layers: semantic tokens for UI and primitive scales for reference.
11+
12+
| Type | Purpose | Dark mode | Use for |
13+
| ---------------- | ---------------- | ----------- | --------------- |
14+
| Semantic tokens | Convey meaning | Auto-adapts | All UI elements |
15+
| Primitive scales | Raw color values | Manual | Reference only |
16+
17+
**Always use semantic tokens** from [Tokens](./tokens.md). Primitives are in [Palette](./palette.md).
18+
19+
## Color Roles
20+
21+
| Role | Purpose | Example tokens |
22+
| ----------- | -------------------------------- | -------------------------------------------- |
23+
| Brand | Primary actions, selected states | `text-brand-default`, `bg-brand-bolder` |
24+
| Success | Positive feedback | `text-success`, `bg-success-default` |
25+
| Information | Neutral tips | `text-information`, `bg-information-default` |
26+
| Warning | Cautions | `text-warning-default`, `bg-warning-default` |
27+
| Danger | Errors, destructive actions | `text-danger`, `bg-danger-default` |
28+
| Neutral | Default UI | `text-default`, `bg-elevation-surface-default` |
29+
30+
## Accents
31+
32+
Accent colors categorize content without semantic meaning. Use for tags, labels, and project icons.
33+
34+
**Available:** Blue, Teal, Green, Yellow, Orange, Red, Magenta, Purple
35+
36+
### Emphasis Levels
37+
38+
| Element | Levels |
39+
| ---------- | --------------------------------- |
40+
| Background | subtlest, subtler, subtle, bolder |
41+
| Text/Icon | default, bolder |
42+
43+
### Pairing
44+
45+
| Background | Text/Icon to use |
46+
| ---------------- | ----------------- |
47+
| subtlest/subtler | default or bolder |
48+
| subtle | bolder |
49+
| bolder | inverse |
50+
51+
## Accessibility
52+
53+
- **3:1 contrast** for UI elements (borders, icons)
54+
- **4.5:1 contrast** for body text
55+
- Don't rely on color alone—use icons or text labels
56+
57+
## Guidelines
58+
59+
| Do | Don't |
60+
| ----------------------------------------------- | ------------------------------------- |
61+
| Use semantic tokens for meaning | Use primitives (`bg-red-500`) in UI |
62+
| Match color role to purpose | Use brand color for errors |
63+
| Pair accent foreground/background from same family | Mix blue background with red text |
64+
| Test in both light and dark mode | Assume light mode only |

0 commit comments

Comments
 (0)