Skip to content

DESIGN.md

Latest commit

 

History

History
205 lines (180 loc) · 8.39 KB

DESIGN.md

File metadata and controls

205 lines (180 loc) · 8.39 KB
Raw
name Onyx Gold
colors
surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant velvet-black warm-obsidian warm-ivory warm-clay manga-gold espresso-container amoled-black
#131313
#131313
#3a3939
#0e0e0e
#1c1b1b
#201f1f
#2a2a2a
#353534
#e5e2e1
#d8c3ae
#e5e2e1
#313030
#a08d7a
#534434
#ffb963
#ffcc92
#472a00
#fea628
#6a4000
#865300
#f8b993
#4c260b
#673c1f
#e4a883
#d4dd58
#303300
#b8c13e
#494d00
#ffb4ab
#690005
#93000a
#ffdad6
#ffddb9
#ffb963
#2b1700
#663e00
#ffdbc8
#f8b993
#321300
#673c1f
#e2eb64
#c5ce4b
#1b1d00
#464a00
#131313
#e5e2e1
#353534
#0D0D0D
#121110
#F1DFD5
#A48C7F
#FEA628
#673C1F
#000000
typography
display-lg headline-md title-md title-sm body-base body-md label-md stat-huge headline-md-mobile
fontFamily fontSize fontWeight lineHeight letterSpacing
Inter
40px
800
48px
-0.02em
fontFamily fontSize fontWeight lineHeight letterSpacing
Inter
24px
700
32px
-0.01em
fontFamily fontSize fontWeight lineHeight letterSpacing
Inter
18px
600
24px
0.01em
fontFamily fontSize fontWeight lineHeight letterSpacing
Inter
14px
600
18px
0.007em
fontFamily fontSize fontWeight lineHeight letterSpacing
Inter
16px
400
24px
0
fontFamily fontSize fontWeight lineHeight letterSpacing
Inter
14px
400
20px
0
fontFamily fontSize fontWeight lineHeight letterSpacing
Inter
12px
600
16px
0.05em
fontFamily fontSize fontWeight lineHeight letterSpacing
Inter
48px
700
56px
-0.03em
fontFamily fontSize fontWeight lineHeight
Inter
20px
700
28px
rounded
sm DEFAULT md lg xl full
0.25rem
0.5rem
0.75rem
1rem
1.5rem
9999px
spacing
unit xs sm md lg xl margin-mobile margin-desktop gutter
4px
4px
8px
12px
16px
24px
16px
24px
8px

Brand & Style

This design system is a high-fidelity implementation of Material Design 3 (M3) tailored for an immersive, premium dark-mode media experience. It balances the structured utility of a content-heavy reader with the "luxurious" tactile feel of high-end consumer hardware.

The aesthetic is defined by Warm Minimalism. We avoid sterile pure blacks in favor of deep, velvet-toned obsidian neutrals that provide a sophisticated backdrop for vibrant manga artwork. The emotional response should be one of "focused luxury"—where the interface recedes to highlight content but feels substantial and responsive when engaged.

Key characteristics include:

  • Depth through Tone: Utilizing the M3 tonal surface system to create hierarchy without heavy drop shadows.
  • High-Contrast Accents: Using a singular, vibrant gold brand color for all primary interactions and progress indicators.
  • Fluid Responsiveness: Smooth transitions between library views and immersive reading modes.

Colors

The color system is built on a foundation of Velvet Black to minimize eye strain and maximize the pop of color manga covers.

  • Primary (Manga Gold): Used for CTA buttons, active navigation states, and critical progress indicators.
  • Secondary (Espresso): Provides a muted, warm container for secondary actions and toggles, preventing the UI from feeling too "loud."
  • Typography: We use Warm Ivory for primary text instead of pure white to reduce glare, and Warm Clay for secondary metadata to create a natural hierarchy.
  • Surfaces: Containers use the warm-obsidian hex to distinguish elevated panels from the base background. For devices with OLED displays, the system allows for a "True Black" override using #000000.

Typography

This design system uses Inter for its neutral, highly legible characteristics. The type scale is intentionally bold to counteract the "thinning" effect of light text on dark backgrounds.

  • Display & Headlines: Use tight letter spacing and heavy weights to create a strong editorial feel for manga titles.
  • Body & Labels: Prioritize legibility. Labels utilize increased letter spacing (0.05em) to remain clear at very small sizes, such as on manga tags or chapter numbers.
  • Reading Comfort: Body text is set with a generous 1.5x line height to ensure descriptions and logs are easy to scan.

Layout & Spacing

The layout is built on a fluid grid system that adapts to the high-density requirements of a media library.

  • Grid Model: Manga covers use a responsive grid with a preferred card width of 120dp. Columns scale dynamically based on screen width.
  • Rhythm: An 8px base unit governs all spacing. Vertical spacing between sections uses 24px to provide clear separation.
  • Manga Reader Layout: In the reader view, the layout transitions to a "No Grid" model, allowing content to be truly edge-to-edge. Vertical margins between pages in Webtoon mode are set to 24px to create a physical "breathing room" between story beats.
  • Safe Areas: Mobile layouts respect a 16px outer margin, while tablet and desktop layouts expand to 24px to maintain visual balance on larger displays.

Elevation & Depth

We utilize Tonal Layers as the primary method of communicating depth, adhering to Material Design 3 principles.

  • Surface Tiers:
    • Level 0 (Background): Velvet Black (#0D0D0D).
    • Level 1 (Cards/Panels): Warm Obsidian (#121110).
    • Level 2 (Dialogs/Menus): A lighter tint of obsidian or a very low-opacity white overlay (5-8%).
  • Interactive Depth: We avoid heavy drop shadows. Instead, elevated states are signaled by subtle 1px inner outlines in Warm Clay at 15% opacity.
  • AMOLED Mode: When active, tonal layers are flattened. Hierarchy is conveyed solely through high-contrast strokes and typography weights to preserve battery life and prevent "ghosting."

Shapes

The shape language is Soft-Rounded, providing a modern and friendly feel that contrasts with the "serious" dark color palette.

  • Standard Containers: Use a 0.5rem (8px) radius.
  • Large Components (Manga Covers): Use a 1rem (16px) radius to emphasize the "object-like" quality of book covers.
  • Tactile Inputs: Large sliders and buttons use the rounded-xl or pill-shaped (full) setting to maximize touch-target friendliness.
  • Indicators: Circular progress bubbles are perfectly rounded to 9999px to stand out as distinct UI overlays.

Components

Media Cards

Manga covers must maintain a strict 18:13 aspect ratio. Use centerCrop for images. Titles below the card should be limited to 2 lines with an ellipsis.

Buttons & Chips

  • Primary Buttons: Solid Manga Gold fill with Pure Black text. Minimum height 56dp for flagship actions.
  • Chips: Outlined with a 1px Warm Clay border. Active states switch to a gold tinted background at 20% opacity.

Lists & Progress

  • Chapter Items: Horizontal layout with a large touch target (48dp min height). Use Warm Ivory for chapter names and Warm Clay for timestamps.
  • Progress Bubbles: Floating 32dp bubbles. Use a 4dp gold stroke for the progress arc. When 100% complete, replace the percentage text with a gold check icon.

Inputs & Sliders

  • Tactile Sliders: Thick 40dp tracks in Espresso with a 48dp thumb. This "fat" slider style makes it easier to adjust brightness or font size during one-handed reading.

Bottom Navigation

Clean, borderless icons. The active state is indicated by a Manga Gold icon and a small pill-shaped indicator behind it.