← Previous37 / 52Next →

Cake Equity Valuation Dashboard

Cake EquityEquity Management Software

Design with AI

Create a new design inspired by Cake Equity Valuation Dashboard, with your own content.

1Content

2Fidelity to the reference

Keeps its visual language, rearranges freely around your content.

3Your brand Optional

Use the reference style

Brand nameColorsFontsGuidelines

4Output

Prompt 1,153 words

# Design from Reference: Cake Equity Valuation Dashboard

Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.

## Reference

- **Product:** Cake Equity
- **Category:** Dashboard
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/v/85239d076f8019b81312-1600.webp)

Analyze the attached screenshot first. If no image is attached, open the screenshot link; if neither is accessible, ask for it rather than guessing.

## Visual Design Context

### Overall aesthetic

- **Style:** Spacious equity-management dashboard with navy typography, vivid violet actions and thin cool-gray borders.
- **Character:** A white application shell supports a simple valuation summary, a large purple area chart and a settings panel; a lime success toast adds feedback.

### Page composition

- **Canvas:** Source 2880 × 1684 image pixels. Measurements use the 1400 × 819 inspection rendering; a 2× source-to-CSS capture is plausible but unverified.
- **Top bar:** Approximately 62px tall, with logo/workspace selection left and onboarding progress, utility icons, invitation, upgrade, view switch and avatar across the right.
- **Sidebar:** About 248px wide, divided from content by a fine rule. Equity is expanded into indented subitems; other groups use icons and chevrons.
- **Main area:** Begins around x288. Page heading and Add valuation action share the top row; a 389px summary column sits left of a roughly 646px chart/settings column.
- **Bottom:** Fine-print legal copy spans the main area; a success toast appears lower left and a round purple chat launcher lower right.

### Information hierarchy

- **Primary task:** Valuations heading and purple Add valuation button establish the page purpose.
- **Latest value:** A Most recent valuation subheading precedes a bordered card with a large euro value, smaller date and outlined trash control.
- **History:** A single purple area plot rises from the lower-left corner to a labeled value, then remains flat across the panel.
- **Visibility:** A separate bordered panel explains visibility and presents two purple toggles for distinct holder groups.
- **Feedback:** A pale lime confirmation toast with check icon indicates a successful addition in the captured state.

### Typography

- **Page/value:** Approximately 34px bold navy; major subsection heading around 25px bold.
- **Panel heading:** Approximately 18px bold with 23px line height.
- **Navigation/body:** Approximately 14px medium for navigation and regular for explanatory text, with around 20px line height.
- **Small roles:** Top-bar labels about 12–14px, chart badge around 10px bold, legal text around 11px and version note around 10px. Font family is unverified.

### Colors & surfaces

- **Measured palette:** White #FFFFFF canvas, navy #242452 text, violet #6036FF accent and muted slate #6E7286.
- **Measured secondary surfaces:** #F4F8F9 and #EBF1F2 provide cool neutral fills/borders; #E9E3FF supplies pale violet chart-area tones.
- **Success:** #EBF9D0 is the pale lime notification fill, paired with a stronger green check icon.
- **Chart treatment:** A thin violet line bounds a translucent purple area fading lighter toward the bottom; it is the page’s largest colored region.

### Components

- **Summary card:** Approximately 389 × 107px, thin pale outline, about 7px radius and 24px padding. The trash control is roughly 39px square with a thin navy outline.
- **Chart panel:** Approximately 646 × 252px with a subtle border and 8px radius. Small pill label sits at the rising-to-flat transition; no axes or gridlines are visible.
- **Settings panel:** Approximately 646 × 200px, 16px padding, thin outline and 8px radius. Two small violet switches sit inline with their labels, with the longer label wrapping.
- **Primary action:** Approximately 149 × 40px, violet fill, white label, leading plus and about 8px radius.
- **Top-bar controls:** Outlined invite action, violet upgrade button, segmented view switch, circular progress indicator and avatar form a compact utility group.
- **Feedback/support:** Success toast is approximately 251 × 47px with 8px radius; chat launcher about 47px across. No tooltip, modal or hover state is captured.

### Visual rhythm

- **Content gaps:** About 39px separates the summary and right column; roughly 40px separates chart and settings panel.
- **Navigation cadence:** Main items follow a roughly 39px pitch, with expanded equity links aligned to an indented guide.
- **Panel spacing:** Titles, value/date and settings copy use compact 8–16px gaps within otherwise airy panels.
- **Bottom space:** Legal copy and toast sit below the content panels, preserving a broad white lower region.

### Responsive

- **Observed scope:** Desktop only; chart interactions and mobile behavior are unverified.
- **Recommended shell:** Collapse the navigation rail and reduce top-bar utilities into a menu while retaining the primary action.
- **Recommended columns:** Stack the summary, chart and visibility settings in that order; preserve readable chart labels and fluid panel widths.
- **Recommended controls:** Wrap visibility toggles into separate rows and keep chat/toast controls clear of essential actions.

### Adaptation guidance

- **Preserve:** Navy/violet hierarchy, simple valuation history, distinct visibility panel and contextual success feedback.
- **Data fidelity:** Bind value, date and plotted history to supplied records; do not invent trends or chart axes beyond the available data.
- **Interaction:** Define accessible toggle states, valuation entry, deletion confirmation and chart details explicitly; the capture only shows the resulting dashboard.
- **Scaling:** Reconstruct with responsive grid columns and shared border/radius tokens rather than fixed screenshot coordinates.

## Content

**Instructions:**

Generate realistic example content that fits the selected design reference.

Create appropriate headlines, descriptions, labels, buttons, and supporting copy based on the type of interface being designed.

If a product or business description is provided, use it to guide the content.

Otherwise, invent a plausible fictional SaaS product appropriate for the reference.

Keep the content concise, coherent, and visually balanced.

Do not present fictional statistics, customer names, or testimonials as verified facts.

## Design Direction

**Instructions:**

Use the reference screenshot as the main source of visual inspiration rather than a strict layout template.

Preserve its most distinctive design characteristics, such as typography, visual rhythm, color relationships, component treatments, and overall aesthetic.

Feel free to modify section arrangements, proportions, spacing, and individual components to better suit my content.

Introduce original design decisions where they improve usability, composition, or brand consistency.

The result should clearly reflect the reference's visual language without looking like a direct reproduction.

Follow the visual identity of the reference design.

Use its typography, color palette, component styling, and overall aesthetic as the primary design direction.

Do not introduce an unrelated visual identity.

## Output

**Instructions:**

Generate a high-fidelity visual mockup of the requested interface.

Present the design as a polished, realistic website or product UI screenshot.

Prioritize visual composition, typography, spacing, colors, alignment, and component details.

Use the available image-generation or visual-design capabilities.

Do not replace the mockup with source code, a written design specification, or a textual description.

If direct visual generation is unavailable, clearly explain the limitation.

## Constraints

- Use the actual screenshot as the primary visual reference.
- Preserve essential messaging and factual accuracy.
- Prioritize visual quality and consistency.
- Do not invent unsupported product claims.
- Adapt structure and copy length for visual balance.

Reference imageAttach it to your message: assistants can’t open image links.

Build it in

Opening a tool copies the screenshot so you can paste it with your prompt.