oh-pi 0.1.32 → 0.1.33
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/package.json +1 -1
- package/pi-package/skills/claymorphism/SKILL.md +118 -0
- package/pi-package/skills/claymorphism/references/tokens.css +52 -0
- package/pi-package/skills/glassmorphism/SKILL.md +139 -0
- package/pi-package/skills/glassmorphism/references/tokens.css +32 -0
- package/pi-package/skills/liquid-glass/SKILL.md +134 -0
- package/pi-package/skills/liquid-glass/references/tokens.css +81 -0
- package/pi-package/skills/neubrutalism/SKILL.md +142 -0
- package/pi-package/skills/neubrutalism/references/tokens.css +44 -0
package/package.json
CHANGED
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: claymorphism
|
|
3
|
+
description: Claymorphism design system skill. Use when building soft, puffy, clay-like UI components with large radii, dual inner shadows, and offset outer shadows.
|
|
4
|
+
version: 1.0.0
|
|
5
|
+
tags: [design, css, ui, claymorphism]
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Claymorphism Design Spec
|
|
9
|
+
|
|
10
|
+
## 3 Core Elements
|
|
11
|
+
|
|
12
|
+
1. **Large Radius** — Generous `border-radius` (20–50px) for a puffy, inflated look
|
|
13
|
+
2. **Dual Inner Shadows** — Light inset from top-left + dark inset from bottom-right to simulate 3D clay surface
|
|
14
|
+
3. **Offset Outer Shadow** — Directional `box-shadow` offset (not centered) to ground the element
|
|
15
|
+
|
|
16
|
+
## CSS Tokens
|
|
17
|
+
|
|
18
|
+
Reference: [references/tokens.css](references/tokens.css)
|
|
19
|
+
|
|
20
|
+
```css
|
|
21
|
+
@import 'references/tokens.css';
|
|
22
|
+
|
|
23
|
+
.clay-card {
|
|
24
|
+
background: var(--clay-bg-card);
|
|
25
|
+
border-radius: var(--clay-radius-lg);
|
|
26
|
+
box-shadow: var(--clay-shadow);
|
|
27
|
+
color: var(--clay-text);
|
|
28
|
+
}
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Component Examples
|
|
32
|
+
|
|
33
|
+
### Card
|
|
34
|
+
```css
|
|
35
|
+
.clay-card {
|
|
36
|
+
background: var(--clay-bg-card);
|
|
37
|
+
border-radius: var(--clay-radius-lg);
|
|
38
|
+
box-shadow: var(--clay-shadow);
|
|
39
|
+
padding: 1.5rem;
|
|
40
|
+
color: var(--clay-text);
|
|
41
|
+
}
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### Button
|
|
45
|
+
```css
|
|
46
|
+
.clay-btn {
|
|
47
|
+
background: var(--clay-bg-button);
|
|
48
|
+
border: none;
|
|
49
|
+
border-radius: var(--clay-radius-pill);
|
|
50
|
+
box-shadow: var(--clay-shadow);
|
|
51
|
+
padding: 0.75rem 1.5rem;
|
|
52
|
+
color: var(--clay-text);
|
|
53
|
+
cursor: pointer;
|
|
54
|
+
transition: box-shadow 0.2s;
|
|
55
|
+
}
|
|
56
|
+
.clay-btn:hover {
|
|
57
|
+
box-shadow: var(--clay-shadow-elevated);
|
|
58
|
+
}
|
|
59
|
+
.clay-btn:active {
|
|
60
|
+
box-shadow: var(--clay-shadow-pressed);
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
### Input
|
|
65
|
+
```css
|
|
66
|
+
.clay-input {
|
|
67
|
+
background: var(--clay-bg);
|
|
68
|
+
border: none;
|
|
69
|
+
border-radius: var(--clay-radius);
|
|
70
|
+
box-shadow: var(--clay-shadow-pressed);
|
|
71
|
+
padding: 0.75rem 1rem;
|
|
72
|
+
color: var(--clay-text);
|
|
73
|
+
}
|
|
74
|
+
.clay-input:focus {
|
|
75
|
+
outline: 2px solid var(--clay-accent);
|
|
76
|
+
outline-offset: 2px;
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
### Toggle
|
|
81
|
+
```css
|
|
82
|
+
.clay-toggle {
|
|
83
|
+
width: 56px;
|
|
84
|
+
height: 30px;
|
|
85
|
+
background: var(--clay-bg-card);
|
|
86
|
+
border-radius: var(--clay-radius-pill);
|
|
87
|
+
box-shadow: var(--clay-shadow-pressed);
|
|
88
|
+
}
|
|
89
|
+
.clay-toggle-knob {
|
|
90
|
+
width: 24px;
|
|
91
|
+
height: 24px;
|
|
92
|
+
background: var(--clay-bg);
|
|
93
|
+
border-radius: 50%;
|
|
94
|
+
box-shadow: var(--clay-shadow);
|
|
95
|
+
transition: transform 0.2s;
|
|
96
|
+
}
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
## Dark Mode Notes
|
|
100
|
+
|
|
101
|
+
- Dark mode reduces inner highlight intensity (`rgba(255,255,255,0.05)` vs `0.6`) to avoid glowing artifacts
|
|
102
|
+
- Outer shadow opacity increases to maintain depth on dark backgrounds
|
|
103
|
+
- Background colors shift to warm dark tones — avoid pure black to preserve the clay feel
|
|
104
|
+
- All dark tokens are defined in `[data-theme="dark"]` in `tokens.css`
|
|
105
|
+
|
|
106
|
+
## Accessibility Notes
|
|
107
|
+
|
|
108
|
+
- Ensure **contrast ratio ≥ 4.5:1** for text — clay backgrounds are muted, verify against `--clay-text`
|
|
109
|
+
- Provide visible `:focus` outlines since clay shadows alone don't indicate focus
|
|
110
|
+
- Use `prefers-contrast: more` to flatten shadows and increase text contrast
|
|
111
|
+
|
|
112
|
+
```css
|
|
113
|
+
@media (prefers-contrast: more) {
|
|
114
|
+
.clay-card {
|
|
115
|
+
box-shadow: 0 0 0 2px var(--clay-text);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
```
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* Backgrounds — soft, muted pastels */
|
|
3
|
+
--clay-bg: #f0e6db;
|
|
4
|
+
--clay-bg-card: #e8ddd4;
|
|
5
|
+
--clay-bg-button: #d4c4b0;
|
|
6
|
+
--clay-accent: #c4a882;
|
|
7
|
+
|
|
8
|
+
/* Radius — large, rounded, puffy */
|
|
9
|
+
--clay-radius: 20px;
|
|
10
|
+
--clay-radius-lg: 32px;
|
|
11
|
+
--clay-radius-pill: 50px;
|
|
12
|
+
|
|
13
|
+
/* Shadows — dual inner + offset outer */
|
|
14
|
+
--clay-shadow:
|
|
15
|
+
8px 8px 16px rgba(0, 0, 0, 0.12),
|
|
16
|
+
inset -4px -4px 8px rgba(0, 0, 0, 0.08),
|
|
17
|
+
inset 4px 4px 8px rgba(255, 255, 255, 0.6);
|
|
18
|
+
--clay-shadow-elevated:
|
|
19
|
+
12px 12px 24px rgba(0, 0, 0, 0.15),
|
|
20
|
+
inset -6px -6px 12px rgba(0, 0, 0, 0.1),
|
|
21
|
+
inset 6px 6px 12px rgba(255, 255, 255, 0.7);
|
|
22
|
+
--clay-shadow-pressed:
|
|
23
|
+
2px 2px 6px rgba(0, 0, 0, 0.1),
|
|
24
|
+
inset -6px -6px 12px rgba(0, 0, 0, 0.12),
|
|
25
|
+
inset 6px 6px 12px rgba(255, 255, 255, 0.5);
|
|
26
|
+
|
|
27
|
+
/* Text */
|
|
28
|
+
--clay-text: #4a3f35;
|
|
29
|
+
--clay-text-muted: #8a7e72;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* Dark mode */
|
|
33
|
+
[data-theme="dark"] {
|
|
34
|
+
--clay-bg: #2a2520;
|
|
35
|
+
--clay-bg-card: #352f28;
|
|
36
|
+
--clay-bg-button: #443c33;
|
|
37
|
+
--clay-accent: #6b5d4f;
|
|
38
|
+
--clay-shadow:
|
|
39
|
+
8px 8px 16px rgba(0, 0, 0, 0.35),
|
|
40
|
+
inset -4px -4px 8px rgba(0, 0, 0, 0.25),
|
|
41
|
+
inset 4px 4px 8px rgba(255, 255, 255, 0.05);
|
|
42
|
+
--clay-shadow-elevated:
|
|
43
|
+
12px 12px 24px rgba(0, 0, 0, 0.4),
|
|
44
|
+
inset -6px -6px 12px rgba(0, 0, 0, 0.3),
|
|
45
|
+
inset 6px 6px 12px rgba(255, 255, 255, 0.06);
|
|
46
|
+
--clay-shadow-pressed:
|
|
47
|
+
2px 2px 6px rgba(0, 0, 0, 0.3),
|
|
48
|
+
inset -6px -6px 12px rgba(0, 0, 0, 0.35),
|
|
49
|
+
inset 6px 6px 12px rgba(255, 255, 255, 0.04);
|
|
50
|
+
--clay-text: #d4c8bc;
|
|
51
|
+
--clay-text-muted: #8a7e72;
|
|
52
|
+
}
|
|
@@ -0,0 +1,139 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: glassmorphism
|
|
3
|
+
description: Glassmorphism design system skill. Use when building frosted-glass UI components with blur, transparency, and layered depth effects.
|
|
4
|
+
version: 1.0.0
|
|
5
|
+
tags: [design, css, ui, glassmorphism]
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Glassmorphism Design Spec
|
|
9
|
+
|
|
10
|
+
## 4 Core Elements
|
|
11
|
+
|
|
12
|
+
1. **Transparency** — Semi-transparent backgrounds using `rgba()` or `hsla()` with alpha `0.05–0.4`
|
|
13
|
+
2. **Blur** — `backdrop-filter: blur()` ranging 8–40px for frosted-glass effect
|
|
14
|
+
3. **Border** — Subtle semi-transparent borders (`1px solid rgba(255,255,255,0.18)`) to define edges
|
|
15
|
+
4. **Shadow** — Soft layered `box-shadow` for depth separation from background
|
|
16
|
+
|
|
17
|
+
## CSS Tokens
|
|
18
|
+
|
|
19
|
+
Reference: [references/tokens.css](references/tokens.css)
|
|
20
|
+
|
|
21
|
+
Use CSS custom properties from `tokens.css` for consistent theming:
|
|
22
|
+
|
|
23
|
+
```css
|
|
24
|
+
@import 'references/tokens.css';
|
|
25
|
+
|
|
26
|
+
.glass-card {
|
|
27
|
+
background: var(--glass-bg);
|
|
28
|
+
backdrop-filter: var(--glass-blur);
|
|
29
|
+
-webkit-backdrop-filter: var(--glass-blur);
|
|
30
|
+
border: var(--glass-border);
|
|
31
|
+
border-radius: var(--glass-radius);
|
|
32
|
+
box-shadow: var(--glass-shadow);
|
|
33
|
+
}
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
## Component Examples
|
|
37
|
+
|
|
38
|
+
### Card
|
|
39
|
+
```css
|
|
40
|
+
.glass-card {
|
|
41
|
+
background: var(--glass-bg);
|
|
42
|
+
backdrop-filter: var(--glass-blur);
|
|
43
|
+
-webkit-backdrop-filter: var(--glass-blur);
|
|
44
|
+
border: var(--glass-border);
|
|
45
|
+
border-radius: var(--glass-radius);
|
|
46
|
+
box-shadow: var(--glass-shadow);
|
|
47
|
+
padding: 1.5rem;
|
|
48
|
+
}
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
### Navbar
|
|
52
|
+
```css
|
|
53
|
+
.glass-nav {
|
|
54
|
+
background: var(--glass-bg-heavy);
|
|
55
|
+
backdrop-filter: var(--glass-blur-strong);
|
|
56
|
+
-webkit-backdrop-filter: var(--glass-blur-strong);
|
|
57
|
+
border-bottom: var(--glass-border);
|
|
58
|
+
box-shadow: var(--glass-shadow);
|
|
59
|
+
position: sticky;
|
|
60
|
+
top: 0;
|
|
61
|
+
z-index: 100;
|
|
62
|
+
}
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
### Modal Overlay
|
|
66
|
+
```css
|
|
67
|
+
.glass-modal-backdrop {
|
|
68
|
+
background: rgba(0, 0, 0, 0.4);
|
|
69
|
+
backdrop-filter: blur(4px);
|
|
70
|
+
}
|
|
71
|
+
.glass-modal {
|
|
72
|
+
background: var(--glass-bg-heavy);
|
|
73
|
+
backdrop-filter: var(--glass-blur-strong);
|
|
74
|
+
-webkit-backdrop-filter: var(--glass-blur-strong);
|
|
75
|
+
border: var(--glass-border);
|
|
76
|
+
border-radius: var(--glass-radius-lg);
|
|
77
|
+
box-shadow: var(--glass-shadow-elevated);
|
|
78
|
+
}
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### Button
|
|
82
|
+
```css
|
|
83
|
+
.glass-btn {
|
|
84
|
+
background: var(--glass-bg-light);
|
|
85
|
+
backdrop-filter: var(--glass-blur-light);
|
|
86
|
+
-webkit-backdrop-filter: var(--glass-blur-light);
|
|
87
|
+
border: var(--glass-border);
|
|
88
|
+
border-radius: var(--glass-radius);
|
|
89
|
+
transition: background 0.2s;
|
|
90
|
+
}
|
|
91
|
+
.glass-btn:hover {
|
|
92
|
+
background: var(--glass-bg);
|
|
93
|
+
}
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
## Browser Compatibility
|
|
97
|
+
|
|
98
|
+
| Feature | Chrome | Firefox | Safari | Edge |
|
|
99
|
+
|---------|--------|---------|--------|------|
|
|
100
|
+
| `backdrop-filter` | 76+ | 103+ | 9+ (`-webkit-`) | 79+ |
|
|
101
|
+
| `rgba()` backgrounds | All | All | All | All |
|
|
102
|
+
|
|
103
|
+
- Always include `-webkit-backdrop-filter` for Safari support
|
|
104
|
+
- Firefox <103: use `@supports` fallback with solid semi-transparent bg
|
|
105
|
+
- Fallback pattern:
|
|
106
|
+
|
|
107
|
+
```css
|
|
108
|
+
.glass-card {
|
|
109
|
+
background: rgba(255, 255, 255, 0.85); /* fallback */
|
|
110
|
+
}
|
|
111
|
+
@supports (backdrop-filter: blur(1px)) {
|
|
112
|
+
.glass-card {
|
|
113
|
+
background: var(--glass-bg);
|
|
114
|
+
backdrop-filter: var(--glass-blur);
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
## Accessibility Notes
|
|
120
|
+
|
|
121
|
+
- Ensure **contrast ratio ≥ 4.5:1** for text over glass surfaces — test against all possible backgrounds
|
|
122
|
+
- Provide `prefers-reduced-transparency` media query to disable blur/transparency for users who need it
|
|
123
|
+
- Avoid placing critical text on highly transparent surfaces without a fallback
|
|
124
|
+
- Use `prefers-contrast: more` to increase border opacity and reduce transparency
|
|
125
|
+
|
|
126
|
+
```css
|
|
127
|
+
@media (prefers-reduced-transparency: reduce) {
|
|
128
|
+
.glass-card {
|
|
129
|
+
background: rgba(255, 255, 255, 0.92);
|
|
130
|
+
backdrop-filter: none;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
@media (prefers-contrast: more) {
|
|
134
|
+
.glass-card {
|
|
135
|
+
background: rgba(255, 255, 255, 0.85);
|
|
136
|
+
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
```
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* Backgrounds */
|
|
3
|
+
--glass-bg-light: rgba(255, 255, 255, 0.08);
|
|
4
|
+
--glass-bg: rgba(255, 255, 255, 0.15);
|
|
5
|
+
--glass-bg-heavy: rgba(255, 255, 255, 0.25);
|
|
6
|
+
|
|
7
|
+
/* Blur */
|
|
8
|
+
--glass-blur-light: blur(8px);
|
|
9
|
+
--glass-blur: blur(16px);
|
|
10
|
+
--glass-blur-strong: blur(32px);
|
|
11
|
+
|
|
12
|
+
/* Border */
|
|
13
|
+
--glass-border: 1px solid rgba(255, 255, 255, 0.18);
|
|
14
|
+
|
|
15
|
+
/* Radius */
|
|
16
|
+
--glass-radius: 12px;
|
|
17
|
+
--glass-radius-lg: 20px;
|
|
18
|
+
|
|
19
|
+
/* Shadow */
|
|
20
|
+
--glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
|
|
21
|
+
--glass-shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.15);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
/* Dark theme overrides */
|
|
25
|
+
[data-theme="dark"] {
|
|
26
|
+
--glass-bg-light: rgba(255, 255, 255, 0.04);
|
|
27
|
+
--glass-bg: rgba(255, 255, 255, 0.08);
|
|
28
|
+
--glass-bg-heavy: rgba(255, 255, 255, 0.14);
|
|
29
|
+
--glass-border: 1px solid rgba(255, 255, 255, 0.12);
|
|
30
|
+
--glass-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
|
|
31
|
+
--glass-shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.4);
|
|
32
|
+
}
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: liquid-glass
|
|
3
|
+
description: Apple Liquid Glass design system. Use when building UI with translucent, depth-aware glass morphism following Apple's design language. Provides CSS tokens, component patterns, dark/light mode, and animation specs.
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
# Liquid Glass Design System
|
|
7
|
+
|
|
8
|
+
Apple-inspired translucent glass UI with depth, refraction, and ambient light response.
|
|
9
|
+
|
|
10
|
+
## Core Principles
|
|
11
|
+
|
|
12
|
+
1. **Translucency** — Surfaces reveal layered content beneath via backdrop blur
|
|
13
|
+
2. **Depth** — Elements float on distinct z-layers with realistic shadows
|
|
14
|
+
3. **Ambient Response** — Glass tints shift based on underlying content color
|
|
15
|
+
4. **Minimal Chrome** — Borders are subtle; shape and blur define boundaries
|
|
16
|
+
5. **Motion** — Transitions feel physical: spring-based, with inertia
|
|
17
|
+
|
|
18
|
+
## Usage
|
|
19
|
+
|
|
20
|
+
Import the token file in your CSS:
|
|
21
|
+
|
|
22
|
+
```css
|
|
23
|
+
@import 'references/tokens.css';
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
## CSS Tokens Reference
|
|
27
|
+
|
|
28
|
+
All tokens are defined in `references/tokens.css`. Key categories:
|
|
29
|
+
|
|
30
|
+
| Category | Prefix | Example |
|
|
31
|
+
|---|---|---|
|
|
32
|
+
| Glass backgrounds | `--lg-bg-*` | `--lg-bg-primary` |
|
|
33
|
+
| Blur | `--lg-blur-*` | `--lg-blur-md` |
|
|
34
|
+
| Borders | `--lg-border-*` | `--lg-border-color` |
|
|
35
|
+
| Shadows | `--lg-shadow-*` | `--lg-shadow-elevated` |
|
|
36
|
+
| Radius | `--lg-radius-*` | `--lg-radius-lg` |
|
|
37
|
+
| Animation | `--lg-duration-*` | `--lg-duration-normal` |
|
|
38
|
+
|
|
39
|
+
## Component Patterns
|
|
40
|
+
|
|
41
|
+
### Glass Card
|
|
42
|
+
|
|
43
|
+
```css
|
|
44
|
+
.glass-card {
|
|
45
|
+
background: var(--lg-bg-primary);
|
|
46
|
+
backdrop-filter: blur(var(--lg-blur-md));
|
|
47
|
+
-webkit-backdrop-filter: blur(var(--lg-blur-md));
|
|
48
|
+
border: 1px solid var(--lg-border-color);
|
|
49
|
+
border-radius: var(--lg-radius-lg);
|
|
50
|
+
box-shadow: var(--lg-shadow-elevated);
|
|
51
|
+
transition: transform var(--lg-duration-normal) var(--lg-easing-spring);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.glass-card:hover {
|
|
55
|
+
transform: translateY(-2px);
|
|
56
|
+
box-shadow: var(--lg-shadow-high);
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
### Glass Toolbar
|
|
61
|
+
|
|
62
|
+
```css
|
|
63
|
+
.glass-toolbar {
|
|
64
|
+
background: var(--lg-bg-toolbar);
|
|
65
|
+
backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-saturate));
|
|
66
|
+
-webkit-backdrop-filter: blur(var(--lg-blur-lg)) saturate(var(--lg-saturate));
|
|
67
|
+
border-bottom: 1px solid var(--lg-border-subtle);
|
|
68
|
+
}
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Glass Button
|
|
72
|
+
|
|
73
|
+
```css
|
|
74
|
+
.glass-btn {
|
|
75
|
+
background: var(--lg-bg-interactive);
|
|
76
|
+
backdrop-filter: blur(var(--lg-blur-sm));
|
|
77
|
+
border: 1px solid var(--lg-border-color);
|
|
78
|
+
border-radius: var(--lg-radius-md);
|
|
79
|
+
transition: all var(--lg-duration-fast) var(--lg-easing-spring);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.glass-btn:active {
|
|
83
|
+
transform: scale(0.97);
|
|
84
|
+
background: var(--lg-bg-pressed);
|
|
85
|
+
}
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
### Glass Modal Overlay
|
|
89
|
+
|
|
90
|
+
```css
|
|
91
|
+
.glass-overlay {
|
|
92
|
+
background: var(--lg-bg-scrim);
|
|
93
|
+
backdrop-filter: blur(var(--lg-blur-xl));
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.glass-modal {
|
|
97
|
+
background: var(--lg-bg-elevated);
|
|
98
|
+
border: 1px solid var(--lg-border-color);
|
|
99
|
+
border-radius: var(--lg-radius-xl);
|
|
100
|
+
box-shadow: var(--lg-shadow-high);
|
|
101
|
+
}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## Dark / Light Mode
|
|
105
|
+
|
|
106
|
+
Tokens auto-switch via `prefers-color-scheme`. Light mode uses white-tinted glass; dark mode uses dark-tinted glass with higher blur to maintain readability.
|
|
107
|
+
|
|
108
|
+
```css
|
|
109
|
+
/* Force a mode on a subtree */
|
|
110
|
+
.light-glass { color-scheme: light; }
|
|
111
|
+
.dark-glass { color-scheme: dark; }
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
## Animations
|
|
115
|
+
|
|
116
|
+
Use spring-based easing for physical feel:
|
|
117
|
+
|
|
118
|
+
```css
|
|
119
|
+
/* Entry */
|
|
120
|
+
@keyframes glass-enter {
|
|
121
|
+
from { opacity: 0; transform: scale(0.95) translateY(8px); }
|
|
122
|
+
to { opacity: 1; transform: scale(1) translateY(0); }
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.glass-animate-in {
|
|
126
|
+
animation: glass-enter var(--lg-duration-normal) var(--lg-easing-spring) both;
|
|
127
|
+
}
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
## Accessibility
|
|
131
|
+
|
|
132
|
+
- Ensure `contrast-ratio ≥ 4.5:1` for text over glass surfaces
|
|
133
|
+
- Respect `prefers-reduced-motion` — disable blur animations, use opacity-only transitions
|
|
134
|
+
- Provide `prefers-contrast: high` overrides that replace translucent backgrounds with solid ones
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
/* Liquid Glass Design Tokens */
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
color-scheme: light dark;
|
|
5
|
+
|
|
6
|
+
/* Blur */
|
|
7
|
+
--lg-blur-sm: 8px;
|
|
8
|
+
--lg-blur-md: 16px;
|
|
9
|
+
--lg-blur-lg: 32px;
|
|
10
|
+
--lg-blur-xl: 48px;
|
|
11
|
+
|
|
12
|
+
/* Saturation */
|
|
13
|
+
--lg-saturate: 1.8;
|
|
14
|
+
|
|
15
|
+
/* Radius */
|
|
16
|
+
--lg-radius-sm: 8px;
|
|
17
|
+
--lg-radius-md: 12px;
|
|
18
|
+
--lg-radius-lg: 16px;
|
|
19
|
+
--lg-radius-xl: 24px;
|
|
20
|
+
|
|
21
|
+
/* Shadows */
|
|
22
|
+
--lg-shadow-subtle: 0 1px 3px rgba(0,0,0,0.08);
|
|
23
|
+
--lg-shadow-elevated: 0 4px 16px rgba(0,0,0,0.1);
|
|
24
|
+
--lg-shadow-high: 0 8px 32px rgba(0,0,0,0.15);
|
|
25
|
+
|
|
26
|
+
/* Animation */
|
|
27
|
+
--lg-duration-fast: 150ms;
|
|
28
|
+
--lg-duration-normal: 300ms;
|
|
29
|
+
--lg-duration-slow: 500ms;
|
|
30
|
+
--lg-easing-spring: cubic-bezier(0.22, 1, 0.36, 1);
|
|
31
|
+
|
|
32
|
+
/* Light mode (default) */
|
|
33
|
+
--lg-bg-primary: rgba(255,255,255,0.72);
|
|
34
|
+
--lg-bg-elevated: rgba(255,255,255,0.82);
|
|
35
|
+
--lg-bg-toolbar: rgba(255,255,255,0.65);
|
|
36
|
+
--lg-bg-interactive: rgba(255,255,255,0.5);
|
|
37
|
+
--lg-bg-pressed: rgba(255,255,255,0.35);
|
|
38
|
+
--lg-bg-scrim: rgba(0,0,0,0.25);
|
|
39
|
+
--lg-border-color: rgba(255,255,255,0.45);
|
|
40
|
+
--lg-border-subtle: rgba(0,0,0,0.06);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@media (prefers-color-scheme: dark) {
|
|
44
|
+
:root {
|
|
45
|
+
--lg-bg-primary: rgba(30,30,30,0.65);
|
|
46
|
+
--lg-bg-elevated: rgba(40,40,40,0.75);
|
|
47
|
+
--lg-bg-toolbar: rgba(25,25,25,0.6);
|
|
48
|
+
--lg-bg-interactive: rgba(255,255,255,0.1);
|
|
49
|
+
--lg-bg-pressed: rgba(255,255,255,0.06);
|
|
50
|
+
--lg-bg-scrim: rgba(0,0,0,0.5);
|
|
51
|
+
--lg-border-color: rgba(255,255,255,0.12);
|
|
52
|
+
--lg-border-subtle: rgba(255,255,255,0.06);
|
|
53
|
+
--lg-shadow-subtle: 0 1px 3px rgba(0,0,0,0.3);
|
|
54
|
+
--lg-shadow-elevated: 0 4px 16px rgba(0,0,0,0.4);
|
|
55
|
+
--lg-shadow-high: 0 8px 32px rgba(0,0,0,0.5);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
@media (prefers-contrast: high) {
|
|
60
|
+
:root {
|
|
61
|
+
--lg-bg-primary: rgba(255,255,255,0.95);
|
|
62
|
+
--lg-bg-elevated: rgba(255,255,255,0.98);
|
|
63
|
+
--lg-border-color: rgba(0,0,0,0.3);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
@media (prefers-contrast: high) and (prefers-color-scheme: dark) {
|
|
68
|
+
:root {
|
|
69
|
+
--lg-bg-primary: rgba(20,20,20,0.95);
|
|
70
|
+
--lg-bg-elevated: rgba(25,25,25,0.98);
|
|
71
|
+
--lg-border-color: rgba(255,255,255,0.3);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
@media (prefers-reduced-motion: reduce) {
|
|
76
|
+
:root {
|
|
77
|
+
--lg-duration-fast: 0ms;
|
|
78
|
+
--lg-duration-normal: 0ms;
|
|
79
|
+
--lg-duration-slow: 0ms;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: neubrutalism
|
|
3
|
+
description: Neubrutalism design system skill. Use when building bold UI with thick borders, offset solid shadows, high saturation colors, and minimal border radius.
|
|
4
|
+
version: 1.0.0
|
|
5
|
+
tags: [design, css, ui, neubrutalism, brutalism]
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
# Neubrutalism Design Spec
|
|
9
|
+
|
|
10
|
+
## Core Principles
|
|
11
|
+
|
|
12
|
+
1. **Thick Borders** — Bold `3–5px solid` black outlines on all elements
|
|
13
|
+
2. **Offset Solid Shadows** — Hard-edge `box-shadow` with zero blur (e.g. `5px 5px 0 #000`)
|
|
14
|
+
3. **High Saturation Colors** — Vivid, punchy fills: pinks, yellows, blues, greens
|
|
15
|
+
4. **Minimal Radius** — `0–8px` border-radius; sharp or barely rounded corners
|
|
16
|
+
5. **Flat Aesthetic** — No gradients, no blur, no transparency
|
|
17
|
+
|
|
18
|
+
## CSS Tokens
|
|
19
|
+
|
|
20
|
+
Reference: [references/tokens.css](references/tokens.css)
|
|
21
|
+
|
|
22
|
+
```css
|
|
23
|
+
@import 'references/tokens.css';
|
|
24
|
+
|
|
25
|
+
.nb-card {
|
|
26
|
+
background: var(--nb-yellow);
|
|
27
|
+
border: var(--nb-border-thick);
|
|
28
|
+
border-radius: var(--nb-radius);
|
|
29
|
+
box-shadow: var(--nb-shadow);
|
|
30
|
+
}
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Component Examples
|
|
34
|
+
|
|
35
|
+
### Card
|
|
36
|
+
```css
|
|
37
|
+
.nb-card {
|
|
38
|
+
background: var(--nb-white);
|
|
39
|
+
border: var(--nb-border-thick);
|
|
40
|
+
border-radius: var(--nb-radius);
|
|
41
|
+
box-shadow: var(--nb-shadow);
|
|
42
|
+
padding: 1.5rem;
|
|
43
|
+
}
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
### Button
|
|
47
|
+
```css
|
|
48
|
+
.nb-btn {
|
|
49
|
+
background: var(--nb-yellow);
|
|
50
|
+
border: var(--nb-border);
|
|
51
|
+
border-radius: var(--nb-radius);
|
|
52
|
+
box-shadow: var(--nb-shadow-sm);
|
|
53
|
+
padding: 0.6rem 1.4rem;
|
|
54
|
+
font-family: var(--nb-font);
|
|
55
|
+
font-weight: var(--nb-font-weight);
|
|
56
|
+
cursor: pointer;
|
|
57
|
+
transition: transform 0.1s, box-shadow 0.1s;
|
|
58
|
+
}
|
|
59
|
+
.nb-btn:hover {
|
|
60
|
+
transform: translate(-2px, -2px);
|
|
61
|
+
box-shadow: var(--nb-shadow);
|
|
62
|
+
}
|
|
63
|
+
.nb-btn:active {
|
|
64
|
+
transform: translate(3px, 3px);
|
|
65
|
+
box-shadow: none;
|
|
66
|
+
}
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### Navbar
|
|
70
|
+
```css
|
|
71
|
+
.nb-nav {
|
|
72
|
+
background: var(--nb-bg);
|
|
73
|
+
border-bottom: var(--nb-border-thick);
|
|
74
|
+
padding: 1rem 2rem;
|
|
75
|
+
position: sticky;
|
|
76
|
+
top: 0;
|
|
77
|
+
z-index: 100;
|
|
78
|
+
}
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
### Input
|
|
82
|
+
```css
|
|
83
|
+
.nb-input {
|
|
84
|
+
background: var(--nb-white);
|
|
85
|
+
border: var(--nb-border);
|
|
86
|
+
border-radius: var(--nb-radius);
|
|
87
|
+
box-shadow: var(--nb-shadow-sm);
|
|
88
|
+
padding: 0.6rem 1rem;
|
|
89
|
+
font-family: var(--nb-font);
|
|
90
|
+
font-weight: var(--nb-font-weight-body);
|
|
91
|
+
}
|
|
92
|
+
.nb-input:focus {
|
|
93
|
+
outline: none;
|
|
94
|
+
box-shadow: var(--nb-shadow);
|
|
95
|
+
}
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
### Badge
|
|
99
|
+
```css
|
|
100
|
+
.nb-badge {
|
|
101
|
+
background: var(--nb-pink);
|
|
102
|
+
border: var(--nb-border);
|
|
103
|
+
border-radius: var(--nb-radius);
|
|
104
|
+
padding: 0.2rem 0.8rem;
|
|
105
|
+
font-family: var(--nb-font);
|
|
106
|
+
font-weight: var(--nb-font-weight);
|
|
107
|
+
font-size: 0.85rem;
|
|
108
|
+
}
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
## Typography
|
|
112
|
+
|
|
113
|
+
- Use bold, geometric sans-serif fonts (Space Grotesk, Inter, etc.)
|
|
114
|
+
- Headings: `font-weight: 700`, `letter-spacing: -0.02em`
|
|
115
|
+
- Body: `font-weight: 500`
|
|
116
|
+
- Uppercase sparingly for labels/badges
|
|
117
|
+
|
|
118
|
+
```css
|
|
119
|
+
h1, h2, h3 {
|
|
120
|
+
font-family: var(--nb-font-heading);
|
|
121
|
+
font-weight: var(--nb-font-weight);
|
|
122
|
+
letter-spacing: var(--nb-letter-spacing);
|
|
123
|
+
}
|
|
124
|
+
body {
|
|
125
|
+
font-family: var(--nb-font);
|
|
126
|
+
font-weight: var(--nb-font-weight-body);
|
|
127
|
+
}
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
## Accessibility Notes
|
|
131
|
+
|
|
132
|
+
- Thick borders provide strong visual boundaries — good for low-vision users
|
|
133
|
+
- Ensure color contrast ≥ 4.5:1 for text on colored backgrounds
|
|
134
|
+
- Active/hover states use `transform` shifts — provide `prefers-reduced-motion` fallback
|
|
135
|
+
|
|
136
|
+
```css
|
|
137
|
+
@media (prefers-reduced-motion: reduce) {
|
|
138
|
+
.nb-btn:hover, .nb-btn:active {
|
|
139
|
+
transform: none;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
```
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
/* Borders */
|
|
3
|
+
--nb-border: 3px solid #000;
|
|
4
|
+
--nb-border-thick: 5px solid #000;
|
|
5
|
+
|
|
6
|
+
/* Shadows (offset solid, no blur) */
|
|
7
|
+
--nb-shadow-sm: 3px 3px 0 #000;
|
|
8
|
+
--nb-shadow: 5px 5px 0 #000;
|
|
9
|
+
--nb-shadow-lg: 8px 8px 0 #000;
|
|
10
|
+
|
|
11
|
+
/* Radius */
|
|
12
|
+
--nb-radius: 4px;
|
|
13
|
+
--nb-radius-lg: 8px;
|
|
14
|
+
|
|
15
|
+
/* Colors — high saturation */
|
|
16
|
+
--nb-pink: #ff6b9d;
|
|
17
|
+
--nb-yellow: #ffd43b;
|
|
18
|
+
--nb-blue: #4dabf7;
|
|
19
|
+
--nb-green: #51cf66;
|
|
20
|
+
--nb-orange: #ff922b;
|
|
21
|
+
--nb-purple: #cc5de8;
|
|
22
|
+
--nb-red: #ff6b6b;
|
|
23
|
+
--nb-white: #fff;
|
|
24
|
+
--nb-black: #000;
|
|
25
|
+
--nb-bg: #f5f0e8;
|
|
26
|
+
|
|
27
|
+
/* Typography */
|
|
28
|
+
--nb-font: 'Space Grotesk', 'Inter', system-ui, sans-serif;
|
|
29
|
+
--nb-font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
|
|
30
|
+
--nb-font-weight: 700;
|
|
31
|
+
--nb-font-weight-body: 500;
|
|
32
|
+
--nb-letter-spacing: -0.02em;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
[data-theme="dark"] {
|
|
36
|
+
--nb-border: 3px solid #fff;
|
|
37
|
+
--nb-border-thick: 5px solid #fff;
|
|
38
|
+
--nb-shadow-sm: 3px 3px 0 #fff;
|
|
39
|
+
--nb-shadow: 5px 5px 0 #fff;
|
|
40
|
+
--nb-shadow-lg: 8px 8px 0 #fff;
|
|
41
|
+
--nb-bg: #1a1a2e;
|
|
42
|
+
--nb-black: #fff;
|
|
43
|
+
--nb-white: #1a1a2e;
|
|
44
|
+
}
|