Skip to content

Commit 388f6a0

Browse files
mun0602mun0602
committed
Add Design System Inspired by Airtable plugin
1 parent 5580736 commit 388f6a0

4 files changed

Lines changed: 229 additions & 0 deletions

File tree

‎plugins/community/design-system-inspired-by-airtable-mshi9jfg/SKILL.md‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
# Design System Inspired by Airtable
2+
3+
> Category: Design & Creative
4+
> Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic.
5+
6+
## 1. Visual Theme & Atmosphere
7+
8+
Airtable's website is a clean, enterprise-friendly platform that communicates "sophisticated simplicity" through a white canvas with deep navy text (`#181d26`) and Airtable Blue (`#1b61c9`) as the primary interactive accent. The Haas font family (display + text variants) creates a Swiss-precision typography system with positive letter-spacing throughout.
9+
10+
**Key Characteristics:**
11+
- White canvas with deep navy text (`#181d26`)
12+
- Airtable Blue (`#1b61c9`) as primary CTA and link color
13+
- Haas + Haas Groot Disp dual font system
14+
- Positive letter-spacing on body text (0.08px–0.28px)
15+
- 12px radius buttons, 16px–32px for cards
16+
- Multi-layer blue-tinted shadow: `rgba(45,127,249,0.28) 0px 1px 3px`
17+
- Semantic theme tokens: `--theme_*` CSS variable naming
18+
19+
## 2. Color Palette & Roles
20+
21+
### Primary
22+
- **Deep Navy** (`#181d26`): Primary text
23+
- **Airtable Blue** (`#1b61c9`): CTA buttons, links
24+
- **White** (`#ffffff`): Primary surface
25+
- **Spotlight** (`rgba(249,252,255,0.97)`): `--theme_button-text-spotlight`
26+
27+
### Semantic
28+
- **Success Green** (`#006400`): `--theme_success-text`
29+
- **Weak Text** (`rgba(4,14,32,0.69)`): `--theme_text-weak`
30+
- **Secondary Active** (`rgba(7,12,20,0.82)`): `--theme_button-text-secondary-active`
31+
32+
### Neutral
33+
- **Dark Gray** (`#333333`): Secondary text
34+
- **Mid Blue** (`#254fad`): Link/accent blue variant
35+
- **Border** (`#e0e2e6`): Card borders
36+
- **Light Surface** (`#f8fafc`): Subtle surface
37+
38+
### Shadows
39+
- **Blue-tinted** (`rgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px, rgba(45,127,249,0.28) 0px 1px 3px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset`)
40+
- **Soft** (`rgba(15,48,106,0.05) 0px 0px 20px`)
41+
42+
## 3. Typography Rules
43+
44+
### Font Families
45+
- **Primary**: `Haas`, fallbacks: `-apple-system, system-ui, Segoe UI, Roboto`
46+
- **Display**: `Haas Groot Disp`, fallback: `Haas`
47+
48+
### Hierarchy
49+
50+
| Role | Font | Size | Weight | Line Height | Letter Spacing |
51+
|------|------|------|--------|-------------|----------------|
52+
| Display Hero | Haas | 48px | 400 | 1.15 | normal |
53+
| Display Bold | Haas Groot Disp | 48px | 900 | 1.50 | normal |
54+
| Section Heading | Haas | 40px | 400 | 1.25 | normal |
55+
| Sub-heading | Haas | 32px | 400–500 | 1.15–1.25 | normal |
56+
| Card Title | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
57+
| Feature | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
58+
| Body | Haas | 18px | 400 | 1.35 | 0.18px |
59+
| Body Medium | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
60+
| Button | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
61+
| Caption | Haas | 14px | 400–500 | 1.25–1.35 | 0.07–0.28px |
62+
63+
## 4. Component Stylings
64+
65+
### Buttons
66+
- **Primary Blue**: `#1b61c9`, white text, 16px 24px padding, 12px radius
67+
- **White**: white bg, `#181d26` text, 12px radius, 1px border white
68+
- **Cookie Consent**: `#1b61c9` bg, 2px radius (sharp)
69+
70+
### Cards: `1px solid #e0e2e6`, 16px–24px radius
71+
### Inputs: Standard Haas styling
72+
73+
## 5. Layout
74+
- Spacing: 1–48px (8px base)
75+
- Radius: 2px (small), 12px (buttons), 16px (cards), 24px (sections), 32px (large), 50% (circles)
76+
77+
## 6. Depth
78+
- Blue-tinted multi-layer shadow system
79+
- Soft ambient: `rgba(15,48,106,0.05) 0px 0px 20px`
80+
81+
## 7. Do's and Don'ts
82+
### Do: Use Airtable Blue for CTAs, Haas with positive tracking, 12px radius buttons
83+
### Don't: Skip positive letter-spacing, use heavy shadows
84+
85+
## 8. Responsive Behavior
86+
Breakpoints: 425–1664px (23 breakpoints)
87+
88+
## 9. Agent Prompt Guide
89+
- Text: Deep Navy (`#181d26`)
90+
- CTA: Airtable Blue (`#1b61c9`)
91+
- Background: White (`#ffffff`)
92+
- Border: `#e0e2e6`
93+
94+
## Provenance
95+
96+
Formalized by Open Design from candidate bf8d9a70-81b8-47f4-b93a-87b2b1d6937f.

