Futon

Overview

Futon is a free, open-source manga reader for Android that embraces a retro-hacker aesthetic rooted in terminal culture and cyberpunk minimalism. The design system channels the visual language of 1980s computer interfaces—monochromatic black backgrounds, neon-orange accent colors (#ff6b35), and monospace typography—to create an interface that feels both nostalgic and cutting-edge. The brand personality is irreverent, technical, and unapologetically nerdy: the UI speaks directly to manga enthusiasts who appreciate both function and style, with witty loading messages and a playful tone that never takes itself too seriously. The emotional response is one of empowerment—users feel like they're accessing a powerful, underground tool rather than a polished consumer app. Voice example: 'MAL score: 10/10. (bias detected. proceeding anyway)'

Colors

The color palette is deliberately constrained to maximize contrast and readability on mobile screens. Primary (#ff6b35) is a vivid, warm orange used exclusively for interactive elements—CTAs, focus states, progress indicators, and active selections. This color appears sparingly but commands attention, evoking the glow of old CRT monitors. The surface stack is anchored in pure black (#000000) for the base background, with incremental grays (#0a0a0a through #3a3a3a) for layered containers, creating depth through darkness rather than light. On-surface text is a soft off-white (#f3f4f6) to reduce eye strain during extended reading sessions. Secondary orange (#ffb26b) and tertiary blue (#60a5fa) provide supporting accents for secondary actions and status indicators. Outline colors (#374151, #4b

Typography

The type system is built entirely on JetBrains Mono, a geometric monospace font that reinforces the terminal-hacker aesthetic across all scales. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and loading screens, commanding presence through size and weight. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) establish information hierarchy for section titles. Body text (16–18px, 400 weight) is set with generous line-height (24–28px) to ensure legibility on small screens during extended reading. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to buttons, badges, and interactive labels, with letter-spacing tightened slightly to maintain the compact, technical feel. All typography uses 0em letter-spacing by default except for labe

Layout

The layout system uses a 12-column grid with a max-width of 1280px, adapting fluidly from mobile (single column) to tablet (6 columns) to desktop (12 columns). The gutter is fixed at 24px, creating consistent breathing room between content blocks. White-space is used aggressively—sections are separated by lg spacing (40px) to create visual rhythm and prevent cognitive overload. Container padding follows the spacing scale: md (24px) for standard cards and sections, sm (12px) for compact components. The design favors full-width layouts on mobile, with content stacking vertically and expanding horizontally only on larger viewports. Margins use the semantic scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) to maintain proportional relationships across breakpoints.

Elevation & Depth

Depth is conveyed through a restrained shadow system and border treatment rather than dramatic layering. Level 1 (Base): pure black background with no shadow. Level 2 (Standard Card): 1px solid border in {colors.outline} (#374151) with box-shadow 0 3px 8px rgba(0, 0, 0, 0.15), creating subtle separation from the background. Level 3 (Elevated/Modals): 2px solid border in {colors.primary} (#ff6b35) with box-shadow 0 8px 24px rgba(0, 0, 0, 0.25), signaling importance and focus. Interactive elements on hover transition to Level 3 with a 200ms cubic-bezier(0.4, 0, 0.2, 1) easing curve. Progress bar

Shapes

The shape philosophy is 'Retro-Technical Precision'—sharp corners and minimal rounding that evoke early computer interfaces while maintaining modern usability. Buttons use 0.5rem (8px) border-radius, providing just enough softness to feel contemporary without abandoning the angular aesthetic. Cards and containers use 0.75rem (12px) border-radius for slightly more breathing room. Input fields use 0.25rem (4px) border-radius, maintaining a compact, utilitarian feel. Progress bars and badges use 9999px (full) border-radius for a pill-shaped appearance, creating visual contrast with the sharp-corn

Components

Action Elements Buttons are the primary interactive surface and use a 2px solid border with 12px horizontal padding and 48px height for touch targets. Primary buttons (#ff6b35 background, black text) are used for main CTAs like 'Download' or 'Read Now'. Secondary buttons (transparent background, #ff6b35 border and text) are used for alternative actions. Both states transition to their 'fixed-dim' variants on hover (200ms transition) with a subtle background fill. Focus state adds a 3px box-shadow 0 0 0 3px rgba(255, 107, 53, 0.1) to indicate keyboard navigation.

Containers & Surfaces Cards use a 1px solid outline in {colors.outline} (#374151) with 24px padding and 0.75rem border-radius. On hover, the border transitions to {colors.primary} (#ff6b35) and background shifts to {colors

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ff6b35) exclusively for interactive elements and CTAs—never use it for decorative or background purposes.
• Do maintain 2px solid borders on all interactive components to reinforce the retro-technical aesthetic and improve touch target visibility.
• Do apply 200ms cubic-bezier(0.4, 0, 0.2, 1) transitions to all hover and focus state changes for smooth, predictable interactions.
• Do use JetBrains Mono for all typography—never substitute with system fonts or generic sans-serifs.
• Do preserve the pure black (#000000) background on mobile screens; never lighten it to improve contrast—instead, increase font weight or use text-shadow.
• Do apply 24px gutter spacing between major sections to create visual rhythm and prevent cognitive overload.

**Don't**

• Don't use gradients or transparency effects on the primary orange (#ff6b35)—keep it solid and opaque to maintain the retro aesthetic.
• Don't apply rounded corners greater than 1rem on any component; sharp angles are part of the brand identity.
• Don't use drop shadows greater than 0 8px 24px rgba(0, 0, 0, 0.25)—excessive shadows contradict the flat, technical aesthetic.
• Don't introduce new accent colors beyond primary (#ff6b35), secondary (#ffb26b), and tertiary (#60a5fa); the palette is intentionally constrained.
• Don't use serif fonts or script typefaces anywhere in the UI—monospace is non-negotiable.
• Don't lighten the background below #000000 or darken the on-surface text below #f3f4f6; contrast is essential for readability on mobile.