Shinigami Scans

Overview

Shinigami Scans is a dark-mode manga and comic discovery platform built for speed and visual clarity. The design system embraces a "High-Contrast Minimalism" aesthetic—a tech-forward movement that pairs deep blacks (#0a0a0a) with pure whites and a singular, aggressive red accent (#ff0000) to create an interface that feels both austere and energetic. The brand serves passionate manga readers who demand rapid navigation, zero visual noise, and immediate visual feedback on interactive elements. The emotional response is one of control and precision: users feel they are commanding a professional tool, not browsing a casual site. Voice: direct, technical, never flowery. Example: "Tap to read the latest chapter—no ads, no delays."

Colors

The color system is built on a near-black foundation (surface #0a0a0a, surface-dim #050505) with a strict hierarchy of container grays (surface-container #151515, surface-container-high #272729, surface-container-highest #323235) that provide subtle depth without breaking the dark aesthetic. Primary (#ff0000) is the brand's signature red accent—used exclusively on call-to-action buttons, active navigation states, and error indicators. It commands attention through scarcity and saturation. Secondary (#181a1b) and tertiary (#6c757d) are supporting neutrals that create visual rhythm without competing for focus. On-surface text is pure white (#ffffff) for maximum contrast and readability over dark backgrounds. The outline color (#666666) and outline-variant (#505050) define subtle borders and

Typography

The type system uses Poppins exclusively across all scales, from display (60px, 700 weight, -0.04em tracking) down to label-sm (12px, 500 weight, 0.05em tracking). Display and headline sizes use negative letter-spacing (-0.04em to -0.01em) to tighten large text and reinforce the tech-forward aesthetic; body and label sizes use neutral to slightly positive tracking (0em to 0.05em) for legibility. Headlines (headline-lg 40px, headline-md 28px) anchor sections and use 600 weight for authority without heaviness. Body text (body-md 16px, 400 weight, 24px line-height) is the workhorse for content; body-lg (18px) is reserved for emphasis or callouts. Label-md (14px, 600 weight) is used on buttons and interactive labels to ensure they feel clickable. All text over dark backgrounds maintains a mini

Layout

The layout uses a 12-column grid with a max-width of 1280px, centered on the viewport. The header is fixed at the top with 24px horizontal padding (md breakpoint) and 24px vertical padding, creating a 100px tall navigation bar. Content sections use lg spacing (40px) for vertical separation and md spacing (24px) for horizontal gutters. The search bar in the header is 325px wide on desktop, with 16px left padding and 4px right padding for the icon. Cards and containers use md padding (24px) internally. Mobile breakpoints reduce padding to 16px horizontal and 16px vertical. The container max-width of 1280px ensures readability on ultra-wide displays; content never exceeds this width. White-space is aggressive—sections are separated by 40px vertical gaps, and internal card spacing uses 16px pa

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background color shifts. Level 1 (Base): the surface (#0a0a0a) with no shadow, establishing the foundation. Level 2 (Cards and Dropdowns): surface-container-high (#272729) with a 0 3px 8px rgba(0, 0, 0, 0.15) shadow, creating a soft lift. Level 3 (Modals and Popovers): surface-container-highest (#323235) with a 0 16px 40px rgba(0, 0, 0, 0.25) shadow, establishing clear separation. Hover states on cards transition from Level 2 to Level 3 shadow over 200ms, providing tactile feedback. The modal overlay uses a backdrop-filter: blur(4

Shapes

The shape philosophy is "Technical Precision"—a blend of sharp and rounded corners that reflects the brand's tech-forward identity. Buttons use full border-radius (9999px) to feel modern and approachable, while secondary buttons and inputs use DEFAULT radius (0.5rem / 8px) for a more structured appearance. Cards and modals use lg radius (1rem / 16px) to soften the edges without appearing organic. Dropdowns and small UI elements use DEFAULT or sm radius (0.25rem / 4px) for a more technical feel. The rationale: full-radius buttons (primary CTAs) are the most prominent interactive elements and de

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use the red accent (#ff0000) with white text, full border-radius (9999px), 48px height, and 8px 24px padding. They transition to primary-fixed-dim (#cc0000) on hover over 200ms. Secondary buttons (button-secondary) use surface-container-high (#272729) with a 1px outline-variant border, DEFAULT radius (8px), 40px height, and 8px 16px padding. On hover, they shift to surface-container-highest (#323235) and maintain the border. All buttons use label-md typography (14px, 600 weight) for consistency.

Containers & Surfaces Cards (card) use surface-container-high (#272729) with lg border-radius (16px), 16px padding, a 1px outline-variant border, and a 0 3px 8px rgba(0, 0, 0, 0.15) shadow. On h

Do's and Don'ts

**Do**

• Do use the primary red (#ff0000) exclusively on high-priority CTAs, active states, and error indicators—never on secondary or decorative elements.
• Do maintain the dark background (surface #0a0a0a) as the foundation; never use light backgrounds or gradients that compete with content.
• Do apply the 0 3px 8px rgba(0, 0, 0, 0.15) shadow to cards and dropdowns to create subtle depth without visual noise.
• Do use Poppins at 16px body-md for all body copy; never fall back to system fonts or serif typefaces.
• Do transition all interactive elements (buttons, cards, inputs) over 200ms on hover to provide smooth, predictable feedback.
• Do use full border-radius (9999px) only on primary buttons; use DEFAULT (8px) or lg (16px) for cards and secondary elements to maintain hierarchy.

**Don't**

• Don't use colors outside the defined palette—no custom reds, grays, or accent colors that deviate from the system.
• Don't apply shadows larger than 0 16px 40px rgba(0, 0, 0, 0.25); excessive shadows break the minimalist aesthetic.
• Don't use border-radius values between 1px and 4px on primary elements; stick to the defined scale (sm, DEFAULT, md, lg, xl, full).
• Don't mix typefaces; Poppins is the only font family used across the entire system.
• Don't apply text-shadow or text-stroke effects; the high contrast between white text and dark backgrounds is sufficient.
• Don't use opacity or transparency on primary red (#ff0000); always use the solid hex value or the fixed-dim variant (#cc0000) for hover states.