‎plugins/community/design-system-inspired-by-airtable-mshi9jfg/open-design.json‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"$schema": "https://open-design.ai/schemas/plugin.v1.json",
3+
"specVersion": "1.0.0",
4+
"name": "design-system-inspired-by-airtable-mshi9jfg",
5+
"title": "Design System Inspired by Airtable",
6+
"version": "0.1.0",
7+
"description": "> Category: Design & Creative > Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic.",
8+
"od": {
9+
"kind": "skill",
10+
"taskKind": "new-generation",
11+
"context": {
12+
"skills": [
13+
{
14+
"path": "./SKILL.md"
15+
}
16+
]
17+
},
18+
"capabilities": [
19+
"prompt:inject"
20+
]
21+
}
22+
}

‎plugins/community/design-system-inspired-by-airtable-mshi9jfg/references/provenance.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"candidateId": "bf8d9a70-81b8-47f4-b93a-87b2b1d6937f",
3+
"projectId": "brand-apple-5b9ab6",
4+
"runId": "176e1cb1-9ee3-43d6-bbfc-a672eb283d35",
5+
"conversationId": "14e79e2d-e1ea-468a-a2af-60a1c6c90d86",
6+
"provenance": {
7+
"summary": "Detected from context/input-DESIGN.md after a successful run.",
8+
"detectedAt": 1786020108014
9+
},
10+
"sourceRefs": [
11+
{
12+
"kind": "file",
13+
"value": "context/input-DESIGN.md",
14+
"label": "context/input-DESIGN.md",
15+
"size": 3664,
16+
"copied": true
17+
}
18+
]
19+
}

