Never start a design prompt from scratch again
Skip the guesswork. Prompt like a pro from day one.
We break down what makes top websites convert, then turn it into ready-to-use AI prompts for your own designs. Thousands of curated prompts, each based on a real, high-performing design—no more staring at a blank chat.
Pro
# draftly-footer-01
> Premium footer with three-column navigation, large serif brand wordmark, social links, and diagonal-stripe accent bands in a warm brown palette.
## Overview
A full-width footer featuring a two-column layout (at 64rem+ breakpoint): left side contains three vertical navigation groups (Product, Resources, Legal) stacked in a responsive grid, with a bottom row for copyright/certification and social icons; right side displays a large serif wordmark. Diagonal-stripe accent bands frame the top and bottom edges, with subtle vertical hairlines at the sides. Background is warm brown with light cream text and muted accent elements.
## Color
| Token | Hex | Usage |
|——-|—–|——-|
| Background | #473531 | Footer container background |
| Primary text | #fff6f1 | Navigation links, brand wordmark |
| Muted text | rgba(255,246,241,0.65) | Nav headings, copyright lines, social icons |
| Accent border | rgba(255,246,241,0.3) | Diagonal stripes, vertical/horizontal hairlines |
## Typography
| Element | Font | Weight | Size | Line height | Letter spacing |
|———|——|——–|——|————-|—————–|
| Nav heading | Neue Haas Grotesk Display Pro / Inter / system-ui | 400 | 14px | 24px | 0.08px |
| Nav link | Neue Haas Grotesk Display Pro / Inter / system-ui | 400 | 16px | 24px | 0.08px |
| Copyright/cert line | Neue Haas Grotesk Display Pro / Inter / system-ui | 400 | 14px | 24px | 0.08px |
| Brand wordmark | Recoleta / Newsreader / Cirka / Georgia | 400 | 80px (mobile), 120px (40rem+), 171px (64rem+) | 1 | -1.6px (mobile), -2.4px (40rem+), -3.4227px (64rem+) |
## Spacing & layout
| Property | Value |
|———-|——-|
| Container max-width | 1400px |
| Container padding | 24px (mobile), 40px (40rem+), 84px (64rem+) |
| Container vertical padding | 64px (mobile), 80px (40rem+), 84px (64rem+) |
| Nav column gap (horizontal) | 24px (2-col mobile), 24px (3-col 40rem+) |
| Nav column gap (vertical) | 40px |
| Left/right main gap | 92px (64rem+) |
| Bottom row gap | 24px (mobile), space-between (40rem+) |
| Diagonal stripe height | 40px (top and bottom) |
| Diagonal stripe offset | 28px (left/right) |
| Vertical hairline width | 1px |
| Social icon spacing | 16px |
| Social icon size | 24px container, 18px icon (X/LinkedIn), 20px icon (YouTube) |
| Nav item vertical spacing | 4px top, 5px bottom padding |
| Nav heading bottom padding | 4px |
## Anatomy
– **Footer wrapper**
– Background: #473531
– Position: relative, overflow hidden
– Top diagonal-stripe band (hidden mobile, visible 64rem+)
– Height: 40px
– Style: repeating linear gradient at 115deg with rgba(255,246,241,0.32)
– Border: top and bottom rgba(255,246,241,0.3)
– Bottom diagonal-stripe band (hidden mobile, visible 64rem+)
– Height: 40px
– Same stripe pattern as top
– Border: top rgba(255,246,241,0.3)
– Left vertical hairline (hidden mobile, visible 64rem+)
– Position: 28px from left
– Full height
– Color: rgba(255,246,241,0.3)
– Right vertical hairline (hidden mobile, visible 64rem+)
– Position: 28px from right
– Full height
– Color: rgba(255,246,241,0.3)
– **Main container**
– Max-width: 1400px
– Layout: flex column (mobile/40rem), flex row (64rem+)
– Gap: 48px (mobile/40rem), 92px (64rem+)
– **Left section** (flex-1, flex column)
– Height: 482px (64rem+)
– Gap: 48px
– **Navigation grid**
– Layout: 2 columns (mobile), 3 columns (40rem+)
– Column gap: 24px
– Row gap: 40px
– **Nav column** (repeated 3×)
– **Heading**
– Font: SANS, 14px, 400
– Line height: 24px
– Letter spacing: 0.08px
– Color: rgba(255,246,241,0.65)
– Padding bottom: 4px
– **Link list**
– Layout: flex column
– **Link item**
– Font: SANS, 16px, 400
– Line height: 24px
– Letter spacing: 0.08px
– Color: #fff6f1
– Padding: 4px top, 5px bottom
– Hover: opacity 80%
– **Bottom row**
– Layout: flex column (mobile), flex row space-between (40rem+)
– Gap: 24px
– **Copyright list**
– Layout: flex row, wrap
– Gap: 20px (horizontal), 8px (vertical)
– Font: SANS, 14px, 400
– Line height: 24px
– Letter spacing: 0.08px
– Color: rgba(255,246,241,0.65)
– Whitespace: nowrap per item
– **Social icon list**
– Layout: flex row
– Gap: 16px
– **Social link** (3×: X, LinkedIn, YouTube)
– Size: 24px
– Icon size: 18px (X/LinkedIn), 20px (YouTube)
– Color: rgba(255,246,241,0.65)
– Opacity: 90% default, 100% hover
– Fill: currentColor
– **Right section** (wordmark container, 64rem+)
– Width: 600px
– Shrink: 0
– Layout: flex, items-end, justify-start (mobile), justify-end (64rem+)
– **Brand wordmark**
– Font: SERIF, 400
– Size: 80px (mobile), 120px (40rem+), 171px (64rem+)
– Line height: 1 (solid)
– Letter spacing: -1.6px (mobile), -2.4px (40rem+), -3.4227px (64rem+)
– Color: #fff6f1
– Default brand text: “Draftly”
## Interactions / states
– **Nav links**: Opacity transitions to 80% on hover
– **Social icons**: Opacity transitions from 90% to 100% on hover; base color rgba(255,246,241,0.65)
– **Responsive breakpoints**:
– Mobile: 2-column nav grid, vertical bottom row, 80px wordmark
– 40rem+ (tablet): 3-column nav grid, horizontal space-between bottom row, 120px wordmark
– 64rem+ (desktop): 2-column flex layout (left/right), diagonal stripes and hairlines visible, 171px wordmark, 482px left section height
– **Reduced motion**: not specified
– **Focus states**: not specified
Free
# draftly-cta-01
> Full-bleed CTA section with atmospheric background image and a cream call-to-action card containing serif headline, body copy, and primary button, with vertical hairline grid overlay.
## Overview
Full-bleed section with a background image covering the entire viewport. A cream-colored card positioned right-aligned (on desktop) or center-aligned (on mobile) contains a serif headline, sans-serif body copy, and a dark button. Four vertical hairlines (at 28px from left edge, center, 28px from right edge, and ~91.67% across) create a subtle grid overlay at breakpoint 64rem and above.
## Color
| Token | Hex | Usage |
|——-|—–|——-|
| Card background | #fff6f1 | CTA card fill |
| Card text | #473531 | Heading, body copy color |
| Button background | #473531 | CTA button fill |
| Button text | #fff6f1 | CTA button label color |
| Hairline overlay | rgba(255,246,241,0.3) | Vertical grid lines |
## Typography
| Element | Font | Weight | Size | Line height | Letter spacing |
|———|——|——–|——|————-|—————–|
| Heading | Recoleta, Newsreader, Cirka, Georgia, serif | not specified | 28px (mobile), 36px (@40rem), 40px (@64rem) | 1.1 | –0.56px (mobile), –0.72px (@40rem), –0.8px (@64rem) |
| Body copy | Neue Haas Grotesk Display Pro, Inter, system-ui, sans-serif | not specified | 16px | 1.6 | 0.16px |
| Button label | Neue Haas Grotesk Display Pro, Inter, system-ui, sans-serif | not specified | 14px | 1.6 | not specified |
## Spacing & layout
| Property | Value |
|———-|——-|
| Container width | Full width, overflow hidden |
| Section padding | 16px horizontal, 16px vertical (mobile); 40px horizontal, 20px vertical (@40rem); 84px all sides (@64rem) |
| Card max-width | 639px |
| Card padding | 28px (@mobile), 34px (@40rem) |
| Card gap (heading to body to button) | 18px |
| Button padding | 24px horizontal, 8px vertical |
| Button border-radius | 8px |
| Hairline positions | Left: 28px, Center: 50%, Right: 28px from right, Far right: 91.67% + 36px – 28px (desktop only) |
## Anatomy
– **Section container**
– Full-bleed, position relative, isolate z-index
– Background image layer (absolute, inset 0, z-index –10)
– `![]()
` with object-cover, full size
– Vertical hairline overlays (4 lines, hidden below @64rem)
– Left edge hairline: 28px from left, 1px wide, rgba(255,246,241,0.3)
– Right edge hairline: 28px from right, 1px wide, rgba(255,246,241,0.3)
– Center hairline: 50% left offset, 1px wide, rgba(255,246,241,0.3)
– Far-right hairline: 91.67% + offset, 1px wide, rgba(255,246,241,0.3)
– Content wrapper (relative, flex, center-aligned mobile; right-aligned @64rem)
– **CTA card**
– Background: #fff6f1
– Padding: 28px (mobile), 34px (@40rem)
– Gap: 18px (flex column, items-start)
– Overflow: hidden
– **Heading**
– Font family: Recoleta serif
– Size: 28px (mobile), 36px (@40rem), 40px (@64rem)
– Line height: 1.1
– Tracking: –0.56px (mobile), –0.72px (@40rem), –0.8px (@64rem)
– Color: #473531
– **Body paragraph**
– Font family: Neue Haas Grotesk Display Pro sans
– Size: 16px
– Line height: 1.6
– Tracking: 0.16px
– Color: #473531
– **CTA button (link element)**
– Background: #473531
– Text color: #fff6f1
– Font family: Neue Haas Grotesk Display Pro sans
– Size: 14px
– Line height: 1.6
– Padding: 24px horizontal, 8px vertical
– Border-radius: 8px
– Display: inline-flex, centered, overflow hidden
– Transition: opacity on hover
## Interactions / states
– **Button hover**: opacity changes to 0.9 (transition applied)
– **Responsive breakpoints**:
– Mobile (default): centered card, smaller padding and text, hairlines hidden
– @40rem: increased padding and heading size
– @64rem: card right-aligned, largest text sizes, hairlines visible
– **Background image**: object-cover ensures full coverage
– **Hairlines**: pointer-events-none, aria-hidden (decorative)
Pro
Free
# draftly-cta-01
> Full-bleed CTA section with atmospheric background image and a cream call-to-action card containing serif headline, body copy, and primary button, with vertical hairline grid overlay.
## Overview
Full-bleed section with a background image covering the entire viewport. A cream-colored card positioned right-aligned (on desktop) or center-aligned (on mobile) contains a serif headline, sans-serif body copy, and a dark button. Four vertical hairlines (at 28px from left edge, center, 28px from right edge, and ~91.67% across) create a subtle grid overlay at breakpoint 64rem and above.
## Color
| Token | Hex | Usage |
|——-|—–|——-|
| Card background | #fff6f1 | CTA card fill |
| Card text | #473531 | Heading, body copy color |
| Button background | #473531 | CTA button fill |
| Button text | #fff6f1 | CTA button label color |
| Hairline overlay | rgba(255,246,241,0.3) | Vertical grid lines |
## Typography
| Element | Font | Weight | Size | Line height | Letter spacing |
|———|——|——–|——|————-|—————–|
| Heading | Recoleta, Newsreader, Cirka, Georgia, serif | not specified | 28px (mobile), 36px (@40rem), 40px (@64rem) | 1.1 | –0.56px (mobile), –0.72px (@40rem), –0.8px (@64rem) |
| Body copy | Neue Haas Grotesk Display Pro, Inter, system-ui, sans-serif | not specified | 16px | 1.6 | 0.16px |
| Button label | Neue Haas Grotesk Display Pro, Inter, system-ui, sans-serif | not specified | 14px | 1.6 | not specified |
## Spacing & layout
| Property | Value |
|———-|——-|
| Container width | Full width, overflow hidden |
| Section padding | 16px horizontal, 16px vertical (mobile); 40px horizontal, 20px vertical (@40rem); 84px all sides (@64rem) |
| Card max-width | 639px |
| Card padding | 28px (@mobile), 34px (@40rem) |
| Card gap (heading to body to button) | 18px |
| Button padding | 24px horizontal, 8px vertical |
| Button border-radius | 8px |
| Hairline positions | Left: 28px, Center: 50%, Right: 28px from right, Far right: 91.67% + 36px – 28px (desktop only) |
## Anatomy
– **Section container**
– Full-bleed, position relative, isolate z-index
– Background image layer (absolute, inset 0, z-index –10)
– `![]()
` with object-cover, full size
– Vertical hairline overlays (4 lines, hidden below @64rem)
– Left edge hairline: 28px from left, 1px wide, rgba(255,246,241,0.3)
– Right edge hairline: 28px from right, 1px wide, rgba(255,246,241,0.3)
– Center hairline: 50% left offset, 1px wide, rgba(255,246,241,0.3)
– Far-right hairline: 91.67% + offset, 1px wide, rgba(255,246,241,0.3)
– Content wrapper (relative, flex, center-aligned mobile; right-aligned @64rem)
– **CTA card**
– Background: #fff6f1
– Padding: 28px (mobile), 34px (@40rem)
– Gap: 18px (flex column, items-start)
– Overflow: hidden
– **Heading**
– Font family: Recoleta serif
– Size: 28px (mobile), 36px (@40rem), 40px (@64rem)
– Line height: 1.1
– Tracking: –0.56px (mobile), –0.72px (@40rem), –0.8px (@64rem)
– Color: #473531
– **Body paragraph**
– Font family: Neue Haas Grotesk Display Pro sans
– Size: 16px
– Line height: 1.6
– Tracking: 0.16px
– Color: #473531
– **CTA button (link element)**
– Background: #473531
– Text color: #fff6f1
– Font family: Neue Haas Grotesk Display Pro sans
– Size: 14px
– Line height: 1.6
– Padding: 24px horizontal, 8px vertical
– Border-radius: 8px
– Display: inline-flex, centered, overflow hidden
– Transition: opacity on hover
## Interactions / states
– **Button hover**: opacity changes to 0.9 (transition applied)
– **Responsive breakpoints**:
– Mobile (default): centered card, smaller padding and text, hairlines hidden
– @40rem: increased padding and heading size
– @64rem: card right-aligned, largest text sizes, hairlines visible
– **Background image**: object-cover ensures full coverage
– **Hairlines**: pointer-events-none, aria-hidden (decorative)
Pro
# draftly-footer-01
> Premium footer with three-column navigation, large serif brand wordmark, social links, and diagonal-stripe accent bands in a warm brown palette.
## Overview
A full-width footer featuring a two-column layout (at 64rem+ breakpoint): left side contains three vertical navigation groups (Product, Resources, Legal) stacked in a responsive grid, with a bottom row for copyright/certification and social icons; right side displays a large serif wordmark. Diagonal-stripe accent bands frame the top and bottom edges, with subtle vertical hairlines at the sides. Background is warm brown with light cream text and muted accent elements.
## Color
| Token | Hex | Usage |
|——-|—–|——-|
| Background | #473531 | Footer container background |
| Primary text | #fff6f1 | Navigation links, brand wordmark |
| Muted text | rgba(255,246,241,0.65) | Nav headings, copyright lines, social icons |
| Accent border | rgba(255,246,241,0.3) | Diagonal stripes, vertical/horizontal hairlines |
## Typography
| Element | Font | Weight | Size | Line height | Letter spacing |
|———|——|——–|——|————-|—————–|
| Nav heading | Neue Haas Grotesk Display Pro / Inter / system-ui | 400 | 14px | 24px | 0.08px |
| Nav link | Neue Haas Grotesk Display Pro / Inter / system-ui | 400 | 16px | 24px | 0.08px |
| Copyright/cert line | Neue Haas Grotesk Display Pro / Inter / system-ui | 400 | 14px | 24px | 0.08px |
| Brand wordmark | Recoleta / Newsreader / Cirka / Georgia | 400 | 80px (mobile), 120px (40rem+), 171px (64rem+) | 1 | -1.6px (mobile), -2.4px (40rem+), -3.4227px (64rem+) |
## Spacing & layout
| Property | Value |
|———-|——-|
| Container max-width | 1400px |
| Container padding | 24px (mobile), 40px (40rem+), 84px (64rem+) |
| Container vertical padding | 64px (mobile), 80px (40rem+), 84px (64rem+) |
| Nav column gap (horizontal) | 24px (2-col mobile), 24px (3-col 40rem+) |
| Nav column gap (vertical) | 40px |
| Left/right main gap | 92px (64rem+) |
| Bottom row gap | 24px (mobile), space-between (40rem+) |
| Diagonal stripe height | 40px (top and bottom) |
| Diagonal stripe offset | 28px (left/right) |
| Vertical hairline width | 1px |
| Social icon spacing | 16px |
| Social icon size | 24px container, 18px icon (X/LinkedIn), 20px icon (YouTube) |
| Nav item vertical spacing | 4px top, 5px bottom padding |
| Nav heading bottom padding | 4px |
## Anatomy
– **Footer wrapper**
– Background: #473531
– Position: relative, overflow hidden
– Top diagonal-stripe band (hidden mobile, visible 64rem+)
– Height: 40px
– Style: repeating linear gradient at 115deg with rgba(255,246,241,0.32)
– Border: top and bottom rgba(255,246,241,0.3)
– Bottom diagonal-stripe band (hidden mobile, visible 64rem+)
– Height: 40px
– Same stripe pattern as top
– Border: top rgba(255,246,241,0.3)
– Left vertical hairline (hidden mobile, visible 64rem+)
– Position: 28px from left
– Full height
– Color: rgba(255,246,241,0.3)
– Right vertical hairline (hidden mobile, visible 64rem+)
– Position: 28px from right
– Full height
– Color: rgba(255,246,241,0.3)
– **Main container**
– Max-width: 1400px
– Layout: flex column (mobile/40rem), flex row (64rem+)
– Gap: 48px (mobile/40rem), 92px (64rem+)
– **Left section** (flex-1, flex column)
– Height: 482px (64rem+)
– Gap: 48px
– **Navigation grid**
– Layout: 2 columns (mobile), 3 columns (40rem+)
– Column gap: 24px
– Row gap: 40px
– **Nav column** (repeated 3×)
– **Heading**
– Font: SANS, 14px, 400
– Line height: 24px
– Letter spacing: 0.08px
– Color: rgba(255,246,241,0.65)
– Padding bottom: 4px
– **Link list**
– Layout: flex column
– **Link item**
– Font: SANS, 16px, 400
– Line height: 24px
– Letter spacing: 0.08px
– Color: #fff6f1
– Padding: 4px top, 5px bottom
– Hover: opacity 80%
– **Bottom row**
– Layout: flex column (mobile), flex row space-between (40rem+)
– Gap: 24px
– **Copyright list**
– Layout: flex row, wrap
– Gap: 20px (horizontal), 8px (vertical)
– Font: SANS, 14px, 400
– Line height: 24px
– Letter spacing: 0.08px
– Color: rgba(255,246,241,0.65)
– Whitespace: nowrap per item
– **Social icon list**
– Layout: flex row
– Gap: 16px
– **Social link** (3×: X, LinkedIn, YouTube)
– Size: 24px
– Icon size: 18px (X/LinkedIn), 20px (YouTube)
– Color: rgba(255,246,241,0.65)
– Opacity: 90% default, 100% hover
– Fill: currentColor
– **Right section** (wordmark container, 64rem+)
– Width: 600px
– Shrink: 0
– Layout: flex, items-end, justify-start (mobile), justify-end (64rem+)
– **Brand wordmark**
– Font: SERIF, 400
– Size: 80px (mobile), 120px (40rem+), 171px (64rem+)
– Line height: 1 (solid)
– Letter spacing: -1.6px (mobile), -2.4px (40rem+), -3.4227px (64rem+)
– Color: #fff6f1
– Default brand text: “Draftly”
## Interactions / states
– **Nav links**: Opacity transitions to 80% on hover
– **Social icons**: Opacity transitions from 90% to 100% on hover; base color rgba(255,246,241,0.65)
– **Responsive breakpoints**:
– Mobile: 2-column nav grid, vertical bottom row, 80px wordmark
– 40rem+ (tablet): 3-column nav grid, horizontal space-between bottom row, 120px wordmark
– 64rem+ (desktop): 2-column flex layout (left/right), diagonal stripes and hairlines visible, 171px wordmark, 482px left section height
– **Reduced motion**: not specified
– **Focus states**: not specified
Pro
okay now you know who we are
Come build with us.
Try Web2Prompt free. Follow along on what we’re building. If you have a problem we should solve or a format we should add — reach out. We actually read every single email. Not a bot. Not a template. Us.