Palette — Social-first friendly sign-up

{"summary": "A warm, social-first sign-up screen: a two-column hero+signup landing on a cream canvas under a sticky blurred nav, where the LEFT column is a friendly product pitch (an eyebrow pill, a big tracking-tight headline with a hand-drawn teal underline on one accent word, a value paragraph, a three-item teal-check benefit list, and a stacked-avatar social-proof cluster with a 5-star rating) and the RIGHT column is a white rounded-4xl account-creation card that leads with three full-width stacked social-auth buttons (Google, GitHub, Apple) ABOVE an 'or sign up with email' divider, then a single icon-leading email field and a coral 'Create account' CTA, a legal footnote, and a 'Log in' footer. Below the fold: a 'Trusted by' logo marquee, a three-step 'how it works' section, a dark gradient CTA band, and a light social footer. Friendly indie-maker SaaS aesthetic (cream + coral + teal, Poppins), in the lineage of the 21st.dev / Tailark 'Login 1' social-first auth pattern.", "style": {"description": "Warm, friendly, approachable indie-maker SaaS aesthetic on a soft cream canvas with a coral primary accent and a teal secondary accent, set in Poppins. Rounded, pillowy surfaces (rounded-2xl inputs/buttons, rounded-4xl = 2rem cards), hairline cream borders, soft layered shadows with a coral-tinted glow under the hero card, decorative blurred coral/teal blobs and a faint two-color radial grain behind the hero, and playful touches (a hand-drawn SVG underline, a 5-star rating, gradient avatar chips). High polish, high warmth, low noise.", "prompt": "Warm, friendly indie-maker SaaS sign-up + landing screen. Background canvas cream #fdf9f3; cards/surfaces white #ffffff. Typeface: Poppins (weights 400/500/600/700/800) from Google Fonts, antialiased, with sans fallback ui-sans-serif, system-ui, sans-serif. Two accent hues: a coral primary scale (DEFAULT #ff7a59, 600 #c8431f, 700 #b83a16) and a teal secondary scale (DEFAULT #2bb6a3, 600 #1fa18f, 700 #16776a). Neutrals: ink (headings/body strong) #23201d, muted (secondary text) #736c63, line (hairline borders) #efe6d8. Custom radius token 4xl = 2rem (the signup card and how-it-works cards), with rounded-2xl (16px) on inputs/buttons and rounded-full pills. Three named shadows: soft = 0 1px 2px rgba(35,32,29,.04), 0 12px 30px -12px rgba(35,32,29,.16); card = 0 2px 4px rgba(35,32,29,.04), 0 24px 60px -22px rgba(255,122,89,.28) (a coral-tinted glow under the signup card); btn = 0 8px 20px -8px rgba(255,122,89,.55) (under coral buttons). Behind the hero: a .grain layer = two soft radial gradients (radial-gradient at 12% 18% rgba(255,122,89,.10) and at 88% 8% rgba(43,182,163,.12)), plus two large blurred decorative blobs (a coral/20 blur-3xl orb top-left, a teal/20 blur-3xl orb mid-right). Inputs use a focus-within ring (box-shadow 0 0 0 4px rgba(255,122,89,.18) + border #ff7a59). Icons via Iconify (Phosphor 'ph:*' set for UI glyphs, plus mdi:github / mdi:apple / mdi:twitter / mdi:discord and an inline multi-color Google logo SVG). Smooth, low-key motion: a 26s horizontal logo marquee and a 6s vertical float on one CTA blob. Voice is warm and human ('From prompt to UI in one breath', 'Free to start, no card needed'), zero em-dashes."}, "layout_and_structure": {"description": "A full-width sticky blurred nav, then a full-bleed hero section that is a two-column grid (left product pitch, right signup card) over decorative blobs + grain, then a logo marquee strip, a three-step 'how it works' section, a dark gradient CTA band, and a light footer. Everything is centered in a mx-auto max-w-6xl px-6 container. Below lg the hero stacks to one column, the nav center links and 'Log in' link hide, the social buttons stay full-width stacked, and the how-it-works / footer rows reflow to single column.", "prompts": [{"part": "Sticky blurred nav", "prompt": "A sticky top-0 z-50 header, background cream #fdf9f3 at 80% opacity with backdrop-blur-md over a 1px border-b border-line/70. Inner nav is mx-auto max-w-6xl px-6, 64px tall (h-16), items-center justify-between. LEFT: brand lockup = a 36px (w-9 h-9) rounded-xl tile with a coral-to-coral-700 gradient (from-coral to-coral-700), a white ph:sparkle-fill glyph and the btn shadow, beside a bold 18px tracking-tight 'Palette' wordmark. CENTER (hidden below md): nav links 'How it works' / 'Prompt library' / 'Pricing' at 15px medium muted #736c63, hover ink. RIGHT: a 'Log in' text link (hidden on xs, ink/80 hover ink) and a solid bg-ink #23201d rounded-full 'Get started' pill (14px semibold white, px-4 py-2.5) with a trailing ph:arrow-right-bold icon."}, {"part": "Hero section shell + decorative background", "prompt": "A relative overflow-hidden section (id 'signup') carrying the .grain radial-gradient background. Two pointer-events-none absolute decorative blobs sit behind the content: a w-80 h-80 rounded-full bg-coral/20 blur-3xl orb pinned -top-24 -left-24, and a w-96 h-96 rounded-full bg-teal/20 blur-3xl orb pinned top-40 -right-20. The content is a mx-auto max-w-6xl px-6 py-16 (lg:py-24) grid that is one column by default and lg:grid-cols-2 with gap-12 (lg:gap-16), items-center."}, {"part": "Hero LEFT — product pitch", "prompt": "A max-w-xl column. Top to bottom: (1) an eyebrow pill = inline-flex rounded-full bg-white border border-line px-3.5 py-1.5, 13px font-semibold text-teal-700, soft shadow, a leading ph:lightning-fill icon and the text 'From prompt to UI in one breath'. (2) A big headline h1, text-[2.6rem] leading-[1.08] (sm:text-5xl lg:text-[3.4rem]) font-extrabold tracking-tight: 'Design your next ' then an inline coral-600 accent word 'screen' that carries a hand-drawn underline (an absolute SVG positioned -bottom-1.5, full width, a single teal #16776a stroke-width-4 round-cap path), then ' by just describing it.'. (3) A 18px muted lead paragraph ('Palette is the AI design agent for builders. Type a sentence, get real mockups, components, and full flows on an infinite canvas. Free to start, no card needed.'). (4) A space-y-3.5 benefit list of three rows, each a flex items-center gap-3 15px font-medium line led by a 24px (w-6 h-6) rounded-full bg-teal/15 text-teal-700 chip holding a ph:check-bold icon ('2,000+ free prompts in the community library', 'Works in the browser or from your coding agent', 'Export clean code, ready to ship'). (5) A social-proof cluster (mt-10 flex items-center gap-4): a -space-x-3 stack of four 40px (w-10 h-10) rounded-full ring-2 ring-cream avatar chips (gradient coral, gradient teal, amber-to-coral, then a solid bg-ink chip with white '9k' text), beside a two-line block = a row of five coral-600 ph:star-fill icons over 'Loved by 9,000+ makers shipping faster' (the count bold ink)."}, {"part": "Hero RIGHT — social-first signup card", "prompt": "A relative w-full max-w-md column (mx-auto, lg:ml-auto lg:mr-0). Behind it: an absolute -inset-3 rounded-[2.4rem] coral/15-to-teal/15 gradient blur-xl halo. The card itself is bg-white rounded-4xl (2rem) border border-line shadow-card (the coral-tinted glow) overflow-hidden. Body padding px-7 (sm:px-9) pt-9 pb-7. Top to bottom: (1) a centered heading block = a 14px font-semibold text-coral-600 eyebrow 'Welcome to Palette' over a 24px font-bold tracking-tight 'Create your free account'. (2) THE SOCIAL-FIRST BLOCK (the signature): mt-8 flex flex-col gap-3 of THREE full-width stacked social buttons, each a group w-full inline-flex items-center justify-center gap-3 h-12 rounded-2xl bg-white border border-line, 15px font-semibold ink, hover border-coral/50 + bg-coral/[.03]. Button 1 = an inline multi-color Google logo SVG + 'Continue with Google'; button 2 = a mdi:github glyph + 'Continue with GitHub'; button 3 = a mdi:apple glyph + 'Continue with Apple'. (3) An 'or sign up with email' divider (my-7 flex items-center gap-4: a flex-1 1px bg-line rule, 13px font-medium muted label, another rule). (4) The email field (flex flex-col gap-4): a 14px font-semibold ink/80 'Email' label over an input group = a focus-ring flex items-center gap-2.5 h-12 rounded-2xl border border-line bg-cream/60 px-4 with a leading muted ph:envelope-simple icon and a transparent 15px email input (placeholder 'you@example.com'); then a full-width h-12 rounded-2xl coral-600-to-coral-700 gradient 'Create account' CTA (15px font-bold white, btn shadow, hover brightness-110, active translate-y-px) with a trailing ph:arrow-right-bold icon. (5) An mt-5 centered 12px muted legal footnote: 'By continuing you agree to our Terms and Privacy Policy.' (the two links teal-700 semibold). FOOTER strip: a border-t border-line bg-cream/50 px-7 py-5 centered line 'Already have an account? Log in' with a coral-600 semibold 'Log in' link."}, {"part": "Logo marquee strip", "prompt": "A full-width section, border-y border-line, bg-white/60, overflow-hidden. Inner mx-auto max-w-6xl px-6 py-6 flex items-center gap-6: a shrink-0 12px font-semibold uppercase tracking-widest muted label 'Trusted by teams at', then a relative flex-1 overflow-hidden track holding a .marquee flex items-center gap-12 w-max row of duplicated placeholder logos (each a flex items-center gap-2 font-bold text-lg = an Iconify glyph like ph:cube-fill / ph:hexagon-fill / ph:planet-fill / ph:diamond-fill / ph:lightning-fill + a name like Foundry / Northwind / Orbital / Brightly / Voltline). The .marquee animates translateX 0 -> -50% over 26s linear infinite (the set duplicated for a seamless loop)."}, {"part": "How-it-works section", "prompt": "A py-20 (lg:py-28) section (id 'how'), mx-auto max-w-6xl px-6. A centered max-w-2xl header: a teal pill (rounded-full bg-teal/10 px-3.5 py-1.5, 13px font-semibold text-teal-700, a leading ph:path-fill icon, 'Three steps, zero friction'), a 30px (sm:36px) font-extrabold tracking-tight heading 'From idea to interface, fast.', and an 18px muted lead. Below, an mt-14 grid (md:grid-cols-3) gap-6 of three cards, each a group bg-white rounded-4xl border border-line p-7 soft shadow, hover -translate-y-1: a 48px (w-12 h-12) rounded-2xl icon tile (alternating bg-coral/12 text-coral-700 and bg-teal/12 text-teal-700, holding ph:chat-teardrop-text-fill / ph:magic-wand-fill / ph:code-fill), a 12px font-bold uppercase tracking-widest muted 'Step 01/02/03' label, a 20px font-bold title ('Describe it' / 'Watch it build' / 'Ship the code') and a 15px muted body line."}, {"part": "Dark gradient CTA band", "prompt": "A px-6 pb-24 section (id 'pricing'), mx-auto max-w-6xl. A relative overflow-hidden rounded-[2.6rem] panel with an ink-to-#2c2723 gradient, px-8 py-14 (sm:px-16 sm:py-16), text-center. Behind it: two pointer-events-none absolute blurred orbs (a 288px coral/30 blur-3xl orb top-right that floats on a 6s float keyframe, and a 288px teal/25 blur-3xl orb bottom-left). Content (relative max-w-xl mx-auto): a 30px (sm:36px) font-extrabold white heading 'Your first design is one sentence away.', a 18px white/70 lead ('Join 9,000+ makers. Free to start, upgrade only when you're flying.'), and an mt-8 flex (sm:flex-row) gap-3 of two pills: a coral-600-to-coral-700 gradient 'Start designing free' button (white, btn shadow, trailing ph:arrow-right-bold) and a ghost bg-white/10 'Browse the library' button (white, border-white/15, a leading ph:books-fill icon)."}, {"part": "Light footer", "prompt": "A footer (id 'library'), border-t border-line, bg-white/60. Inner mx-auto max-w-6xl px-6 py-10 flex (sm:flex-row) items-center justify-between gap-4: a brand cluster (a 32px rounded-lg coral gradient tile with a white ph:sparkle-fill + a bold 18px 'Palette'), a 14px muted copyright line ('© 2026 Palette. Designed for people who build.'), and a row of three muted social icon links (mdi:twitter / mdi:github / mdi:discord, hover ink). Below sm the row stacks to a centered column."}, {"part": "Responsive reflow", "prompt": "All sections share the mx-auto max-w-6xl px-6 container. Above lg the hero is a two-column grid (left pitch + right signup card, items-center, lg:gap-16); below lg it collapses to a single column (the pitch stacks above the card, which stays a max-w-md centered column). The nav center links (How it works / Prompt library / Pricing) are hidden below md; the 'Log in' nav link is hidden below sm. The signup card's three social buttons stay full-width stacked at every width. The how-it-works grid is md:grid-cols-3 (one column below md); the CTA band buttons are flex-col below sm; the footer row is flex-col below sm. No horizontal overflow at 390px."}]}, "special_ui_components": ["Social-first signup card: three full-width stacked social-auth buttons (Google with an inline multi-color logo SVG, GitHub, Apple) placed ABOVE the 'or sign up with email' divider and the single email field, so SSO is the lead action and email is the fallback (the 21st.dev / Tailark 'Login 1' pattern)", "Sticky blurred nav (cream/80 + backdrop-blur-md over a hairline border-b)", "Decorative hero background: a two-color radial .grain layer plus two large blurred coral/teal blobs, with a coral-tinted card glow shadow under the signup card and a coral-to-teal gradient blur halo behind it", "Hand-drawn accent underline: an inline SVG single-stroke teal path under the coral accent word in the headline", "Stacked-avatar social proof: a -space-x-3 row of ring-2 ring-cream gradient avatar chips ending in a solid '9k' chip, beside a 5-star coral rating and a 'Loved by 9,000+ makers' line", "Focus-within coral input ring (box-shadow 0 0 0 4px rgba(255,122,89,.18) + coral border) on the icon-leading email field", "Infinite logo marquee (translateX 0 -> -50% over 26s, the logo set duplicated for a seamless loop)", "Coral primary CTAs with a dedicated coral glow btn shadow (hover brightness-110, active translate-y-px) and trailing arrow icons", "Dark gradient CTA band with two blurred ambient orbs (one on a 6s vertical float keyframe)"], "special_notes": "Built on the Tailwind CDN with a custom theme.extend: fontFamily.sans = ['Poppins','ui-sans-serif','system-ui','sans-serif'] (Poppins weights 400;500;600;700;800 from Google Fonts); colors cream #fdf9f3, card #ffffff, coral {DEFAULT #ff7a59, 600 #c8431f, 700 #b83a16}, teal {DEFAULT #2bb6a3, 600 #1fa18f, 700 #16776a}, ink #23201d, muted #736c63, line #efe6d8; borderRadius.4xl = 2rem; three named shadows soft / card / btn (card = a coral-tinted glow 0 24px 60px -22px rgba(255,122,89,.28), btn = 0 8px 20px -8px rgba(255,122,89,.55)). CSS: html scroll-behavior smooth; .grain = two soft radial gradients (coral at 12% 18%, teal at 88% 8%); .focus-ring:focus-within = box-shadow 0 0 0 4px rgba(255,122,89,.18) + border #ff7a59; .marquee = translateX 0 -> -50% over 26s linear infinite; .float = a 6s ease-in-out translateY ±10px loop. Icons via Iconify (Phosphor 'ph:*' for UI glyphs, mdi:github / mdi:apple / mdi:twitter / mdi:discord, and an inline multi-color Google logo SVG). Coral is the primary action color, teal is the secondary/affirmation color, on a warm cream ground. The reusable prompt-library value is the SOCIAL-FIRST signup card pattern (SSO buttons leading above an OR divider and a single email field) wrapped in a friendly warm-SaaS landing (sticky nav, two-column hero with social proof, logo marquee, three-step how-it-works, dark CTA band, footer). Original prompt-library product for the placeholder brand 'Palette', faithfully reproducing the build HTML; the real reference is the 21st.dev / Tailark 'Login 1' social-first auth component (https://21st.dev/community/components/meschacirung/login-1/sign-up), re-skinned from a neutral shadcn palette to this cream/coral/teal Poppins system and re-providered to Google/GitHub/Apple. Responsive: nav center links hide below md, the 'Log in' nav link below sm, the hero stacks to one column below lg, the social buttons stay full-width stacked, no overflow at 390px."}

