5chan/DESIGN.md

version, name, description, colors, typography, rounded, spacing, components

version	name	description	colors	typography	rounded	spacing	components
alpha	5chan	A decentralized imageboard with a classic imageboard user experience.	yotsuba-body-bg yotsuba-reply-bg yotsuba-mobile-reply-bg yotsuba-border yotsuba-title yotsuba-link yotsuba-hover yotsuba-name yotsuba-subject yotsuba-greentext yotsuba-b-body-bg yotsuba-b-reply-bg yotsuba-b-border yotsuba-b-title yotsuba-b-link futaba-body-bg modal-preview-bg neutral-white neutral-black #ffffee #f0e0d6 #f5e9e1 #d9bfb7 #880000 #0000ee #ff0000 #117743 #cc1105 #789922 #eef2ff #d6daf0 #b7c5d9 #af0a0f #34345c #ffffee #181f24 #ffffff #000000	board-title body form-label mobile-post fontFamily fontSize fontWeight lineHeight letterSpacing Tahoma, sans-serif 28px 700 1.2 normal fontFamily fontSize fontWeight lineHeight letterSpacing Arial, Helvetica, sans-serif 13px 400 1.3 normal fontFamily fontSize fontWeight lineHeight letterSpacing Arial, Helvetica, sans-serif 10pt 700 1.2 normal fontFamily fontSize fontWeight lineHeight letterSpacing Arial, Helvetica, sans-serif 11pt 400 1.3 normal	square 0	page-edge field-padding compact-padding hairline 5px 2px 0.5em 1px	desktop-text-button mobile-button input reply-surface textColor typography rounded padding {colors.yotsuba-link} {typography.body} {rounded.square} 0 backgroundColor textColor typography rounded padding {colors.yotsuba-reply-bg} {colors.yotsuba-title} {typography.form-label} {rounded.square} 3px 5px backgroundColor textColor typography rounded padding {colors.neutral-white} {colors.neutral-black} {typography.body} {rounded.square} 2px backgroundColor textColor rounded {colors.yotsuba-reply-bg} {colors.yotsuba-title} {rounded.square}

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.

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.

The Functional Color Exception. Small, deterministic per-entity colors used as data — for example a hashed swatch that gives each connected peer a stable identity — are allowed. Render them as flat, square, small indicators (not gradients, glows, or large fills). This exception is for conveying data, not for decoration or branding.

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.

Layout

Layouts are dense, compact, and text-first, mirroring classic imageboard information density. Spacing is small and deliberate rather than generous, and structure comes from tables, inline rows, and slash-separated links instead of large spaced-out cards.

• Page edge (5px): outer gutters around boards, catalogs, and threads.
• Field padding (2px): inputs, table cells, and compact controls.
• Compact padding (0.5em): reply blocks, menus, and small panels.
• Hairline (1px): borders and separators between rows, posts, and panels.

Desktop and mobile intentionally differ: desktop stays maximally compact, while mobile raises tap-target and text sizes only as much as needed to stay usable and avoid browser zoom.

Named Rules

The Density Rule. When in doubt, choose the more compact layout. Whitespace is not a feature on core imageboard surfaces.

Elevation & Depth

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.

Shapes

5chan is uniformly square. Corner radius is 0 everywhere on product surfaces, and structure comes from 1px theme borders rather than rounding or elevation.

• Corners: square (0 radius) on buttons, inputs, cards, replies, modals, and menus.
• Borders: 1px theme border colors (for example Yotsuba #d9bfb7, Yotsuba B #b7c5d9).
• Indicators: functional per-entity swatches render as small flat squares, never rounded chips.

Named Rules

The No Rounding Rule. Do not introduce border-radius, pill, capsule, chip, or rounded badge shapes on product UI. A label is square text, not a rounded token.

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.
• Hover: do not change a row's or card's background on hover, and do not add CSS transitions or animations to them. Reserve hover feedback for text-link color changes.
• Inline labels: plain text, bold for emphasis. Do not wrap labels (tags, statuses, transports, counts) in pill, capsule, chip, or rounded badge shapes; a label is text, not a button.

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.
• Emoji and text faces: pass post text through as raw Unicode. Do not add an emoji picker, shortcode/emote system, or Twemoji-style emoji rendering. Kaomoji and ASCII / Shift-JIS art are the native text-face vocabulary; preserve them and their alignment where used. See PRODUCT.md → Text and Expression for the rationale.

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.

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 use pill, capsule, chip, or rounded badge shapes for labels, tags, statuses, transports, or counts.
• Do not add hover background fills, color fades, or CSS transitions/animations to rows, cards, or list items.
• 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.
• Do not add an emoji picker, emoji shortcode/emote system, or Twemoji-style emoji rendering; emoji pass through as raw Unicode only.