← Previous17 / 41Next →

Supabase Storage Settings

SupabaseThe Open Source Firebase Alternative

Design with AI

Create a new design inspired by Supabase Storage Settings, 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,079 words

# Design from Reference: Supabase Storage Settings

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

## Reference

- **Product:** Supabase
- **Category:** Upgrading
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/v/018ee8607e863baeb7f8-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

- **Character:** A dark developer-settings interface uses layered charcoal surfaces, muted text and restrained green actions.
- **Capture scale:** The screenshot measures 2880 × 1642 image pixels. Approximate CSS dimensions assume a 1440 × 821 viewport at 2× density; the scale is unverified.
- **Tone:** Fine boundaries and compact controls create a practical configuration screen with substantial unused space.

### Page composition

- **Icon rail:** A roughly 56px CSS-wide left strip contains the product mark and stacked navigation icons, with settings selected.
- **Settings navigation:** A second sidebar around 256px wide groups project settings and billing links; Storage is highlighted.
- **Top bar:** Organization/project breadcrumbs sit left of Help, Feedback and notification controls.
- **Main content:** A Storage settings heading and muted subtitle introduce a wide dark panel.
- **Settings panel:** A left label aligns with file-size and unit controls at right, followed by explanatory text, a plan-limit notice and bottom action row.

### Information hierarchy

- **Navigation context:** The selected settings icon and Storage row establish the current area.
- **Setting identity:** Upload file size limit is the only visible setting.
- **Constraint:** A prominent notice explains the fixed free-plan limit and offers an Upgrade to Pro action.
- **Control state:** The value/unit fields and lower save/cancel actions are visibly subdued, while upgrade remains bright.
- **Evidence limit:** Displayed limits and plan terms are captured interface content, not verified current service specifications.

### Typography

- **Family:** A neutral interface sans-serif is visible; exact identity is unverified.
- **Main heading:** Approximately 20px CSS, medium weight, with 28px line-height.
- **Navigation and labels:** Approximately 14px regular-to-medium.
- **Supporting text:** Approximately 14px with 20px line-height, in muted gray.
- **Actions:** Approximately 12–13px medium, compact and tightly aligned.
- **Sidebar groups:** Muted section labels separate project settings from billing options.

### Colors & surfaces

- **Canvas:** Sampled #1C1C1C supplies the main workspace and navigation base.
- **Panel:** Sampled #232323 supplies the settings surface.
- **Notice and controls:** Sampled #282828, #262626 and #2E2E2E create subtle nested layers.
- **Text:** Sampled #BBBBBB supplies readable secondary text; brighter gray/white distinguishes headings.
- **Action green:** Sampled #00A06B supplies the upgrade action and relates to the brand mark.
- **Boundaries:** Thin low-contrast gray rules separate sidebars, top bar and panel footer.

### Components

- **Settings panel:** Approximately 856 × 312px CSS, with a thin dark border and around 6px corner radius.
- **Value controls:** A wide numeric field sits beside a narrower MB selector; both are around 38px high with subtle outlines.
- **Notice strip:** A darker inset horizontal block includes a small clock-style icon, two lines of copy and a right-aligned green action.
- **Panel footer:** A thin divider precedes compact Cancel and Save buttons at the lower right.
- **Navigation selection:** Storage uses a slightly lighter rounded row with a stronger label.
- **Top utilities:** Small outlined dark buttons include leading icons, with a separate square notification control.

### Visual rhythm

- **Main inset:** The content begins roughly 136px inside the main workspace beyond the settings sidebar.
- **Panel padding:** Approximately 32px surrounds the setting controls, with around 24px between major internal blocks.
- **Sidebar cadence:** Compact link rows repeat consistently, with larger breaks between settings and billing groups.
- **Open lower area:** The short panel occupies the upper half, leaving a large uninterrupted charcoal region below.

### Responsive

- **Evidence limit:** Only a desktop state is observed; field behavior, plan upgrade and mobile layouts are unverified.
- **Navigation recommendation:** Collapse both navigation layers into a compact rail and settings drawer as width decreases.
- **Form recommendation:** Stack label, numeric value and unit while preserving the explanatory limit text.
- **Notice recommendation:** Place the upgrade action below its message on narrow screens.
- **Contrast recommendation:** Maintain readable disabled-state text and clear focus against the dark surfaces.

### Adaptation guidance

- **Dark tokens:** Define distinct canvas, panel, inset and border tones rather than using a single black surface.
- **State clarity:** Explain plan restrictions in text and expose disabled controls semantically.
- **Form semantics:** Associate the size input with its label, unit and helper description.
- **Accessibility:** Provide meaningful names for rail icons, keyboard focus and accessible action feedback.
- **Scope:** Reproduce the visible storage-limit setting without inferring additional options or changing project configuration.

## 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.