← Previous36 / 44Next →

Cal.com Account Setup

Cal.comOpen-source scheduling platform

Design with AI

Create a new design inspired by Cal.com Account Setup, 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 934 words

# Design from Reference: Cal.com Account Setup

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

## Reference

- **Product:** Cal.com
- **Category:** Account Setup
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/v/c84e1ab22ffa94b4eb90-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:** Minimal onboarding form with a pale gray page, white bordered card, dark navy action and compact step indicator.
- **Scale:** Source image 2880 × 1630px. Sizes below estimate a 1440 × 815 CSS viewport at 2× capture scale.

### Page composition

- **Centered stack:** The content occupies an approximately 600px-wide column centered horizontally. Introductory copy is inset around 56px relative to the card edges.
- **Introduction:** Welcome to Cal.com! appears near y100, followed by two lines of muted setup guidance and a Step 1 of 5 label with five thin horizontal segments.
- **Form card:** A roughly 600 × 408px white panel begins around y268. It contains username, full name, timezone, a current-time helper and a full-width Next Step action.

### Information hierarchy

- **Sequence:** The welcome heading explains the task, the progress indicator establishes the five-step flow, and the card requests basic profile information.
- **Field distinctions:** Username combines a fixed cal.com/ prefix and an entered slug. Full name is empty; timezone has an existing selection and a chevron.
- **Completion:** The dark Next Step button sits below the time helper. No error, validation message, open select or later step is visible.

### Typography

- **Family:** Modern sans-serif; exact family is unverified.
- **Roles:** Estimated heading 28px/34px bold with slightly tight tracking; introductory copy and labels 14px/20px; progress/helper text around 12px/18px.
- **Control copy:** Input values and action text are approximately 14px regular-to-medium. Muted helper copy is visually subordinate to dark field labels.

### Colors & surfaces

- **Sampled palette:** ICC-aware sRGB samples include page gray #F3F4F6, white #FFFFFF, navy #0F1828, border gray #D0D5DB and pale surface #F9FAFB.
- **Secondary tones:** Additional light samples #E3E7EB and #F0F1F3 support understated boundaries and inactive progress segments.
- **Contrast:** Dark navy marks heading, active first progress segment and primary action; remaining copy uses muted blue-gray. No vivid brand accent is present.

### Components

- **Card:** Approximately 32px interior padding, 5–6px corners and a fine pale border, with no conspicuous drop shadow.
- **Username group:** Approximately 534 × 36px outlined field with a gray-tinted prefix segment separated by a vertical rule; the editable value continues in the same frame.
- **Other controls:** Full-name input is approximately 38px high; timezone select about 42px high, both full width with 6px corners and thin borders.
- **Progress and action:** Five narrow horizontal bars span the intro width with short gaps, only the first dark. Next Step is approximately 534 × 36px with 5px corners, centered white text and a small right arrow.

### Visual rhythm

- **Form spacing:** Labels sit about 10px above controls, with approximately 28px between field groups. Current-time help sits about 12px below the select.
- **Whitespace:** The card and intro are surrounded by broad empty gray space, keeping attention on a short, linear setup task.

### Responsive

- **Recommended adaptation:** Only desktop is observed. Use viewport width minus 32px for the card, align intro padding with the fields and keep all controls in one column.
- **Content handling:** Allow timezone names to truncate or wrap appropriately within an accessible select, while keeping the fixed username prefix readable.

### Adaptation guidance

- **Preserve:** Keep explicit progress, editable profile details, a clearly separated fixed URL prefix and one full-width completion action.
- **Replace:** Use the actual product domain, step count and timezone behavior. Display genuine current-time feedback only if supported by the implementation.

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