‎plugins/community/design-system-inspired-by-airtable-mshi9jfg/references/source-1-input-DESIGN.md‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
# Design System Inspired by Airtable
2+
3+
> Category: Design & Creative
4+
> Spreadsheet-database hybrid. Colorful, friendly, structured data aesthetic.
5+
6+
## 1. Visual Theme & Atmosphere
7+
8+
Airtable's website is a clean, enterprise-friendly platform that communicates "sophisticated simplicity" through a white canvas with deep navy text (`#181d26`) and Airtable Blue (`#1b61c9`) as the primary interactive accent. The Haas font family (display + text variants) creates a Swiss-precision typography system with positive letter-spacing throughout.
9+
10+
**Key Characteristics:**
11+
- White canvas with deep navy text (`#181d26`)
12+
- Airtable Blue (`#1b61c9`) as primary CTA and link color
13+
- Haas + Haas Groot Disp dual font system
14+
- Positive letter-spacing on body text (0.08px–0.28px)
15+
- 12px radius buttons, 16px–32px for cards
16+
- Multi-layer blue-tinted shadow: `rgba(45,127,249,0.28) 0px 1px 3px`
17+
- Semantic theme tokens: `--theme_*` CSS variable naming
18+
19+
## 2. Color Palette & Roles
20+
21+
### Primary
22+
- **Deep Navy** (`#181d26`): Primary text
23+
- **Airtable Blue** (`#1b61c9`): CTA buttons, links
24+
- **White** (`#ffffff`): Primary surface
25+
- **Spotlight** (`rgba(249,252,255,0.97)`): `--theme_button-text-spotlight`
26+
27+
### Semantic
28+
- **Success Green** (`#006400`): `--theme_success-text`
29+
- **Weak Text** (`rgba(4,14,32,0.69)`): `--theme_text-weak`
30+
- **Secondary Active** (`rgba(7,12,20,0.82)`): `--theme_button-text-secondary-active`
31+
32+
### Neutral
33+
- **Dark Gray** (`#333333`): Secondary text
34+
- **Mid Blue** (`#254fad`): Link/accent blue variant
35+
- **Border** (`#e0e2e6`): Card borders
36+
- **Light Surface** (`#f8fafc`): Subtle surface
37+
38+
### Shadows
39+
- **Blue-tinted** (`rgba(0,0,0,0.32) 0px 0px 1px, rgba(0,0,0,0.08) 0px 0px 2px, rgba(45,127,249,0.28) 0px 1px 3px, rgba(0,0,0,0.06) 0px 0px 0px 0.5px inset`)
40+
- **Soft** (`rgba(15,48,106,0.05) 0px 0px 20px`)
41+
42+
## 3. Typography Rules
43+
44+
### Font Families
45+
- **Primary**: `Haas`, fallbacks: `-apple-system, system-ui, Segoe UI, Roboto`
46+
- **Display**: `Haas Groot Disp`, fallback: `Haas`
47+
48+
### Hierarchy
49+
50+
| Role | Font | Size | Weight | Line Height | Letter Spacing |
51+
|------|------|------|--------|-------------|----------------|
52+
| Display Hero | Haas | 48px | 400 | 1.15 | normal |
53+
| Display Bold | Haas Groot Disp | 48px | 900 | 1.50 | normal |
54+
| Section Heading | Haas | 40px | 400 | 1.25 | normal |
55+
| Sub-heading | Haas | 32px | 400–500 | 1.15–1.25 | normal |
56+
| Card Title | Haas | 24px | 400 | 1.20–1.30 | 0.12px |
57+
| Feature | Haas | 20px | 400 | 1.25–1.50 | 0.1px |
58+
| Body | Haas | 18px | 400 | 1.35 | 0.18px |
59+
| Body Medium | Haas | 16px | 500 | 1.30 | 0.08–0.16px |
60+
| Button | Haas | 16px | 500 | 1.25–1.30 | 0.08px |
61+
| Caption | Haas | 14px | 400–500 | 1.25–1.35 | 0.07–0.28px |
62+
63+
## 4. Component Stylings
64+
65+
### Buttons
66+
- **Primary Blue**: `#1b61c9`, white text, 16px 24px padding, 12px radius
67+
- **White**: white bg, `#181d26` text, 12px radius, 1px border white
68+
- **Cookie Consent**: `#1b61c9` bg, 2px radius (sharp)
69+
70+
### Cards: `1px solid #e0e2e6`, 16px–24px radius
71+
### Inputs: Standard Haas styling
72+
73+
## 5. Layout
74+
- Spacing: 1–48px (8px base)
75+
- Radius: 2px (small), 12px (buttons), 16px (cards), 24px (sections), 32px (large), 50% (circles)
76+
77+
## 6. Depth
78+
- Blue-tinted multi-layer shadow system
79+
- Soft ambient: `rgba(15,48,106,0.05) 0px 0px 20px`
80+
81+
## 7. Do's and Don'ts
82+
### Do: Use Airtable Blue for CTAs, Haas with positive tracking, 12px radius buttons
83+
### Don't: Skip positive letter-spacing, use heavy shadows
84+
85+
## 8. Responsive Behavior
86+
Breakpoints: 425–1664px (23 breakpoints)
87+
88+
## 9. Agent Prompt Guide
89+
- Text: Deep Navy (`#181d26`)
90+
- CTA: Airtable Blue (`#1b61c9`)
91+
- Background: White (`#ffffff`)
92+
- Border: `#e0e2e6`

0 commit comments

Comments
 (0)