Skip to content

DESIGN.md

Latest commit

 

History

History
123 lines (111 loc) · 5.2 KB

DESIGN.md

File metadata and controls

123 lines (111 loc) · 5.2 KB
Raw
name Shogun Delay Dashboard
colors
primary primary-content secondary secondary-content accent accent-content neutral neutral-content base-100 base-200 base-300 base-content info info-content success success-content warning warning-content error error-content status-online status-offline status-warning
#570df8
#ffffff
#f000b8
#ffffff
#37cdbe
#163835
#3d4451
#ffffff
#ffffff
#f2f2f2
#e5e6e6
#1f2937
#3abff8
#002b3d
#36d399
#003320
#fbbd23
#382800
#f87272
#470000
oklch(0.7 0.2 140)
oklch(0.6 0.25 25)
oklch(0.8 0.18 85)
typography
font-sans font-mono display-lg headline-md body-md body-sm
fontFamily
Inter
fontFamily
Roboto Mono
fontFamily fontSize lineHeight
Inter
48px
1
fontFamily fontSize fontWeight
Inter
24px
600
fontFamily fontSize
Inter
16px
fontFamily fontSize
Inter
14px
rounded
none sm DEFAULT md lg xl 2xl 3xl full
0px
0.125rem
0.25rem
0.375rem
0.5rem
0.75rem
1rem
1.5rem
9999px
spacing
unit card-padding section-gap sidebar-width
4px
32px
24px
320px
components
status-dot status-dot-online status-dot-offline status-dot-warning card stat alert-warning
width height rounded
8px
8px
{rounded.full}
backgroundColor boxShadow
{colors.status-online}
0 0 8px {colors.status-online}
backgroundColor
{colors.status-offline}
backgroundColor
{colors.status-warning}
backgroundColor rounded textColor
{colors.base-100}
{rounded.2xl}
{colors.base-content}
padding
16px
backgroundColor textColor rounded
{colors.warning}
{colors.warning-content}
{rounded.2xl}

Brand & Style

The Shogun Delay Dashboard employs a robust, functional, and highly legible design system that emphasizes real-time monitoring and administrative control. Powered by Tailwind CSS v4 and DaisyUI, the interface provides a clean, modern aesthetic that effortlessly supports both light and dark modes out of the box. The overall feeling is professional, technical, and snappy.

Colors

The color palette relies on the semantic defaults provided by DaisyUI, ensuring high contrast and immediate recognition of system states.

  • Primary & Secondary: Used sparingly to draw attention to high-level system identity (e.g., the top welcome card utilizing a vibrant gradient from primary to secondary).
  • Base Tones: The interface utilizes varying shades of base colors (base-100, base-200) to create spatial separation between the main canvas, cards, and sidebars.
  • Status Indicators: Custom oklch colors are defined for system health (Online, Offline, Warning), ensuring vibrant, glowing indicators that immediately inform the user of relay status.

Typography

The system uses Inter as the primary sans-serif typeface, offering excellent legibility for dense data displays and administrative controls.

  • Monospace: Roboto Mono is employed for code snippets, IDs, and technical data, providing clear distinction from standard UI text.
  • Hierarchy: Clear typographic hierarchy is established using Tailwind utilities, with large display text (e.g., emojis and main stats) creating natural focal points.

Layout & Spacing

The layout follows a flexible, responsive paradigm typical of modern admin dashboards.

  • Drawer System: A persistent (on desktop) or toggleable (on mobile) sidebar navigation is utilized alongside a main content area.
  • Grid & Flexbox: Information is grouped into cards and stat blocks, utilizing consistent gaps (gap-4, gap-6) to separate distinct metrics.
  • Containment: The main content uses a maximum width (max-w-6xl, max-w-7xl) to ensure readability on ultra-wide monitors, while being centered horizontally.

Elevation & Depth

Depth is handled primarily through subtle shadows and color separation rather than heavy borders or 3D effects.

  • Cards & Stats: Elevated using soft drop shadows (shadow, shadow-sm) to lift them slightly off the base-200 main canvas background.
  • Hover States: Interactive elements like the "Upload Files" quick action card increase their shadow depth (hover:shadow-md) to indicate clickability.
  • Glow Effects: The online status indicator utilizes a subtle box-shadow glow matching its color to emphasize active connectivity.

Shapes

The interface favors approachable, rounded geometry.

  • Containers: Cards and alerts feature pronounced rounded corners ( DaisyUI's default rounded-box is typically around 1rem or 1.5rem), softening the technical nature of the presented data.
  • Interactive Elements: Buttons and badges use tighter rounded corners, maintaining a structured, clickable appearance.
  • Indicators: Status dots are perfectly circular (rounded-full) and small (8px), drawing the eye without taking up unnecessary vertical or horizontal space.

Component Styling

The dashboard relies heavily on semantic HTML/CSS classes provided by DaisyUI (card, stat, badge, alert), minimizing custom CSS. This ensures consistency and maintainability while allowing rapid development of complex administrative views.