this repo has no description
init impeccable
+41
+41
.impeccable.md
+41
.impeccable.md
···
1
+
## Design Context
2
+
3
+
### Users
4
+
**Primary audience**: Developers learning TanStack Router/Query prefetching patterns
5
+
**Context**: Educational material consumed during focused learning sessions — following tutorials, referencing implementations, or teaching workshops
6
+
**Job to be done**: Understand how different prefetching strategies work through interactive examples; eventually read companion blog posts for deeper explanation
7
+
8
+
### Brand Personality
9
+
**Voice**: Technical, minimalistic, informative
10
+
**Tone**: Precise but approachable — like a well-crafted developer tool or technical documentation that respects the reader's intelligence
11
+
**Emotional goals**: Confidence ("I understand this now"), clarity (no cognitive load from visual noise), trust (this is correct and well-built)
12
+
13
+
### Aesthetic Direction
14
+
**Visual tone**: Developer console aesthetic — functional, information-dense, purposeful
15
+
**Theme**: Light AND dark mode (system preference + manual toggle)
16
+
**References**:
17
+
- https://www.effect.website/ — clean technical aesthetic, purposeful spacing, no decorative fluff, strong information hierarchy
18
+
**Anti-references**:
19
+
- AI-generated UI (GPT-5+ style) — generic gradients, glassmorphism without purpose, "designed" looking elements that serve no function
20
+
- Gradient text, side-stripe borders, glow effects
21
+
- Template-y dashboard patterns
22
+
23
+
### Design Principles
24
+
25
+
1. **Function over decoration** — Every visual element must earn its place. No decorative gradients, no pointless shadows, no "visual interest" that doesn't aid comprehension.
26
+
27
+
2. **Information density is a feature** — This is teaching material. Users need to see code, data, and state at a glance. White space is good; empty space is wasteful.
28
+
29
+
3. **State should be visible** — Cache status, loading states, prefetch activity — these are the *point* of the demo. Make them obvious without being intrusive.
30
+
31
+
4. **Respect the code** — The typography and layout should make code snippets feel at home. Monospace is appropriate here because it's literally about code.
32
+
33
+
5. **Dark mode is not an afterthought** — Both themes should be equally considered, equally usable, and equally "correct."
34
+
35
+
6. **Accessibility is non-negotiable** — WCAG 2.1 AA compliance for EU EAA requirements. Sufficient contrast, keyboard navigation, reduced motion support, screen reader friendly.
36
+
37
+
### Technical Notes
38
+
- Current stack: TanStack Start, Tailwind v4, JetBrains Mono (already in place)
39
+
- The warm beige + amber palette works for light mode; needs a thoughtful dark counterpart
40
+
- Status dots (cached/fetching/idle) are a key interaction pattern — preserve and refine
41
+
- Hairline borders and zero border-radius fit the technical aesthetic