diff options
| author | Bertrand Yuan <me@bertyuan.com> | 2026-04-27 20:52:54 +0800 |
|---|---|---|
| committer | Bertrand Yuan <me@bertyuan.com> | 2026-04-27 20:53:14 +0800 |
| commit | dbb5e791f0c228369605d126dd590962ebe1eddc (patch) | |
| tree | 8c83fc84bd9547630e6733929dec77e102e055a8 /Documentation/source/frontend/ui-guidelines.rst | |
| parent | 658798b3a2378bb6df16cfbb16d707c6fb719e1e (diff) | |
docs: add comprehensive documentation for operations
This commit introduces a complete set of documentation files
covering various aspects of the project, including environment
setup, quality checks, command references, and architecture.
The documentation is structured to assist developers and
contributors in understanding the project's configuration,
workflow, and best practices.
Additionally, translations for Simplified and Traditional
Chinese have been added to ensure accessibility for a wider
audience. This enhances the overall usability and
maintainability of the project.
Signed-off-by: Bertrand Yuan <github@bertyuan.com>
Diffstat (limited to 'Documentation/source/frontend/ui-guidelines.rst')
| -rw-r--r-- | Documentation/source/frontend/ui-guidelines.rst | 63 |
1 files changed, 63 insertions, 0 deletions
diff --git a/Documentation/source/frontend/ui-guidelines.rst b/Documentation/source/frontend/ui-guidelines.rst new file mode 100644 index 0000000..d3e8a9d --- /dev/null +++ b/Documentation/source/frontend/ui-guidelines.rst @@ -0,0 +1,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. |
