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