← Previous17 / 36Next →

Clay Contact Details

ClayBe more thoughtful with the people in your network.

Design with AI

Create a new design inspired by Clay Contact Details, 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,041 words

# Design from Reference: Clay Contact Details

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

## Reference

- **Product:** Clay
- **Category:** Details
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/v/14c10b8d4403e78ee8b0-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 contact profile uses almost-black surfaces, thin separators, white primary text, muted gray detail, and cyan action/tag accents.
- **Evidence:** The screenshot is 2880 × 2776 px, inspected at 1400 px width. Dimensions below estimate a roughly 1440 px CSS layout at 2× capture; ratio is unverified.
- **Density:** A long central biography/experience column is balanced by narrow navigation and contextual side panels.

### Page composition

- **Left rail:** Brand, search, primary navigation, collection/group links, and a bottom New Person action occupy approximately 200 CSS px.
- **Profile header:** A back/title toolbar and small action icons sit above a portrait, contact name, tracked location line, and compact invite badge.
- **Main content:** Bio, social, experience, education, and interests sections stack vertically with thin rules and small uppercase captions.
- **Right context:** A darker side panel holds moments, sources/meeting context, a contact link, and a location map.
- **Bottom:** Several rows of small cyan outlined interest pills conclude the central profile.

### Information hierarchy

- **Identity:** Portrait and name provide the main personal landmark.
- **Section captions:** Small tracked uppercase labels organize the long profile without large headings.
- **Experience:** Roles are white; company/date metadata and descriptions are smaller gray text.
- **Context:** Underlined moment titles and contact/location links distinguish actionable supporting information.
- **Actions:** Cyan Share is prominent in the toolbar; other icon controls remain subdued.

### Typography

- **Family:** A clean sans serif is used; exact identity is unverified.
- **Identity and roles:** Approximately 15–16 px medium weight.
- **Descriptions:** Around 12–13 px with 19 px line-height.
- **Captions:** Approximately 10–11 px uppercase with generous tracking.
- **Tags:** Very small uppercase text around 10–11 px, tightly fitted inside outline pills.

### Colors & surfaces

- **Measured palette:** Source samples include black #000000, near-black #090A0B, dark gray #242424, cyan-blue #0088C3, muted gray #999999, and white #FFFFFF.
- **Semantic use:** Black grounds the central profile and navigation; slightly lighter black distinguishes the context panel.
- **Accents:** Cyan marks sharing, outlined interests, and some link underlines. Small map/location markers introduce warm yellow.
- **Dividers:** Fine dark-gray rules separate toolbar, sections, and contextual groups without card shadows.

### Components

- **Search:** A compact dark rounded field with magnifier, entered text, and clear icon.
- **Portrait:** A circular photograph roughly 94 CSS px in diameter.
- **Toolbar:** Small cyan Share pill plus comment/star/add/more icons with consistent spacing.
- **Profile sections:** Flat stacked content blocks with small caption and full-width lower rule.
- **Interest tags:** Thin cyan pill outlines, uppercase labels, and narrow horizontal/vertical gaps.
- **Context links:** Truncated underlined moment titles pair with small uppercase event metadata.
- **Map:** A dark map region with road labels, location marker, and a top fade into the side-panel background.

### Visual rhythm

- **Column frame:** Central content begins about 35 CSS px beyond the navigation rail and retains broad internal width.
- **Section gaps:** Roughly 35–45 px separates major profile groups.
- **Experience cadence:** Compact role/metadata/description clusters repeat with modest gaps.
- **Context spacing:** Moments, sources, and map are separated by generous vertical blank areas.
- **Contrast:** Sparse cyan accents keep the text-heavy dark page from becoming visually noisy.

### Responsive

- **Observed limit:** Only desktop is supplied; actual mobile/profile editing behavior is unverified.
- **Recommended columns:** Collapse navigation and move contextual groups below the main profile.
- **Recommended tags:** Let interest pills wrap naturally and preserve readable type rather than shrinking.
- **Recommended toolbar:** Keep primary actions accessible while moving secondary icons into a named overflow menu.

### Adaptation guidance

- **Preserve:** Keep the flat dark profile, clear identity block, compact tracked captions, and contextual side information.
- **Implement:** Use structured profile sections and reusable experience/tag components with flexible text wrapping.
- **Privacy:** Use appropriate example data rather than copying personal contact details from the screenshot.
- **Accessibility:** Check small-text contrast, descriptive icon names, keyboard focus, and a text equivalent for location.
- **Validate:** Confirm fonts, CSS scale, long biographies, context overflow, and narrow-screen order. Editing and sharing outcomes are not shown.

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