UI/UX Design·1 tool · 3 outputs

Project Management Dashboard

A dark-mode dashboard StyleRef applied to three distinct AI-generated web app screens — from SaaS analytics to API monitoring — all sharing the same glass-effect card aesthetic and purple accent system.

StyleRef encodes the visual or tonal style from the source reference into a structured format — reusable across every prompt, every generation.

StyleRef

• Container / Boundary: Container: Explicit (shape mask); Container Dominance: Neutral frame; Container shape: Rounded square; Medium radius Corners; Padding: Moderate; Edge Behavior: Content fully contained. • Output Format: Digital; Web, Desktop; Creative discipline: UI/UX; Delivery mode: Still. • Mood & Personality: Confident, Serious, Minimalist, Elegant; Energy: Steady; Emotional bias: Neutral; Representation mode: Literal; Minimal narrative; Characters: Forbidden; Real-world accuracy: Stylized; Tone register: Observational. • Colors: Palette: Solid Colors: [ #111214 35%, #1B1C1F 25%, #2A2B2F 15%, #FFFFFF 10%, #7C6AF2 10%, #F28A1A 5%]; 6–8 colors; Subtle gradients only; Mixed temperature; Hue relationships: Complementary; High contrast; Saturation: Rich; Color dominance: Single dominant color. • Typography: Sans-serif; Regular, Medium, Semibold; Normal (1.4); Letter spacing: Normal; Type scale: Modular; Text visual role: Secondary visual element; Text presence: Required; Text integration: Separate; Hierarchy: Clear typographic scale. • Light & Shadow: Artificial; Key light style: Soft; Lighting presence: Implied; Light source count: Ambient; Shadow type: Soft; Lighting mood style: Studio-flat. • Spatial Structure & Hierarchy: Flat perspective; Primary + secondary focal structure; Hierarchy: Strong; Layout axis: Gridless; Symmetry: Asymmetrical balance; Balance: Evenly distributed; Plane separation: Overlap, Shadow; Scale relationship: Human-scale. • Surface, Material & Detail: Texture: Smooth; Imperfection level: Polished; Material simulation: Glass; Semi-representational; Texture usage: Subtle noise; Micro-detail allowance: Allowed; Surface treatment: Material-simulated; Age of surface: New. • Shape Language: Geometric; Primitive dominance: Rectangles, Circles; Edge sharpness: Soft; Curve consistency: Uniform radius; Angle usage: Limited; Silhouette clarity: Recognizable; Negative space usage: Balanced. • Line & Stroke System: None (fill-only). • Inspiration Images: https://piteahvrjstrlirkpoid.supabase.co/storage/v1/object/public/images/public/f96c95a1-3b74-4a11-ad95-9ef1b36818d6.webp. • Custom Style Items: UI aesthetic: Dark-mode dashboard UI with card-based modules, elevated surfaces, and strong accent color (purple) for highlights and key metrics., Component styling: Rounded cards, subtle inner/outer shadows, and minimal iconography; charts use simplified geometric forms (bars/dots/rings) with sparse labeling..

Extracted fromProject Management Dashboard — Dribbble

This StyleRef is prepended to every prompt shown below — that's what keeps every output consistent.

About This Style

The Project Management Dashboard StyleRef shows how a complex UI design aesthetic can be precisely encoded and reproduced across different application contexts — all from a single source reference image.The source is a dark-mode dashboard with glass-effect cards, a purple accent system, and an asymmetric layout hierarchy. Those properties are extracted into structured StyleRef blocks: exact hex values for each surface layer, material simulation (glass), accent color role, typography weight and spacing, shadow treatment, and component rules.Once encoded, the same StyleRef produces a SaaS analytics dashboard, an API monitoring panel, and a mobile marketing view — three completely different screen contexts that still feel like they belong to the same design system. That's the core value: you define the design language once and any AI-generated UI inherits it automatically.This approach is ideal for UI/UX designers, product teams running AI-assisted design sprints, and founders who need consistent visual identity across marketing pages, app screens, and investor materials — without a dedicated design system or component library.

03 — AI Outputs

Same StyleRef. Different Prompts. Consistent Results.

Generated with

Gemini

— Web Design

Prompt

StyleRef ✓+Create a SaaS analytics dashboard web app with a sidebar, top KPI cards, and a revenue over time area chart | Full dark-mode dashboard page with glass-effect cards, accent chart, clean typography

View full output

Prompt

StyleRef ✓+Design an API usage monitoring dashboard with rate limits, latency graphs, and error rate cards | Technical dark dashboard with 4 metric cards, a line graph with multiple data series, status indicators

View full output

Prompt

StyleRef ✓+Design a mobile view of a marketing analytics page showing campaign performance, click-through rates, and conversion funnels | Dark marketing dashboard with funnel visualization, table, and metric cards

View full output

Use this StyleRefCopy and paste into your AI tool of choice.

• Container / Boundary: Container: Explicit (shape mask); Container Dominance: Neutral frame; Container shape: Rounded square; Medium radius Corners; Padding: Moderate; Edge Behavior: Content fully contained. • Output Format: Digital; Web, Desktop; Creative discipline: UI/UX; Delivery mode: Still. • Mood & Personality: Confident, Serious, Minimalist, Elegant; Energy: Steady; Emotional bias: Neutral; Representation mode: Literal; Minimal narrative; Characters: Forbidden; Real-world accuracy: Stylized; Tone register: Observational. • Colors: Palette: Solid Colors: [ #111214 35%, #1B1C1F 25%, #2A2B2F 15%, #FFFFFF 10%, #7C6AF2 10%, #F28A1A 5%]; 6–8 colors; Subtle gradients only; Mixed temperature; Hue relationships: Complementary; High contrast; Saturation: Rich; Color dominance: Single dominant color. • Typography: Sans-serif; Regular, Medium, Semibold; Normal (1.4); Letter spacing: Normal; Type scale: Modular; Text visual role: Secondary visual element; Text presence: Required; Text integration: Separate; Hierarchy: Clear typographic scale. • Light & Shadow: Artificial; Key light style: Soft; Lighting presence: Implied; Light source count: Ambient; Shadow type: Soft; Lighting mood style: Studio-flat. • Spatial Structure & Hierarchy: Flat perspective; Primary + secondary focal structure; Hierarchy: Strong; Layout axis: Gridless; Symmetry: Asymmetrical balance; Balance: Evenly distributed; Plane separation: Overlap, Shadow; Scale relationship: Human-scale. • Surface, Material & Detail: Texture: Smooth; Imperfection level: Polished; Material simulation: Glass; Semi-representational; Texture usage: Subtle noise; Micro-detail allowance: Allowed; Surface treatment: Material-simulated; Age of surface: New. • Shape Language: Geometric; Primitive dominance: Rectangles, Circles; Edge sharpness: Soft; Curve consistency: Uniform radius; Angle usage: Limited; Silhouette clarity: Recognizable; Negative space usage: Balanced. • Line & Stroke System: None (fill-only). • Inspiration Images: https://piteahvrjstrlirkpoid.supabase.co/storage/v1/object/public/images/public/f96c95a1-3b74-4a11-ad95-9ef1b36818d6.webp. • Custom Style Items: UI aesthetic: Dark-mode dashboard UI with card-based modules, elevated surfaces, and strong accent color (purple) for highlights and key metrics., Component styling: Rounded cards, subtle inner/outer shadows, and minimal iconography; charts use simplified geometric forms (bars/dots/rings) with sparse labeling..

Build a StyleRef for your style

Define it once from your references. Paste it into your AI tool. Get consistent results.Create Your StyleRef — FreeNo account needed