Skip to content

DESIGN.md

Latest commit

 

History

History
110 lines (80 loc) · 7.47 KB

DESIGN.md

File metadata and controls

110 lines (80 loc) · 7.47 KB

PixelLab Studio Design System & Architecture

This document formalizes the design guidelines, architectural design patterns, visual hierarchy, and component systems of PixelLab Studio. It is built entirely on real features, terminology, and tokens present in the codebase.

🎨 Visual Identity Tokens

All design tokens are defined inside src/index.css and mapped to Tailwind utility tokens within tailwind.config.ts.

1. Typography Hierarchy

PixelLab Studio combines a clean sans-serif face for text accessibility with a distinct geometric monospace face for system feedback and action indicators.

  • Primary Body Font (font-body): DM Sans, sans-serif
    • Used for general body copy, tooltips, dialog descriptions, and descriptive text.
    • Weight scale: Light (300), Regular (400), Medium (500), SemiBold (600), Bold (700)
  • System & Display Font (font-mono / font-display): Space Mono, monospace
    • Used for the primary branding logo ("PixelLab"), navigation actions, tabs, slider metrics, download specifications, and visual headers.
    • Weight scale: Regular (400), Bold (700)

2. Colors & Color States

The studio utilizes a sleek dark-mesh theme as its signature presentation, balanced with a translucent light mode.

Token Key HSL Value (Light) HSL Value (Dark) Intent / UI Application
--primary 38 92% 50% 38 92% 50% Brand Accent (Amber). Used for active tabs, export triggers, and comparison highlights.
--background 220 20% 96% 230 25% 7% Workspace Background (Soft Slate-Grey vs. deep space canvas).
--foreground 220 15% 20% 220 15% 90% High-contrast body copy and interface labels.
--muted-foreground 220 10% 46% 220 10% 60% Low-emphasis metadata, units, inactive filters, and scale meters.
--border 220 13% 88% 230 15% 18% Sub-pixel structural grid dividers and canvas borders.
--glass-bg 255 255 255 / 0.55 255 255 255 / 0.06 Frosted backing for sidebar panels, header toolbars, and overlay dialogs.

3. Depth & Special FX Styles

To prevent a flat utility feel, PixelLab Studio implements visual layers:

  • Frosted Glassmorphism (.glass):
    • Light Mode backing: rgba(255, 255, 255, 0.55) with blur(20px) saturate(180%).
    • Dark Mode backing: rgba(255, 255, 255, 0.06) with blur(24px) saturate(180%).
    • Borders: Translucent white borders (rgba(255, 255, 255, 0.6) / 0.12).
  • Animated Gradient Mesh Backdrop (.gradient-mesh):
    • A custom ambient background utilizing four smooth radial gradients containing soft amber, deep indigo, ocean blue, and warm magenta.
    • It drifts continuously over a 20-second active timeline using an alternate ease-in-out keyframe animation (mesh-drift).
  • Brand Accent Halos (.glass-glow / .glow-primary):
    • Soft amber shadows (hsl(var(--glow-primary) / 0.15)) layered to provide structural depth beneath premium action elements (e.g. comparison knobs, file-dragging halos).

📐 Layout & Visual Hierarchy: The Pipeline Shape

PixelLab Studio is physically structured around an image processing pipeline (Input ➔ Manipulate ➔ Compare/Verify ➔ Output) rather than traditional multi-section templates. The user interface layout mirrors this pipeline to establish visual weight:

+-------------------------------------------------------------------------------+
| [Px] PixelLab Studio | (Undo) (Redo) (Reset) (Theme Toggle) (Gallery) [Export] |
+-------------------------------------------------------------------------------+
|                                                |                              |
|                                                |  [ Adjust ] [ RGB ] [Preset] |
|                                                | +--------------------------+ |
|                  STUDIO CANVAS                 | | Brightness     [--o--] % | |
|                                                | | Contrast       [--o--] % | |
|               [ Live Image Area ]              | | Saturation     [--o--] % | |
|                                                | | ...                      | |
|         { New Image }    { Save to Gallery }   | |                          | |
|                                                | |                          | |
|                                                | |                          | |
+-------------------------------------------------------------------------------+

1. Dominant Weight: The Studio Canvas (ImageCanvas.tsx)

The README opens directly with real-time editing features. Therefore, the visual canvas dominates the interface:

  • Visual Dominance: Allocates all center screen space to the active image preview.
  • Contextual Controls: Features a dedicated sub-toolbar managing zoom percentage (from 25% to 400%), canvas-pan grab modes, and comparative rendering triggers.
  • Comparison Split-Slider: When comparing ("Compare" mode active), a split-screen slider with a floating amber control knob allows the user to slide horizontally over the canvas to visually verify edits (Original vs. Edited).

2. Functional Sidebar Panel (FilterPanel.tsx & FilterSlider.tsx)

A compact 288px-320px inline container docked on the right side of the workspace. Using a three-tier tab layout to group parameters clean and avoid clutter:

  • Adjust Tab: Contains global slider adjusters (Brightness, Contrast, Saturation, Blur, Grayscale, Sepia, Hue Rotate, and spatial convolutions: Mean Blur, Sharpen, Edge Detect).
  • RGB Tab: Isolates color channel multipliers (Red, Green, Blue) to give direct control over color balance.
  • Presets Tab: Displays a grid of thumbnail previews. Clicking a preset card runs its static values over the active image instantly. Includes custom preset templates saved locally by the user.

3. Pipeline Output Actions

  • Persisted Storage Actions: Primary toolbar hooks and floating action bars are kept consistent.
    • New Image & Save to Gallery remain positioned beneath the canvas as secondary tactile triggers.
    • Export is positioned in the upper right header as a high-contrast gradient action.
  • Export Setup: Triggering the export opens an overlay dialog displaying format fields (PNG, JPEG, WebP) with variable quality controllers (10% to 100%) and proportional resolution modifiers (0.25x, 0.5x, 1x, 2x).

📱 Mobile Adaptation Design

To maintain premium usability on smaller viewport widths:

  • Workspace Splitting: The desktop inline sidebar folds away. A semi-transparent backdrop blur (bg-black/20) prevents background visual distraction.
  • Floating Actions: An active mobile toggle FAB (PanelRight icon) slides in the modular glass editing pane (width: 18rem) with ease-in-out spring mechanics (framer-motion).
  • Canvas Zoom Constraints: Restricts maximum panning behaviors and locks canvas widths on portable viewports, ensuring that drag operations don't break page layouts.

🛠️ Terminology & Messaging Specifications

To protect visual alignment, no placeholder texts are permitted in design changes. Use exact, real code parameters:

  • Built-in Filter Presets: Clarendon, Gingham, Moon, Lark, Reyes, Juno, Slumber, Aden, Perpetua, Noir, Vintage, Cyberpunk.
  • Export Scales: Original, 2x, 0.5x, 0.25x.
  • System Action Triggers: Undo, Redo, Reset, Gallery, Export, New Image, Save.