seedit/DESIGN.md

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

version	name	description	colors	typography	rounded	spacing	components
alpha	Seedit	A decentralized community client with a compact old.reddit-inspired interface.	light-page light-header light-header-border light-link light-action light-muted light-visited dark-page dark-surface dark-muted-surface dark-text dark-link sprout-green #ffffff #cee3f8 #5f99cf #0000ff #336699 #888888 #551a8b #0f0f0f #1f1f1f #3e3e3e #bfbfbf #7dafd8 #37bb15	body post-title community-title fontFamily fontSize fontWeight lineHeight letterSpacing Verdana, Arial, Helvetica, sans-serif 10px 400 1.3 normal fontFamily fontSize fontWeight lineHeight letterSpacing Arial, Verdana, Helvetica, sans-serif 16px 400 1.2 normal fontFamily fontSize fontWeight lineHeight letterSpacing Arial, Verdana, Helvetica, sans-serif 19px 700 1.2 normal	legacy 0	compact control section sidebar-width 2px 5px 10px 300px	header-tab post-title sidebar-box backgroundColor textColor typography rounded padding {colors.light-header} {colors.light-action} {typography.body} {rounded.legacy} 2px 6px 0 textColor typography rounded padding {colors.light-link} {typography.post-title} {rounded.legacy} 0 backgroundColor textColor typography rounded padding {colors.light-page} {colors.light-muted} {typography.body} {rounded.legacy} 5px

Overview

Creative North Star: "The Familiar Community Front Page"

Seedit should make independently owned Bitsocial communities feel as immediately understandable as old Reddit. Its visual system is compact, browser-native, and content-first: small type, dense rows, familiar voting controls, blue links, narrow metadata, tabs, and a practical sidebar. Decentralized identity and loading state should enter through this established vocabulary instead of turning the product into a crypto dashboard.

Light mode preserves the recognizable old.reddit blue-and-white palette. Dark mode is a careful token-level adaptation of the same hierarchy, with the sprout green used as a restrained identity and status accent. Existing CSS variables in src/themes.css are the implementation source of truth.

Colors

• Page and content: --background, --background-markdown, and --text.
• Header and selected navigation: --background-primary, --background-secondary, --border-primary, and --text-primary.
• Links: --link, --link-primary, and --link-visited; do not replace established link semantics with decorative brand color.
• Metadata and separators: --text-info, --gray-*, and --border-text.
• Identity and positive state: --green; in dark mode this resolves to the sprout asset's #37bb15.
• Warnings and moderation state: use the existing red, orange, and yellow tokens according to their current semantic roles.

Named Rules

The Token Rule. Use an existing theme variable before adding a literal color. If a new semantic role is unavoidable, define it for both light and dark themes in src/themes.css.

The Familiarity Rule. Routine browsing should look like a community discussion client, not a blockchain explorer, generic SaaS dashboard, or marketing site.

Typography

Verdana is the compact application font. Arial/Helvetica is used for larger post and community titles where the existing UI does so. Keep browser-native rendering and the established small sizes; do not add web fonts, display type, oversized headings, or spacious editorial typography to product surfaces.

• Application chrome and metadata: generally 10px to 12px Verdana/Arial.
• Post title: 16px, normal weight.
• Community/sidebar title: about 19px, bold.
• Comment content: small but readable, with the existing markdown line height.

Layout

Seedit is deliberately dense. Feed rows place rank, vote controls, content, and metadata close together. Desktop reserves a 300px right sidebar; mobile collapses or reorders existing structures instead of converting them into a card grid.

• Use small increments already common in the codebase: 2px, 5px, and 10px.
• Keep feed and comment hierarchy visible without large whitespace bands.
• Preserve text wrapping for long community names, addresses, titles, and translated labels.
• At mobile widths, protect tap access and prevent horizontal overflow while retaining the compact hierarchy.

Elevation and Shapes

The product is flat and square. Structure comes from theme backgrounds, 1px borders, dotted reply nesting guides, and legacy image assets. Avoid rounded cards, pills, glass, blur, gradients, soft shadows, and floating dashboard panels. A small radius or transition is acceptable only where it already communicates a specific interaction, such as spoiler reveal behavior; do not generalize it into a new visual language.

Components

Navigation

Use compact lowercase tabs, plain text links, and the existing selected-tab border treatment. Keep primary destinations stable and do not replace them with oversized icon navigation.

Posts and Replies

Preserve the established rank/vote/title/domain/tagline order. Titles are links, metadata stays secondary, moderation state remains explicit, and nested replies keep their dotted hierarchy. New P2P status or identity details should be short, inspectable, and subordinate to the discussion content.

Buttons and Forms

Prefer the existing browser-native controls, text actions, sprite-backed voting controls, and legacy large sidebar buttons. Keep labels direct. Do not introduce pill buttons or decorative icon-only controls when a familiar text action exists.

Notices and Empty States

Use inline notices or compact bordered boxes that fit the feed. Explain what happened and what the user can do next without promotional illustration, oversized whitespace, or repeated modal interruption.

Do's and Don'ts

Do

• Start with the closest existing Seedit component and its light/dark theme behavior.
• Preserve old.reddit information density and interaction order.
• Keep community addresses, ownership, subscription changes, and moderation boundaries understandable.
• Verify desktop and mobile layouts in light and dark themes.
• Check keyboard access, visible focus, long text, and translated copy.

Don't

• Do not modernize the interface for taste.
• Do not add generic dashboard cards, rounded pills, glass panels, gradients, or oversized empty layouts.
• Do not make decentralization or crypto styling dominate routine browsing.
• Do not silently change a user's chosen community or hide which address a route or subscription represents.
• Do not rely on color alone for identity, loading, error, moderation, or subscription state.