Sign in to Verdant — Classic Split (Emerald)

{"summary": "A full-bleed, two-column 'classic split' sign-in page on a clean white canvas. Left column holds the auth form (brand mark, 'Welcome back' heading, Google + GitHub social buttons, an 'or with email' divider, email + password fields, a keep-me-signed-in checkbox, and a gradient emerald 'Sign in' button); right column is a dark slate brand panel with ambient emerald glows, a faint grid, a product quote, a floating 'Generating layout' showcase card, and a social-proof trust row. A sticky translucent top nav spans both columns. Collapses to a single column (form only) on mobile.", "style": {"description": "Crisp, modern SaaS auth aesthetic. White form side, deep slate brand side, a single emerald accent for the logo, primary button, links and focus rings. Inter typeface throughout, rounded-xl controls, soft inset fields, and a glowing gradient CTA. The dark panel adds depth with blurred emerald radial glows, a subtle dot + line grid masked by a radial fade, and a frosted-glass floating card.", "prompt": "Use a clean modern SaaS authentication aesthetic with a light/dark split. Page background is white (#ffffff); body ink is slate-900 (#0f172a), secondary text slate-500 (#64748b) and slate-400 (#94a3b8), labels slate-700 (#334155). Single accent is emerald: primary emerald-600 (#059669), emerald-700 (#047857) and emerald-800 (#065f46) for the CTA gradient, emerald-500 (#10b981) for the focus ring and logo gradient top, emerald-300 (#6ee7b7) and emerald-400 (#34d399) as light accents on the dark panel; soft tints emerald-50 (#ecfdf5)/100 (#d1fae5). Neutrals are the full slate scale (50 #f8fafc, 100 #f1f5f9, 200 #e2e8f0, 300 #cbd5e1, 600 #475569, 700 #334155, 800 #1e293b, 900 #0f172a, 950 #020617). Typeface Inter (weights 400-900), antialiased; headings extrabold with tight tracking. Form controls are rounded-xl (12px) with 1px slate-200 borders on a slate-50/70 fill; on focus-within the border goes emerald-500 (#10b981) with a 4px rgba(16,185,129,0.12) ring and a white fill, and the field icon turns emerald-600. The primary button is a top-to-bottom emerald-700 to emerald-800 gradient, bold white text, fully rounded-xl, with a glow shadow (0 10px 24px -8px rgba(16,185,129,0.55)) plus an inset top highlight. The right brand panel is slate-900 (#0f172a) with two large blurred emerald radial glows (emerald-500/25 and emerald-700/30, 120px blur), a faint white dot-grid (radial-gradient rgba(255,255,255,0.05) 1px, 22px cells) and a 56px line grid masked by a radial fade, and a frosted white/[0.04] glass card with white/10 borders and a large soft black shadow."}, "layout_and_structure": {"description": "A sticky full-bleed top nav above a two-column main grid (lg:grid-cols-[1.05fr_1fr], min-height = viewport minus nav). Left column: a centered max-w-[400px] auth form. Right column (hidden below lg): a dark slate brand panel laid out top/middle/bottom (eyebrow badge, quote + floating card, trust row). On mobile the right panel is hidden and only the form column shows, full width.", "prompts": [{"part": "Sticky nav (full-bleed)", "prompt": "A sticky top navigation (z-50) spanning the full width, white/85 with backdrop-blur and a 1px slate-200/80 bottom border. Inner row is max-w-7xl, px-6 (lg:px-10), py-3.5, items spaced between. Left: a 36px rounded-xl logo tile with an emerald-500 to emerald-700 gradient and a white leaf icon (ph:leaf-fill), next to the extrabold 'Verdant' wordmark. Right: ghost text links Product / Pricing / Docs (slate-500, hidden on mobile), a thin vertical slate-200 divider, a semibold 'Sign in' text link, a solid slate-900 'Start free' button (rounded-lg, white text, hover slate-800), and a mobile hamburger toggle (ph:list-bold) that opens a bordered white dropdown with Product/Pricing/Docs/Sign in."}, {"part": "Left form column", "prompt": "A white section, centered both axes, px-6 (sm:px-10), py-14 (lg:py-20), holding a w-full max-w-[400px] stack. Top block: a 40px emerald-gradient rounded-xl leaf logo tile + 'Verdant' wordmark, then an extrabold 30px (sm:34px) 'Welcome back' heading and a slate-500 15px sub 'Sign in to pick up your projects right where you left off.'"}, {"part": "Social auth row", "prompt": "A two-column gap-3 grid of social buttons: 'Google' (flat-color-icons:google) and 'GitHub' (ph:github-logo-fill in slate-900). Each is a rounded-xl, 1px slate-200 bordered white button, py-2.5, sm font-semibold slate-700, with hover border-slate-300 + bg-slate-50."}, {"part": "Divider", "prompt": "A horizontal 'or with email' divider: two flex-1 slate-200 hairlines flanking centered 11px uppercase letter-spaced (0.14em) slate-500 text, with my-6 spacing."}, {"part": "Email + password form", "prompt": "A vertical form (space-y-4). Email field: a 13px semibold slate-700 label and a rounded-xl 'field' row (1px slate-200 border, slate-50/70 fill) with a leading envelope icon (ph:envelope-simple, slate-400) and a transparent borderless input (py-3, 15px). Password field: a label row with 'Password' on the left and an emerald-700 'Forgot password?' link on the right, then a field row with a lock icon (ph:lock-simple), a password input, and a trailing eye-slash reveal toggle (ph:eye-slash). All fields use the focus-within treatment (emerald-500 border + 4px emerald ring + white fill + emerald icon)."}, {"part": "Keep me signed in", "prompt": "A custom checkbox row: an 18px emerald-600 rounded-[6px] tile with a white check icon (ph:check-bold) and a soft emerald shadow, next to a 14px medium slate-600 'Keep me signed in' label."}, {"part": "Submit + sign-up link", "prompt": "A full-width primary 'Sign in' button: emerald-700 to emerald-800 vertical gradient, bold white 15px text, rounded-xl, py-3.5, with the emerald glow shadow + inset top highlight and a trailing arrow icon (ph:arrow-right-bold) that nudges right on hover. Below it, centered slate-500 14px text 'Don't have an account?' with a bold emerald-700 'Sign up free' link."}, {"part": "Right brand panel (slate)", "prompt": "A hidden-below-lg dark aside (bg slate-900, overflow-hidden) filling the right column, with absolute ambient layers: a top-right emerald-500/25 420px blurred glow, a bottom-left emerald-700/30 360px blurred glow, a faint white dot-grain overlay, and a 56px white line grid masked by a radial fade. Content is a relative z-10 column, p-12 (xl:p-14), justify-between in three bands."}, {"part": "Panel eyebrow", "prompt": "Top band: a small pill badge, white/15 border on white/[0.06] glass, backdrop-blur, 12px emerald-300 semibold text 'Built for design teams' with a leading sparkle icon (ph:sparkle-fill)."}, {"part": "Panel quote + floating card", "prompt": "Middle band: a max-w-[24rem] bold 26px (xl:30px) white blockquote 'From a one-line prompt to a shippable interface in minutes.', then a floating frosted card (rounded-2xl, white/10 border on white/[0.04], backdrop-blur, large black shadow). Card header: an emerald-tinted (emerald-500/20) rounded-lg tile with a magic-wand icon (ph:magic-wand-fill, emerald-300), a 'Generating layout' label, and a small emerald 'live' pill. Card body: three skeleton bars (white/15 and white/10, varying widths) then a 3-column row of 56px tiles, the first an emerald gradient (emerald-400/30 to emerald-600/10) with the rest white/[0.06], all ring-1 white/5."}, {"part": "Panel trust row", "prompt": "Bottom band: a row of four overlapping 36px avatar circles (emerald-500/600/700 with white initials JZ/AK/MR, plus a white/10 '+9k' circle), each ring-2 slate-900, beside a two-line block: five emerald-400 star icons (ph:star-fill) on white semibold text, and a slate-300 line 'Loved by 9,000+ builders & design teams'."}]}, "special_ui_components": ["Sticky translucent nav (white/85 + backdrop-blur, slate-200/80 bottom border) spanning both columns, with a mobile hamburger dropdown.", "Emerald-gradient rounded-xl logo tile (emerald-500 to emerald-700) with a white ph:leaf-fill icon, used in nav and form.", "Input 'field' pattern: rounded-xl slate-200 border on slate-50/70 fill with a leading icon; focus-within state = emerald-500 border + 4px rgba(16,185,129,0.12) ring + white fill + emerald-600 icon (0.15s transition).", "Social auth buttons (Google flat-color-icons:google, GitHub ph:github-logo-fill) in a 2-up grid.", "Password field with a trailing eye-slash reveal toggle (ph:eye-slash).", "Custom emerald check 'Keep me signed in' control (18px emerald-600 tile + white ph:check-bold).", "Gradient CTA button: emerald-700 to emerald-800, glow shadow (0 10px 24px -8px rgba(16,185,129,0.55)) + inset top highlight, trailing ph:arrow-right-bold that translates on hover.", "Dark brand panel with two blurred emerald radial glows, a radial dot-grain overlay, and a 56px line grid masked by a radial fade.", "Frosted-glass floating 'Generating layout' showcase card (white/[0.04], white/10 border, backdrop-blur) with skeleton bars + an emerald-gradient tile.", "Overlapping avatar stack (+9k) with a 5-star emerald rating trust row.", "Iconify Phosphor icons (ph:*) plus flat-color-icons:google; Inter font loaded from Google Fonts."], "special_notes": "Single emerald accent on slate/white neutrals only; do not introduce other hues. The layout is a true full-bleed split (no centered card) with the form on the left and the dark brand panel on the right, and a sticky nav above both. Below the lg breakpoint the right panel is hidden and the form column goes full width. Keep the exact field focus treatment (emerald-500 border + 4px emerald ring) and the CTA gradient + glow shadow. Inter throughout, rounded-xl controls. No em-dashes in copy."}

