Skip to content

DESIGN.md

Latest commit

 

History

History
75 lines (71 loc) · 2.88 KB

DESIGN.md

File metadata and controls

75 lines (71 loc) · 2.88 KB
Raw
name Resolver Dashboard
version alpha
colors
bg-primary bg-secondary bg-tertiary bg-elevated accent-primary accent-secondary text-primary text-secondary text-muted border border-active success warning error
#0d0d0f
#141418
#1a1a1f
#222228
#6366f1
#8b5cf6
rgba(255, 255, 255, 0.95)
rgba(255, 255, 255, 0.65)
rgba(255, 255, 255, 0.4)
rgba(255, 255, 255, 0.08)
rgba(99, 102, 241, 0.5)
#10b981
#f59e0b
#ef4444
typography
fontFamily fontSize lineHeight fontWeight
Inter, system-ui, -apple-system, sans-serif
1rem
1.5
400
rounded
xl sm
12px
8px
spacing
sidebar sm md lg xl
260px
12px
16px
24px
32px
components
button-primary button-secondary card sidebar-item
backgroundColor textColor rounded padding typography
linear-gradient(135deg, {colors.accent-primary}, {colors.accent-secondary})
#ffffff
{rounded.sm}
12px 24px
fontWeight
600
backgroundColor textColor rounded padding
{colors.bg-elevated}
{colors.text-primary}
{rounded.sm}
12px 24px
backgroundColor rounded padding
{colors.bg-secondary}
{rounded.xl}
24px
rounded padding textColor
{rounded.sm}
14px 16px
{colors.text-secondary}

Overview

The Resolver Dashboard is a dark-themed, high-performance interface for video assembly, storyboard management, and workflow analysis. It uses a sleek, neon-accented aesthetic with deep blacks and vibrant purples/indigos to evoke a professional creative tool atmosphere.

Colors

The palette is built on a layered dark foundation with high-contrast functional colors.

  • Backgrounds: A tiered system from #0d0d0f (primary) to #222228 (elevated) provides depth and separation.
  • Accents: A gradient of Indigo (#6366f1) and Violet (#8b5cf6) drives primary actions and highlights active states.
  • Status: Functional colors (Emerald, Amber, Rose) are used for success, warning, and error states, often with low-opacity backgrounds for badges.

Typography

The system uses Inter for its neutral, highly legible characteristics, ensuring clarity in dense data views.

  • Headings: Bold weights (700) and larger scales (up to 2rem) for module titles.
  • Hierarchy: Reduced opacity (0.65 and 0.4) is used on text to create visual hierarchy without introducing new colors.

Layout & Components

The interface follows a structured, consistent layout language.

  • Sidebar: A fixed 260px navigation area with a dedicated header and footer.
  • Cards: The primary container for information, utilizing a 12px border radius and 24px internal padding.
  • Spacing: A standard 24px gap is used for grid layouts, with 32px padding for main content areas.
  • Interactions: Buttons and sidebar items use smooth transitions (0.2s) and subtle hover transforms to feel responsive and premium.