1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
UI Guidelines
=============
Product Positioning
-------------------
The UI should feel like a content-first technical blog: readable, restrained,
and efficient. It should avoid marketing-heavy layouts unless the page itself
is explicitly promotional.
Design Principles
-----------------
* Reading first: typography, line length, and contrast should favor long-form
reading.
* Lightweight navigation: posts, tags, search, theme switching, and account
actions should remain easy to reach.
* Consistent visual language: dashed borders, corner markers, and subtle
motion are part of the current identity.
* Low learning cost: anonymous and authenticated flows should be obvious.
* Cross-device consistency: mobile and desktop should share the same hierarchy.
Visual Conventions
------------------
Typography
Use the configured Geist font family for prose and Geist Mono for code-like
metadata. Avoid oversized headings inside dense cards or sidebars.
Color
Use existing design tokens from ``src/styles/globals.css``. The site
supports light, dark, and system theme modes.
Shape
Prefer the existing dashed-border and corner-marker treatment for major
framed sections. Avoid adding unrelated decorative systems.
Motion
Keep motion short, functional, and tied to state changes. Current examples
include hero fade-in, hover transitions, theme transition, and share toast.
Page Notes
----------
Home
Hero, latest posts, and newsletter CTA should establish identity and expose
current content quickly.
Post list
Cards should support scanning title, summary, tags, date, and image without
requiring a detail-page visit.
Post detail
The article body is primary. Side metadata, share controls, and comments
should support the reading flow rather than compete with it.
Tags
Tag pages should make topic discovery fast and preserve the post-list visual
pattern.
Login
OAuth options should be clear and minimal. Do not add account-management
concepts to the login page unless the backend supports them.
|
