Atsumaru

Overview

Atsumaru is a dark-mode manga, manhwa, and manhua reading platform designed for immersive, distraction-free content consumption. The aesthetic embraces **Accent-Driven Minimalism**: a sophisticated charcoal canvas (rgb(29, 30, 32)) serves as the neutral stage, while three vibrant accent colors—lavender (#8e7ce6), electric blue (#038cfc), and golden orange (#fc9003)—punctuate key interactive moments, gallery cards, and status indicators. This creates a gallery-like experience where the eye is drawn to content and actionable elements, not chrome. The emotional response is one of calm focus: the dark background reduces eye strain during long reading sessions, while the saturated accents inject energy and personality without overwhelming.

The brand voice is direct, playful, and community-oriented. Atsumaru speaks to manga enthusiasts with respect for their passion—no corporate jargon, no false urgency. Vocabulary favors clarity and brevity: "Hot Updates," "Recently Updated," "Popular" rather than "Trending Content Recommendations." The tone is conversational and slightly irreverent, treating users as peers in a shared love of serialized storytelling. Example sentence in brand voice: "Dive into the latest chapters—no ads, no interruptions, just the story."

Colors

The color system is built on a dark-first philosophy with three strategic accent roles. **Surface Stack** (rgb(29, 30, 32) → rgb(53, 55, 57)): The primary surface is a deep charcoal that reads as pure black on most displays but retains enough luminosity to prevent OLED burn-in. Container layers step up in 8–10% increments to create subtle depth without harsh contrast; use surface-container-low (rgba(26, 27, 29, 1)) for input fields and surface-container-high (rgba(42, 43, 46, 1)) for elevated cards and hover states. **Primary Accent** (#8e7ce6, lavender): Reserved for primary CTAs ("Sign up"), focus states, and brand-defining interactive elements. This mid-tone purple sits at 60% luminance, ensuring legibility over the dark surface while feeling premium and approachable. Apply to button-pr

Typography

The type system pairs **Geist** (geometric, modern sans-serif) for body and UI text with **Montserrat** (bold, confident) for headlines and **Bevan** (display, decorative) for hero moments. This hierarchy creates visual rhythm: Bevan at 56px (display) commands attention on splash screens and hero sections; Montserrat at 28–36px (headline-md/lg) anchors section titles like "Hot Updates" with weight and personality; Geist at 16–18px (body-md/lg) ensures comfortable reading during long manga descriptions and metadata. Letter-spacing is calibrated per size: display uses -0.02em to tighten the dramatic letterforms, headlines use -0.01em to 0em for balance, and body text uses 0.03em to improve readability at smaller sizes. Line-height follows a 1.4–1.5 ratio for body (24–28px on 16–18px text) to

Layout

The layout uses a **12-column fluid grid** with a 1280px container max-width, centered on larger screens. Spacing follows a consistent 8px unit system: use lg spacing (40px) for section separation (e.g., between "Hot Updates" and "Recently Updated" carousels), md spacing (24px) for card padding and component gutters, and sm spacing (12px) for internal component spacing (button padding, list item padding). The page rhythm emphasizes horizontal scrolling for content discovery: manga cards are arranged in horizontal carousels with overflow-x: auto, allowing users to browse without pagination friction. Vertical sections stack with 40px gaps, creating breathing room. The search bar and header occupy a fixed or sticky position at the top (56px height including padding), ensuring navigation is al

Elevation & Depth

Depth is conveyed through **layered shadows and subtle surface elevation**, not through bright highlights or glassmorphism. The elevation system uses three tiers: **Level 1 (Base)**: No shadow; elements sit flush on the surface (rgb(29, 30, 32)). **Level 2 (Standard Cards)**: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) applied to manga cards, input fields, and default buttons. This soft shadow lifts elements 4px off the base, creating clear separation without drama. **Level 3 (Elevated/Modals)**: box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2) for modals, dropdowns, and hover-elevated cards. The sha

Shapes

The shape philosophy is **Geometric Precision with Warmth**: rounded corners are used consistently but not excessively, creating a modern, approachable aesthetic that avoids both harsh rectangles and overly organic curves. **Button Radius**: 1rem (16px) for primary and secondary buttons, creating a pill-like shape that feels friendly and clickable. **Card Radius**: 1.5rem (24px) for manga cover cards and content containers, slightly more generous than buttons to signal containment and browsing. **Input Radius**: 0.75rem (12px) for search fields and form inputs, a middle ground that feels integ

Components

Action Elements **Button Primary** (primary CTA): backgroundColor: {colors.primary} (#8e7ce6), textColor: {colors.on-primary} (#1d1e20), rounded: {rounded.lg} (16px), padding: 8px 16px, height: 40px, typography: {typography.label-md}. On hover, transition to button-primary-hover with backgroundColor: {colors.primary-container} (#a896f0) and boxShadow: 0 4px 12px rgba(142, 124, 230, 0.3). Transition all properties over 200ms cubic-bezier(0.2, 0, 0.38, 0.9) for a snappy, responsive feel. On active/pressed, shift to button-primary-active with backgroundColor: {colors.inverse-primary} (#6b5bb8) and a 100ms transition to signal immediate feedback.

**Button Secondary** (secondary action): backgroundColor: transparent, textColor: {colors.secondary} (#038cfc), border: 1px solid {colors.second

Do's and Don'ts

**Do**

• Do use the lavender primary (#8e7ce6) sparingly on CTAs and focus states—it's the brand signature and should feel special, not ubiquitous.
• Do apply the full surface stack (surface-container-low through surface-container-highest) to create depth; avoid using only the base surface color for all backgrounds.
• Do pair Geist (body text) with Montserrat (headlines) to create clear visual hierarchy; never mix serif and sans-serif in the same component.
• Do use the 8px spacing unit consistently; multiples of 8px (8, 12, 16, 24, 40, 64) create a harmonious rhythm across all screen sizes.
• Do apply the elevation shadows (md and lg) to interactive elements; the soft shadows are critical for discoverability in dark mode.
• Do use rounded: {rounded.lg} (16px) for buttons and rounded: {rounded.xl} (24px) for cards to maintain the geometric-precision aesthetic.

**Don't**

• Don't use pure white (#ffffff) for text or backgrounds; it creates harsh contrast and eye strain in dark mode. Stick to {colors.on-surface} (#b8bcc0) for primary text.
• Don't apply multiple accent colors to a single component; each accent (primary, secondary, tertiary) has a specific role. Mixing them creates visual noise.
• Don't use system fonts or generic sans-serif fallbacks; always load Geist, Montserrat, and Bevan from the preloaded @font-face declarations to maintain brand consistency.
• Don't skip the focus ring on interactive elements; use boxShadow: 0 0 0 3px rgba(142, 124, 230, 0.1) or a 2px outline for accessibility and discoverability.
• Don't use hard shadows (0 0 0 1px) or high-contrast borders on dark backgrounds; the soft, spread shadows (0 4px 12px rgba(0,0,0,0.15)) are more sophisticated and readable.
• Don't animate transitions faster than 150ms or slower than 300ms; the 200ms cubic-bezier(0.2, 0, 0.38, 0.9) easing is optimized for snappy, responsive feedback without feeling sluggish.