---
"Palette — Social-first friendly sign-up" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/palette-social-first-friendly-sign-up @ 6c6090694520.
powered by Styledex — https://styledex.dev

Tokens

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Palette — Social-first friendly sign-up. \"Palette — Social-first friendly sign-up\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/palette-social-first-friendly-sign-up @ 6c6090694520.",
  "$extensions": {
    "dev.styledex": {
      "id": "superdesign-palette-social-first-friendly-sign-up",
      "license": "CC0-1.0",
      "attribution": "\"Palette — Social-first friendly sign-up\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/palette-social-first-friendly-sign-up @ 6c6090694520.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#fdf9f3"
    },
    "foreground": {
      "$type": "color",
      "$value": "#c8431f"
    },
    "card": {
      "$type": "color",
      "$value": "#fdf9f3"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#c8431f"
    },
    "primary": {
      "$type": "color",
      "$value": "#fdf9f3"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "secondary": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#c8431f"
    },
    "accent": {
      "$type": "color",
      "$value": "#ff7a59"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#eeeae4"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#db856d"
    },
    "border": {
      "$type": "color",
      "$value": "#dad6d1"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#fdf9f3"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

/* powered by Styledex — https://styledex.dev */
/* "Palette — Social-first friendly sign-up" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/palette-social-first-friendly-sign-up @ 6c6090694520. */
:root {
  --background: #fdf9f3;
  --foreground: #c8431f;
  --card: #fdf9f3;
  --card-foreground: #c8431f;
  --primary: #fdf9f3;
  --primary-foreground: #1c1917;
  --secondary: #ffffff;
  --secondary-foreground: #c8431f;
  --accent: #ff7a59;
  --accent-foreground: #fafaf9;
  --muted: #eeeae4;
  --muted-foreground: #db856d;
  --border: #dad6d1;
  --destructive: #dc2626;
  --ring: #fdf9f3;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

/* powered by Styledex — https://styledex.dev */
/* "Palette — Social-first friendly sign-up" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/palette-social-first-friendly-sign-up @ 6c6090694520. */
/** Tailwind theme extend for Palette — Social-first friendly sign-up (superdesign-palette-social-first-friendly-sign-up) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#fdf9f3",
        "foreground": "#c8431f",
        "card": "#fdf9f3",
        "primary": "#fdf9f3",
        "primary-foreground": "#1c1917",
        "secondary": "#ffffff",
        "accent": "#ff7a59",
        "muted": "#eeeae4",
        "border": "#dad6d1",
        "destructive": "#dc2626",
        "ring": "#fdf9f3"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

/* powered by Styledex — https://styledex.dev */
/* "Palette — Social-first friendly sign-up" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/palette-social-first-friendly-sign-up @ 6c6090694520. */
@layer base {
:root {
  --background: #fdf9f3;
  --foreground: #c8431f;
  --card: #fdf9f3;
  --card-foreground: #c8431f;
  --primary: #fdf9f3;
  --primary-foreground: #1c1917;
  --secondary: #ffffff;
  --secondary-foreground: #c8431f;
  --accent: #ff7a59;
  --accent-foreground: #fafaf9;
  --muted: #eeeae4;
  --muted-foreground: #db856d;
  --border: #dad6d1;
  --destructive: #dc2626;
  --ring: #fdf9f3;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}