← Previous7 / 26Next →

Current Streams Settings

CurrentAll your team’s work in one place

Design with AI

Create a new design inspired by Current Streams 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,158 words

# Design from Reference: Current Streams 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:** Current
- **Category:** Settings
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/v/4b8c829241e5571f36a8-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:** Neutral workspace-settings modal over a dimmed collaboration feed.
- **Character:** Large light dialog, pale sidebar, black primary action, compact line icons, and sparse stream-management rows.
- **Depth:** Dark translucent backdrop and a broad soft shadow clearly separate the settings surface from the application behind it.

### Page composition

- **Capture and scale:** 2880 × 1642 image px. Estimated CSS dimensions assume a 2× capture, approximately 1440 × 821 CSS px; scale is unverified.
- **Application behind:** Brand/workspace header, central navigation icons, posting/account controls, and stream cards remain visible beneath the dimming layer.
- **Dialog:** Approximately 1024 × 658 CSS px, centered horizontally near x=208–1232 and vertically near y=82–740.
- **Settings sidebar:** Approximately 232px wide, pale gray, spanning the dialog height. Account destinations precede a Workspace group.
- **Main pane:** Approximately 792px wide with about 48px horizontal padding; Streams heading sits above a search-and-create row.
- **Stream list:** Two rows, each with a hash icon and label left, edit and archive-style icon buttons right.
- **Empty area:** Most of the lower main pane remains blank because only two streams are listed.

### Information hierarchy

- **Current location:** Streams is highlighted in the sidebar and repeated as the main-pane heading.
- **Navigation grouping:** Account items sit above the smaller muted Workspace label and its management destinations.
- **Primary action:** Solid black + Stream button is stronger than the outlined search field and pale row actions.
- **List hierarchy:** Stream labels are plain dark text; edit/archive symbols remain secondary.
- **Background hierarchy:** The dimmed feed establishes context without competing with modal controls.

### Typography

- **Family:** Neutral proportional sans serif; exact family is unverified.
- **Pane heading:** Approximately 16px semibold.
- **Sidebar and rows:** Approximately 14px regular with about 20px line-height.
- **Group labels:** Approximately 12px gray, with additional spacing above the Workspace group.
- **Search and button:** Approximately 14px text.
- **Precision:** CSS sizes and weights are visual estimates under the unverified 2× assumption.

### Colors & surfaces

- **Main dialog:** Sampled near-white #FDFDFD.
- **Sidebar and small controls:** Sampled #EFEFEF.
- **Backdrop composite:** Sampled #7E7E7E, with nearby #7D7D7D, #797979, and #7C7C7C reflecting dimmed underlying elements.
- **Primary emphasis:** Black button and dark main labels.
- **Secondary roles:** Gray icons, muted sidebar text, fine search outline, and subtle row separator.
- **Color interpretation:** Backdrop samples describe the composited screenshot, not an identified overlay CSS color or opacity.

### Components

- **Dialog shell:** Approximately 24px corner radius, clipped pale sidebar at left, and soft broad shadow.
- **Sidebar selection:** Rounded gray rectangle about 184 × 32px, with hash icon and dark label.
- **Search field:** Approximately 594 × 32px, thin gray outline, 6px radius, and muted Search streams placeholder.
- **Create action:** Approximately 94 × 32px black rounded rectangle with plus sign and white label.
- **List rows:** Roughly 60px pitch, generous horizontal space, and a fine divider between the two entries.
- **Row actions:** Two small pale rounded squares, each approximately 28px, with edit and archive-style line symbols.
- **Navigation icons:** Small gray outline icons align in a fixed left gutter.
- **State limits:** No stream is being edited and no confirmation is open; icon behavior and destructive effects are not established by the screenshot.

### Visual rhythm

- **Pane alignment:** Heading, search, list icons, and divider share consistent left insets.
- **Toolbar spacing:** Search and create action align on one horizontal baseline with a small gap.
- **Sidebar rhythm:** Compact destinations repeat at roughly 32px pitch, separated into two groups.
- **List restraint:** Two sparse rows and a large blank lower region keep management controls easy to locate.

### Responsive

- **Observed state:** Desktop modal only; mobile and interactive states are unverified.
- **Dialog recommendation:** Use a viewport-constrained width/height with internal scrolling on small or short displays.
- **Navigation recommendation:** Collapse settings navigation into a separate list or menu when the two-pane layout becomes cramped.
- **Toolbar recommendation:** Let search fill the width and place create action on a separate line when necessary.
- **Action recommendation:** Preserve adequate touch targets and explicit accessible names for icon-only row actions.

### Adaptation guidance

- **Preserve:** Two-pane settings organization, clear selected destination, compact search/create toolbar, and restrained management rows.
- **Starting dimensions:** Approximately 1024px dialog, 232px sidebar, 48px pane padding, 32px toolbar controls, and 24px outer radius under the unverified 2× assumption.
- **Content modeling:** Populate stream names and workspace navigation from supplied product data; omit personal account identifiers from reusable examples.
- **Interaction recommendation:** Use accessible dialog focus management and clear labels for edit/archive actions, with confirmation where the actual product requires it.
- **State fidelity:** Treat the two entries and dimmed background as the observed screen only; do not infer permissions, archive semantics, or saved changes.

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