mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
docs(product): add product and design context
This commit is contained in:
Tommaso Casaburi
@@ -0,0 +1,223 @@
|
||||
---
|
||||
name: 5chan
|
||||
description: A decentralized imageboard with a classic imageboard user experience.
|
||||
colors:
|
||||
yotsuba-body-bg: "#ffffee"
|
||||
yotsuba-reply-bg: "#f0e0d6"
|
||||
yotsuba-mobile-reply-bg: "#f5e9e1"
|
||||
yotsuba-border: "#d9bfb7"
|
||||
yotsuba-title: "#880000"
|
||||
yotsuba-link: "#0000ee"
|
||||
yotsuba-hover: "#ff0000"
|
||||
yotsuba-name: "#117743"
|
||||
yotsuba-subject: "#cc1105"
|
||||
yotsuba-greentext: "#789922"
|
||||
yotsuba-b-body-bg: "#eef2ff"
|
||||
yotsuba-b-reply-bg: "#d6daf0"
|
||||
yotsuba-b-border: "#b7c5d9"
|
||||
yotsuba-b-title: "#af0a0f"
|
||||
yotsuba-b-link: "#34345c"
|
||||
futaba-body-bg: "#ffffee"
|
||||
modal-preview-bg: "#181f24"
|
||||
neutral-white: "#ffffff"
|
||||
neutral-black: "#000000"
|
||||
typography:
|
||||
board-title:
|
||||
fontFamily: "Tahoma, sans-serif"
|
||||
fontSize: "28px"
|
||||
fontWeight: 700
|
||||
lineHeight: 1.2
|
||||
letterSpacing: "normal"
|
||||
body:
|
||||
fontFamily: "Arial, Helvetica, sans-serif"
|
||||
fontSize: "13px"
|
||||
fontWeight: 400
|
||||
lineHeight: 1.3
|
||||
letterSpacing: "normal"
|
||||
form-label:
|
||||
fontFamily: "Arial, Helvetica, sans-serif"
|
||||
fontSize: "10pt"
|
||||
fontWeight: 700
|
||||
lineHeight: 1.2
|
||||
letterSpacing: "normal"
|
||||
mobile-post:
|
||||
fontFamily: "Arial, Helvetica, sans-serif"
|
||||
fontSize: "11pt"
|
||||
fontWeight: 400
|
||||
lineHeight: 1.3
|
||||
letterSpacing: "normal"
|
||||
rounded:
|
||||
square: "0"
|
||||
spacing:
|
||||
page-edge: "5px"
|
||||
field-padding: "2px"
|
||||
compact-padding: "0.5em"
|
||||
hairline: "1px"
|
||||
components:
|
||||
desktop-text-button:
|
||||
textColor: "{colors.yotsuba-link}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.square}"
|
||||
padding: "0"
|
||||
mobile-button:
|
||||
backgroundColor: "{colors.yotsuba-reply-bg}"
|
||||
textColor: "{colors.yotsuba-title}"
|
||||
typography: "{typography.form-label}"
|
||||
rounded: "{rounded.square}"
|
||||
padding: "3px 5px"
|
||||
input:
|
||||
backgroundColor: "{colors.neutral-white}"
|
||||
textColor: "{colors.neutral-black}"
|
||||
typography: "{typography.body}"
|
||||
rounded: "{rounded.square}"
|
||||
padding: "2px"
|
||||
reply-surface:
|
||||
backgroundColor: "{colors.yotsuba-reply-bg}"
|
||||
textColor: "{colors.yotsuba-title}"
|
||||
rounded: "{rounded.square}"
|
||||
---
|
||||
|
||||
# Design System: 5chan
|
||||
|
||||
## 1. Overview
|
||||
|
||||
**Creative North Star: "The Preserved Imageboard"**
|
||||
|
||||
5chan's visual system is intentionally conservative. The product should feel like a classic imageboard with a decentralized substrate, not like a redesigned forum or a modern community platform. The default answer for any board, thread, catalog, post, reply, or post-form UI is to preserve familiar imageboard density, typography, color, and interaction shape.
|
||||
|
||||
Most surfaces are flat, compact, text-first, and visibly old web. Controls may look plain by modern standards because that plainness is part of the product promise. New decentralized features should enter through the same visual language: small links, square fields, compact tables, simple modal bars, terse labels, and theme-aware colors.
|
||||
|
||||
**Key Characteristics:**
|
||||
|
||||
- Dense layouts with minimal padding.
|
||||
- Square edges and 1px borders.
|
||||
- Arial/Helvetica body text with Tahoma board titles.
|
||||
- Yotsuba, Yotsuba B, and Futaba-style palettes as first-class themes.
|
||||
- Text links and bracketed actions over large button components.
|
||||
- Visual compatibility with classic imageboard user expectations.
|
||||
|
||||
## 2. Colors
|
||||
|
||||
The palette is inherited from classic imageboard themes and should remain recognizable. Use the existing CSS variables in `src/themes.css` as the source of truth for implementation.
|
||||
|
||||
### Primary
|
||||
|
||||
- **Yotsuba Body** (`#ffffee`): default warm page background for NSFW-style boards.
|
||||
- **Yotsuba Reply** (`#f0e0d6`): reply containers, modal surfaces, pagination, menu backgrounds, and compact UI panels.
|
||||
- **Yotsuba Title Red** (`#880000`): board headers, bars, button text, and theme-defining chrome.
|
||||
- **Yotsuba B Body** (`#eef2ff`): default cool page background for SFW-style boards.
|
||||
- **Yotsuba B Reply** (`#d6daf0`): reply containers and panel surfaces in the blue theme.
|
||||
|
||||
### Secondary
|
||||
|
||||
- **Classic Link Blue** (`#0000ee` / `#34345c`): links, post actions, desktop text buttons, and navigational affordances.
|
||||
- **Hover Red** (`#ff0000` / `#dd0000`): hover states for links and compact actions.
|
||||
- **Name Green** (`#117743`): poster names and identity markers.
|
||||
- **Subject Red** (`#cc1105`): post subjects and title emphasis.
|
||||
- **Greentext** (`#789922`): quote text and imageboard-specific content convention.
|
||||
|
||||
### Neutral
|
||||
|
||||
- **Black** (`#000000`): body text in light themes and table borders where the original style calls for it.
|
||||
- **White** (`#ffffff`): homepage boxes, input fields, and legacy modal surfaces where defined by the theme.
|
||||
- **Hairline Borders** (`#d9bfb7` / `#b7c5d9`): dividers, reply borders, modal edges, pagination, and mobile post separators.
|
||||
- **Preview Dark** (`#181f24`): catalog and quote preview overlays only.
|
||||
|
||||
### Named Rules
|
||||
|
||||
**The Theme Fidelity Rule.** Use existing theme variables before adding new colors. If a color is needed for a new feature, derive its role from the closest established imageboard component in the active theme.
|
||||
|
||||
**The No Modern Accent Rule.** Do not introduce a new brand accent, gradient palette, neon crypto palette, or marketing color system for core product UI.
|
||||
|
||||
## 3. Typography
|
||||
|
||||
**Display Font:** Tahoma, sans-serif.
|
||||
**Body Font:** Arial, Helvetica, sans-serif.
|
||||
**Label/Mono Font:** Use inherited body fonts unless a compact error or technical address requires monospace.
|
||||
|
||||
**Character:** Typography should feel like a browser-native imageboard, not a designed publication. Small sizes, simple weights, default line wrapping, and dense text are expected.
|
||||
|
||||
### Hierarchy
|
||||
|
||||
- **Board Title** (bold, `28px`, Tahoma): board names and top-level board identity.
|
||||
- **Box Heading** (bold, `131%`, Arial/Helvetica): homepage bars and compact panel headings.
|
||||
- **Body** (regular, `13px`, Arial/Helvetica): global app text, board chrome, metadata, and link rows.
|
||||
- **Post Content** (regular, `11pt` on mobile): comment bodies and mobile post content.
|
||||
- **Form Label** (bold, `10pt`): post form field headers, modal bars, and compact control labels.
|
||||
- **Small Metadata** (`9pt` to `10pt`): board bars, file info, timestamps, addresses, and post counts.
|
||||
|
||||
### Named Rules
|
||||
|
||||
**The Browser-Native Rule.** Do not add custom web fonts, variable-font display systems, negative letter spacing, oversized headings, or marketing typography to product surfaces.
|
||||
|
||||
## 4. Elevation
|
||||
|
||||
5chan is flat by default. Depth is conveyed through background color, 1px borders, hard separators, and occasional legacy-style hard shadows on small menus. Avoid soft elevation, glass, blur, ambient shadows, floating cards, and layered dashboard surfaces.
|
||||
|
||||
### Shadow Vocabulary
|
||||
|
||||
- **Small Legacy Menu Shadow** (`box-shadow: 2px 2px 0 1px rgba(0, 0, 0, .1)`): small popover menus such as compact filters, when a flat border alone is not enough.
|
||||
|
||||
### Named Rules
|
||||
|
||||
**The Flat Surface Rule.** If a surface can be separated with a border or theme background, do that instead of adding shadow.
|
||||
|
||||
## 5. Components
|
||||
|
||||
### Buttons
|
||||
|
||||
- **Shape:** square corners (`0` radius).
|
||||
- **Desktop:** prefer text links, bracketed actions, or image-backed icon buttons over filled button components.
|
||||
- **Mobile:** use theme-colored rectangular buttons with compact padding, bold `10pt` text, and existing button fade assets.
|
||||
- **Hover / Focus:** hover changes color to the theme hover red; focus must stay visible and keyboard accessible.
|
||||
|
||||
### Cards / Containers
|
||||
|
||||
- **Corner Style:** square.
|
||||
- **Background:** theme surfaces such as Yotsuba reply, Yotsuba B reply, homepage white, or the active post/mobile background token.
|
||||
- **Shadow Strategy:** none except the small legacy menu shadow.
|
||||
- **Border:** 1px theme borders.
|
||||
- **Internal Padding:** compact, commonly `2px`, `5px`, or `0.5em`.
|
||||
|
||||
### Inputs / Fields
|
||||
|
||||
- **Style:** square native fields, white or theme-defined background, `1px solid #aaa` by default.
|
||||
- **Focus:** border shifts to the theme focus color, such as Yotsuba `#ea8`.
|
||||
- **Sizing:** preserve compact desktop sizes; on mobile, raise text size where needed to prevent browser zoom.
|
||||
|
||||
### Navigation
|
||||
|
||||
- **Boards bar:** compact slash-separated board links, small text, theme separators, no pill navigation.
|
||||
- **Pagination:** small flat cells using theme background and border colors.
|
||||
- **Directory navigation:** preserve classic board code patterns such as `/a/`, `/b/`, and category groupings.
|
||||
|
||||
### Posts And Replies
|
||||
|
||||
- **Post metadata:** compact inline text, subject red, name green, timestamps, IDs, roles, and action links in the expected order.
|
||||
- **Replies:** theme-colored blocks with square borders and minimal padding.
|
||||
- **Greentext and quote links:** preserve classic color behavior and hover states.
|
||||
- **Media:** thumbnails should fit the existing imageboard layout and should not create modern card previews unless the current surface already uses that pattern.
|
||||
|
||||
### Modals And Popovers
|
||||
|
||||
- **Style:** compact movable bars, square borders, theme backgrounds, and legacy close icons where available.
|
||||
- **Copy:** short labels and direct status messages.
|
||||
- **Behavior:** custom features such as challenges, settings, and posting flows should feel like imageboard utilities, not app dialogs.
|
||||
|
||||
## 6. Do's and Don'ts
|
||||
|
||||
### Do
|
||||
|
||||
- Start UI changes by checking the closest established imageboard behavior and the existing 5chan implementation.
|
||||
- Preserve theme variables and add new variables only when a new role is genuinely needed.
|
||||
- Keep layouts dense, square, and text-first.
|
||||
- Make decentralized concepts understandable without redesigning the familiar browsing flow.
|
||||
- Verify desktop and mobile because 5chan intentionally has different post and control treatments across viewports.
|
||||
|
||||
### Don't
|
||||
|
||||
- Do not modernize core imageboard UI for taste.
|
||||
- Do not add rounded cards, gradient hero areas, glass panels, soft shadows, dark-mode defaults, or large marketing sections to product surfaces.
|
||||
- Do not replace compact text links with large icon-button toolbars unless the existing surface already uses that pattern.
|
||||
- Do not introduce a new design system that competes with Yotsuba, Yotsuba B, Futaba, or the existing theme variable model.
|
||||
- Do not make Bitsocial, crypto, or decentralization visuals dominate routine browsing.
|
||||
+45
@@ -0,0 +1,45 @@
|
||||
# Product
|
||||
|
||||
## Register
|
||||
|
||||
product
|
||||
|
||||
## Users
|
||||
|
||||
5chan is for people who already understand classic imageboards, especially users whose habits depend on dense boards, terse navigation, reply flows, catalog scanning, familiar colors, and old-school post mechanics. The primary user should be able to land on 5chan and feel that the interface behaves like an imageboard they already know.
|
||||
|
||||
Secondary users include board owners, board moderators, and contributors building decentralized features around Bitsocial. Their tools should still feel native to the same imageboard environment instead of becoming a separate admin dashboard aesthetic.
|
||||
|
||||
## Product Purpose
|
||||
|
||||
5chan exists to preserve the classic imageboard habit while removing the dependency on global admins. It keeps the familiar imageboard directory structure and browsing experience, but runs on the Bitsocial protocol so anyone can create, own, and moderate boards independently.
|
||||
|
||||
Success means experienced imageboard users do not need to relearn how to browse, post, reply, search, use catalogs, read threads, or understand board identity. The decentralization should matter structurally, but it should not make the core user experience feel unfamiliar.
|
||||
|
||||
## Brand Personality
|
||||
|
||||
5chan should feel familiar, blunt, resilient, and low-friction. It is not polished in the startup sense. It should feel like a functional old internet place that kept its original interface discipline while replacing the governance layer underneath.
|
||||
|
||||
The voice is plain and direct. Prefer short labels, conventional imageboard wording, and visible system behavior over explanatory product copy.
|
||||
|
||||
## Anti-references
|
||||
|
||||
Do not make 5chan look like a modern social network, crypto app, SaaS dashboard, mobile-first content platform, or polished community product. Avoid feed algorithms, engagement framing, large hero layouts, decorative cards, rounded modern controls, soft gradients, animated brand flourishes, and "Web3" visual language.
|
||||
|
||||
Do not modernize classic imageboard affordances unless there is a concrete usability, accessibility, or protocol-driven reason. When 5chan needs custom decentralized features, they should look like they belong inside the existing classic imageboard UI.
|
||||
|
||||
Do not imply official affiliation with any existing imageboard. The design goal is alignment with long-standing imageboard user expectations, not brand ownership or endorsement.
|
||||
|
||||
## Design Principles
|
||||
|
||||
1. Classic parity first. For boards, threads, posts, replies, catalogs, post forms, navigation, and theme behavior, familiar imageboard behavior is the baseline.
|
||||
2. Preserve muscle memory. Existing imageboard users should not have to learn new interaction patterns for familiar tasks.
|
||||
3. Make decentralization invisible until it matters. Board ownership, competing directories, Bitsocial addresses, and moderation differences should be clear when relevant, but should not dominate routine browsing.
|
||||
4. Custom features inherit the old UI language. Passes, board creation, mod queues, challenges, subscriptions, and directory competition should use compact, flat, text-first imageboard patterns.
|
||||
5. Favor density over polish. The interface should optimize for scanning, comparison, and repeated use, not marketing impact.
|
||||
|
||||
## Accessibility & Inclusion
|
||||
|
||||
Keep the nostalgic interface, but do not use nostalgia as an excuse for broken accessibility. Preserve keyboard access, readable focus states, sufficient contrast within each theme, reduced-motion safety, predictable tab order, and responsive behavior on mobile.
|
||||
|
||||
When accessibility improvements conflict with exact visual parity, choose the smallest adjustment that fixes the usability issue while preserving the classic imageboard feel.
|
||||
Reference in New Issue
Block a user