# 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

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

Copy Prompt