---
"Sign in to Verdant — Classic Split (Emerald)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/sign-in-to-verdant-classic-split-emerald @ 6c6090694520.
powered by Styledex — https://styledex.dev

Tokens

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Sign in to Verdant — Classic Split (Emerald). \"Sign in to Verdant — Classic Split (Emerald)\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/sign-in-to-verdant-classic-split-emerald @ 6c6090694520.",
  "$extensions": {
    "dev.styledex": {
      "id": "superdesign-sign-in-to-verdant-classic-split-emerald",
      "license": "CC0-1.0",
      "attribution": "\"Sign in to Verdant — Classic Split (Emerald)\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/sign-in-to-verdant-classic-split-emerald @ 6c6090694520.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "foreground": {
      "$type": "color",
      "$value": "#0f172a"
    },
    "card": {
      "$type": "color",
      "$value": "#ffffff"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#0f172a"
    },
    "primary": {
      "$type": "color",
      "$value": "#0f172a"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "secondary": {
      "$type": "color",
      "$value": "#64748b"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#0f172a"
    },
    "accent": {
      "$type": "color",
      "$value": "#94a3b8"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#f0f0f0"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#636875"
    },
    "border": {
      "$type": "color",
      "$value": "#dbdbdb"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#0f172a"
    }
  },
  "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 */
/* "Sign in to Verdant — Classic Split (Emerald)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/sign-in-to-verdant-classic-split-emerald @ 6c6090694520. */
:root {
  --background: #ffffff;
  --foreground: #0f172a;
  --card: #ffffff;
  --card-foreground: #0f172a;
  --primary: #0f172a;
  --primary-foreground: #fafaf9;
  --secondary: #64748b;
  --secondary-foreground: #0f172a;
  --accent: #94a3b8;
  --accent-foreground: #fafaf9;
  --muted: #f0f0f0;
  --muted-foreground: #636875;
  --border: #dbdbdb;
  --destructive: #dc2626;
  --ring: #0f172a;
  --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 */
/* "Sign in to Verdant — Classic Split (Emerald)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/sign-in-to-verdant-classic-split-emerald @ 6c6090694520. */
/** Tailwind theme extend for Sign in to Verdant — Classic Split (Emerald) (superdesign-sign-in-to-verdant-classic-split-emerald) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#ffffff",
        "foreground": "#0f172a",
        "card": "#ffffff",
        "primary": "#0f172a",
        "primary-foreground": "#fafaf9",
        "secondary": "#64748b",
        "accent": "#94a3b8",
        "muted": "#f0f0f0",
        "border": "#dbdbdb",
        "destructive": "#dc2626",
        "ring": "#0f172a"
      },
      "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 */
/* "Sign in to Verdant — Classic Split (Emerald)" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/sign-in-to-verdant-classic-split-emerald @ 6c6090694520. */
@layer base {
:root {
  --background: #ffffff;
  --foreground: #0f172a;
  --card: #ffffff;
  --card-foreground: #0f172a;
  --primary: #0f172a;
  --primary-foreground: #fafaf9;
  --secondary: #64748b;
  --secondary-foreground: #0f172a;
  --accent: #94a3b8;
  --accent-foreground: #fafaf9;
  --muted: #f0f0f0;
  --muted-foreground: #636875;
  --border: #dbdbdb;
  --destructive: #dc2626;
  --ring: #0f172a;
  --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);
}
}