Things UI Skills
Opinionated constraints for building Things-style interfaces with AI agents.
When to Apply
Reference these guidelines when:
- Building light-mode interfaces
- Creating Things-inspired design systems
- Implementing UIs with Inter font and 8px grid
Colors
- SHOULD use light backgrounds for primary surfaces
- MUST use
#EEF2F5 as page background (surface-base)
- MUST use
#729AE0 for primary actions and focus states (accent)
- SHOULD limit color palette to 5 distinct colors
- MUST maintain text contrast ratio of at least 4.5:1 for accessibility
Semantic Tokens
| Token |
HEX |
RGB |
Usage |
surface-base |
#EEF2F5 |
rgb(238,242,245) |
Page background |
text-primary |
#729AE0 |
rgb(114,154,224) |
Headings, body text |
text-2 |
#5A5E61 |
rgb(90,94,97) |
Additional text |
text-tertiary |
#2F343B |
rgb(47,52,59) |
Additional text |
accent |
#729AE0 |
rgb(114,154,224) |
Primary actions, links, focus |
Typography
- MUST use
Inter as primary font family
- SHOULD use single font family for consistency
- MUST use
49px / 700 for primary headings
- MUST use
23px / 400 for body text
- SHOULD reduce font weights (currently 4 detected)
- MUST use
text-balance for headings and text-pretty for body text
- SHOULD use
tabular-nums for numeric data
- NEVER modify letter-spacing unless explicitly requested
Text Styles
| Style |
Font |
Size |
Weight |
Color |
Count |
heading-1 |
Inter |
49px |
700 |
#2F343B |
1 |
body |
Inter |
23px |
400 |
#5A5E61 |
1 |
text-20px |
Inter |
20px |
500 |
#729AE0 |
1 |
text-19px |
Inter |
19px |
semi_bold |
#9298A0 |
1 |
text-14px |
Inter |
14px |
400 |
#9499A1 |
1 |
text-14px |
Inter |
14px |
400 |
#989CA4 |
1 |
caption |
Inter |
11px |
400 |
#989DA4 |
1 |
Typography Reference
Font Families:
Font Sizes: 11px, 14px, 19px, 20px, 23px, 49px
Spacing
- MUST use 8px grid for spacing
- SHOULD use spacing from scale: 72px
- SHOULD use 72px as default gap between elements
- NEVER use arbitrary spacing values (use design scale)
- SHOULD maintain consistent padding within containers
Borders
- NEVER use arbitrary border-radius values (use design scale)
- SHOULD use subtle borders (1px) for element separation
Layout
- MUST design for 1920px base viewport width
- SHOULD use consistent element widths: 35px, 64px
- SHOULD maintain text-heavy layout with clear hierarchy
- NEVER use
h-screen, use h-dvh for full viewport height
- MUST respect
safe-area-inset for fixed elements
- SHOULD use
size-* for square elements instead of w-* + h-*
Detected Layout Patterns
- Main Content: width: 1920px, height: 1080px
- Main Content: width: 1920px, height: 1024px
Components
Interactive States
Focus
- MUST use
2px outline with accent color (#729AE0)
- MUST use
2px outline-offset
- NEVER remove focus indicators
Hover
- Buttons (primary): lighten background by 10%
- Buttons (secondary): use
surface-raised background
- List items: use
surface-raised background
Disabled
- MUST use
opacity: 0.5
- MUST use
cursor: not-allowed
Interaction
- MUST use an
AlertDialog for destructive or irreversible actions
- SHOULD use structural skeletons for loading states
- MUST show errors next to where the action happens
- NEVER block paste in
input or textarea elements
- MUST add an
aria-label to icon-only buttons
Animation
- NEVER add animation unless it is explicitly requested
- MUST animate only compositor props (
transform, opacity)
- NEVER animate layout properties (
width, height, top, left, margin, padding)
- SHOULD use
ease-out on entrance animations
- NEVER exceed
200ms for interaction feedback
- SHOULD respect
prefers-reduced-motion
Performance
- NEVER animate large
blur() or backdrop-filter surfaces
- NEVER apply
will-change outside an active animation
- NEVER use
useEffect for anything that can be expressed as render logic
1---
2name: things-ui-skills
3description: Things's UI design system. Use when building interfaces inspired by Things's aesthetic - light mode, Inter font, 8px grid.
4license: MIT
5metadata:
6 author: design-skills
7 version: "1.0.0"
8 source: https://culturedcode.com/things
9---
10
11# Things UI Skills
12
13Opinionated constraints for building Things-style interfaces with AI agents.
14
15## When to Apply
16
17Reference these guidelines when:
18- Building light-mode interfaces
19- Creating Things-inspired design systems
20- Implementing UIs with Inter font and 8px grid
21
22## Colors
23
24- SHOULD use light backgrounds for primary surfaces
25- MUST use `#EEF2F5` as page background (`surface-base`)
26- MUST use `#729AE0` for primary actions and focus states (`accent`)
27- SHOULD limit color palette to 5 distinct colors
28- MUST maintain text contrast ratio of at least 4.5:1 for accessibility
29
30### Semantic Tokens
31
32| Token | HEX | RGB | Usage |
33|-------|-----|-----|-------|
34| `surface-base` | #EEF2F5 | rgb(238,242,245) | Page background |
35| `text-primary` | #729AE0 | rgb(114,154,224) | Headings, body text |
36| `text-2` | #5A5E61 | rgb(90,94,97) | Additional text |
37| `text-tertiary` | #2F343B | rgb(47,52,59) | Additional text |
38| `accent` | #729AE0 | rgb(114,154,224) | Primary actions, links, focus |
39
40## Typography
41
42- MUST use `Inter` as primary font family
43- SHOULD use single font family for consistency
44- MUST use `49px` / `700` for primary headings
45- MUST use `23px` / `400` for body text
46- SHOULD reduce font weights (currently 4 detected)
47- MUST use `text-balance` for headings and `text-pretty` for body text
48- SHOULD use `tabular-nums` for numeric data
49- NEVER modify letter-spacing unless explicitly requested
50
51### Text Styles
52
53| Style | Font | Size | Weight | Color | Count |
54|-------|------|------|--------|-------|-------|
55| `heading-1` | Inter | 49px | 700 | #2F343B | 1 |
56| `body` | Inter | 23px | 400 | #5A5E61 | 1 |
57| `text-20px` | Inter | 20px | 500 | #729AE0 | 1 |
58| `text-19px` | Inter | 19px | semi_bold | #9298A0 | 1 |
59| `text-14px` | Inter | 14px | 400 | #9499A1 | 1 |
60| `text-14px` | Inter | 14px | 400 | #989CA4 | 1 |
61| `caption` | Inter | 11px | 400 | #989DA4 | 1 |
62
63### Typography Reference
64
65**Font Families:**
66- `Inter` (used 7x)
67
68**Font Sizes:** 11px, 14px, 19px, 20px, 23px, 49px
69
70## Spacing
71
72- MUST use 8px grid for spacing
73- SHOULD use spacing from scale: 72px
74- SHOULD use 72px as default gap between elements
75- NEVER use arbitrary spacing values (use design scale)
76- SHOULD maintain consistent padding within containers
77
78## Borders
79
80- NEVER use arbitrary border-radius values (use design scale)
81- SHOULD use subtle borders (1px) for element separation
82
83## Layout
84
85- MUST design for 1920px base viewport width
86- SHOULD use consistent element widths: 35px, 64px
87- SHOULD maintain text-heavy layout with clear hierarchy
88- NEVER use `h-screen`, use `h-dvh` for full viewport height
89- MUST respect `safe-area-inset` for fixed elements
90- SHOULD use `size-*` for square elements instead of `w-*` + `h-*`
91
92### Detected Layout Patterns
93
94- **Main Content**: width: 1920px, height: 1080px
95- **Main Content**: width: 1920px, height: 1024px
96
97## Components
98
99## Interactive States
100
101### Focus
102
103- MUST use `2px` outline with accent color (`#729AE0`)
104- MUST use `2px` outline-offset
105- NEVER remove focus indicators
106
107### Hover
108
109- Buttons (primary): lighten background by 10%
110- Buttons (secondary): use `surface-raised` background
111- List items: use `surface-raised` background
112
113### Disabled
114
115- MUST use `opacity: 0.5`
116- MUST use `cursor: not-allowed`
117
118## Interaction
119
120- MUST use an `AlertDialog` for destructive or irreversible actions
121- SHOULD use structural skeletons for loading states
122- MUST show errors next to where the action happens
123- NEVER block paste in `input` or `textarea` elements
124- MUST add an `aria-label` to icon-only buttons
125
126## Animation
127
128- NEVER add animation unless it is explicitly requested
129- MUST animate only compositor props (`transform`, `opacity`)
130- NEVER animate layout properties (`width`, `height`, `top`, `left`, `margin`, `padding`)
131- SHOULD use `ease-out` on entrance animations
132- NEVER exceed `200ms` for interaction feedback
133- SHOULD respect `prefers-reduced-motion`
134
135## Performance
136
137- NEVER animate large `blur()` or `backdrop-filter` surfaces
138- NEVER apply `will-change` outside an active animation
139- NEVER use `useEffect` for anything that can be expressed as render logic
ihlamury