Add onboarding/soft-paywall/free-tier design spec + Stitch design reference
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Timo Knuth
343
design/stitch-onboarding/login_to_greenlens/code.html
Normal file
343
design/stitch-onboarding/login_to_greenlens/code.html
Normal file
@@ -0,0 +1,343 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0, viewport-fit=cover" name="viewport"/>
|
||||
<title>GreenLens - Login</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"tertiary": "#375d00",
|
||||
"on-surface": "#191d16",
|
||||
"on-secondary-fixed": "#012104",
|
||||
"on-secondary-fixed-variant": "#2d4e2b",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-low": "#f2f5e9",
|
||||
"error-container": "#ffdad6",
|
||||
"secondary": "#446741",
|
||||
"outline": "#72796a",
|
||||
"on-secondary": "#ffffff",
|
||||
"surface-container": "#ecefe4",
|
||||
"on-error": "#ffffff",
|
||||
"on-surface-variant": "#42493c",
|
||||
"background": "#f8fbef",
|
||||
"error": "#ba1a1a",
|
||||
"outline-variant": "#c2c9b7",
|
||||
"on-secondary-container": "#486b45",
|
||||
"secondary-fixed": "#c5edbd",
|
||||
"on-tertiary": "#ffffff",
|
||||
"primary": "#2b5f0b",
|
||||
"surface-dim": "#d8dbd0",
|
||||
"primary-container": "#437824",
|
||||
"tertiary-fixed-dim": "#a5d56e",
|
||||
"inverse-on-surface": "#eff2e7",
|
||||
"surface-container-high": "#e7e9de",
|
||||
"surface-bright": "#f8fbef",
|
||||
"inverse-surface": "#2e322a",
|
||||
"on-background": "#191d16",
|
||||
"on-primary-fixed": "#092100",
|
||||
"secondary-container": "#c2eaba",
|
||||
"on-tertiary-container": "#cbfd91",
|
||||
"primary-fixed": "#b6f390",
|
||||
"tertiary-container": "#4d771b",
|
||||
"primary-fixed-dim": "#9bd776",
|
||||
"tertiary-fixed": "#c0f287",
|
||||
"surface-tint": "#366a17",
|
||||
"secondary-fixed-dim": "#aad1a2",
|
||||
"surface-variant": "#e1e4d9",
|
||||
"on-error-container": "#93000a",
|
||||
"on-tertiary-fixed-variant": "#2e4f00",
|
||||
"on-primary": "#ffffff",
|
||||
"on-primary-container": "#c1ff99",
|
||||
"surface-container-highest": "#e1e4d9",
|
||||
"on-tertiary-fixed": "#0f2000",
|
||||
"on-primary-fixed-variant": "#205100",
|
||||
"inverse-primary": "#9bd776",
|
||||
"surface": "#f8fbef"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.25rem",
|
||||
"lg": "0.5rem",
|
||||
"xl": "0.75rem",
|
||||
"full": "9999px"
|
||||
},
|
||||
"spacing": {
|
||||
"xs": "8px",
|
||||
"xl": "32px",
|
||||
"base": "4px",
|
||||
"sm": "12px",
|
||||
"gutter": "16px",
|
||||
"md": "16px",
|
||||
"lg": "24px",
|
||||
"container-margin": "20px"
|
||||
},
|
||||
"fontFamily": {
|
||||
"label-md": [
|
||||
"Plus Jakarta Sans"
|
||||
],
|
||||
"body-lg": [
|
||||
"Plus Jakarta Sans"
|
||||
],
|
||||
"label-lg": [
|
||||
"Plus Jakarta Sans"
|
||||
],
|
||||
"body-md": [
|
||||
"Plus Jakarta Sans"
|
||||
],
|
||||
"headline-lg": [
|
||||
"Plus Jakarta Sans"
|
||||
],
|
||||
"display": [
|
||||
"Plus Jakarta Sans"
|
||||
],
|
||||
"headline-md": [
|
||||
"Plus Jakarta Sans"
|
||||
]
|
||||
},
|
||||
"fontSize": {
|
||||
"label-md": [
|
||||
"12px",
|
||||
{
|
||||
"lineHeight": "16px",
|
||||
"fontWeight": "600"
|
||||
}
|
||||
],
|
||||
"body-lg": [
|
||||
"17px",
|
||||
{
|
||||
"lineHeight": "26px",
|
||||
"fontWeight": "500"
|
||||
}
|
||||
],
|
||||
"label-lg": [
|
||||
"13px",
|
||||
{
|
||||
"lineHeight": "18px",
|
||||
"letterSpacing": "0.05em",
|
||||
"fontWeight": "700"
|
||||
}
|
||||
],
|
||||
"body-md": [
|
||||
"15px",
|
||||
{
|
||||
"lineHeight": "22px",
|
||||
"fontWeight": "400"
|
||||
}
|
||||
],
|
||||
"headline-lg": [
|
||||
"28px",
|
||||
{
|
||||
"lineHeight": "36px",
|
||||
"letterSpacing": "-0.01em",
|
||||
"fontWeight": "800"
|
||||
}
|
||||
],
|
||||
"display": [
|
||||
"34px",
|
||||
{
|
||||
"lineHeight": "42px",
|
||||
"letterSpacing": "-0.02em",
|
||||
"fontWeight": "800"
|
||||
}
|
||||
],
|
||||
"headline-md": [
|
||||
"22px",
|
||||
{
|
||||
"lineHeight": "28px",
|
||||
"fontWeight": "700"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
background-color: #000; /* For framing */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
.iphone-frame {
|
||||
width: 100%;
|
||||
max-width: 393px; /* iPhone 15 width */
|
||||
height: 100vh;
|
||||
max-height: 852px; /* iPhone 15 height */
|
||||
background-color: #FBFAF3; /* surface */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-col;
|
||||
}
|
||||
@media (min-width: 400px) {
|
||||
.iphone-frame {
|
||||
height: 852px;
|
||||
border-radius: 54px;
|
||||
box-shadow: 0 0 0 10px #000, 0 20px 40px rgba(0,0,0,0.5);
|
||||
margin: 20px;
|
||||
}
|
||||
}
|
||||
.hero-section {
|
||||
height: 35%;
|
||||
position: relative;
|
||||
}
|
||||
.hero-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.hero-gradient {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(251,250,243,0) 50%, #FBFAF3 100%);
|
||||
}
|
||||
.form-sheet {
|
||||
height: 65%;
|
||||
background-color: #FBFAF3;
|
||||
border-top-left-radius: 24px;
|
||||
border-top-right-radius: 24px;
|
||||
margin-top: -24px; /* Pull up to overlap hero */
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px 20px;
|
||||
}
|
||||
|
||||
/* Custom Input Styling matching guidelines */
|
||||
.input-field {
|
||||
height: 56px;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 14px;
|
||||
border: 1px solid #D1D4CC;
|
||||
padding: 0 16px;
|
||||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #191d16;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.input-field:focus {
|
||||
border-color: #437824;
|
||||
box-shadow: 0 0 0 2px rgba(67, 120, 36, 0.2);
|
||||
}
|
||||
.input-field::placeholder {
|
||||
color: #72796a;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* Button Styling */
|
||||
.btn-primary {
|
||||
height: 56px;
|
||||
background-color: #437824;
|
||||
border-radius: 14px;
|
||||
color: #FFFFFF;
|
||||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s, opacity 0.2s;
|
||||
}
|
||||
.btn-primary:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.btn-apple {
|
||||
height: 56px;
|
||||
background-color: #000000;
|
||||
border-radius: 14px;
|
||||
color: #FFFFFF;
|
||||
font-family: 'Plus Jakarta Sans', sans-serif;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
gap: 8px;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
.btn-apple:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.divider-line {
|
||||
height: 1px;
|
||||
background-color: #e1e4d9;
|
||||
flex-grow: 1;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-100">
|
||||
<div class="iphone-frame flex flex-col relative">
|
||||
<!-- Hero Image Area (35%) -->
|
||||
<div class="hero-section">
|
||||
<img alt="Botanical hero image" class="hero-image" data-alt="A lush, high-resolution close-up of a Monstera Deliciosa leaf, softly backlit by warm morning sunlight. The botanical photography is premium, airy, and calming, featuring rich vibrant greens against a slightly blurred, clean background. The aesthetic is modern minimalist with a tactile organic feel, perfectly suited for a high-end plant care app." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAZ52RoNjzx9-A72eQKmdGgnrltylpxouotb1w9T0WHGj_3lAW7G9L6cV6MgKptlxFZiiYT6AobZ5G7R3rvT86jhDTo5J87nsGwWrcqHnBgUOQ4enGmQ7WSStk2vV4zdWdSHCBfPSndpOUj_DRF3od8ASsFMDcA6VS02INwlqEmewyvYC1lpHPrr1ZrsHut8BAc0tWBa3GB8MKSNcQo03Da-KD06wwLK6kNBFyEHQqt77xxescSLi2CZgi_Zq5c2hNhs9Qd993DV-o"/>
|
||||
<div class="hero-gradient"></div>
|
||||
<div class="absolute bottom-10 left-5">
|
||||
<h1 class="font-display text-display text-on-surface">Welcome back!</h1>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Form Sheet Area (65%) -->
|
||||
<div class="form-sheet">
|
||||
<!-- Apple Login -->
|
||||
<button class="btn-apple mb-lg">
|
||||
<svg fill="currentColor" height="20" viewbox="0 0 24 24" width="20">
|
||||
<path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.62-1.496 3.603-2.998 1.156-1.682 1.633-3.314 1.655-3.398-.035-.015-3.182-1.22-3.216-4.858-.026-3.04 2.484-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.693.792-1.353 2.235-1.169 3.603 1.343.104 2.61-.715 3.456-1.59z"></path>
|
||||
</svg>
|
||||
Continue with Apple
|
||||
</button>
|
||||
<!-- Divider -->
|
||||
<div class="flex items-center gap-4 mb-lg">
|
||||
<div class="divider-line"></div>
|
||||
<span class="font-label-md text-label-md text-outline">OR</span>
|
||||
<div class="divider-line"></div>
|
||||
</div>
|
||||
<!-- Inputs -->
|
||||
<div class="flex flex-col gap-sm mb-md">
|
||||
<input autocomplete="email" class="input-field" placeholder="Email address" type="email"/>
|
||||
<input autocomplete="current-password" class="input-field" placeholder="Password" type="password"/>
|
||||
</div>
|
||||
<!-- Forgot Password -->
|
||||
<div class="flex justify-end mb-lg">
|
||||
<a class="font-body-md text-body-md text-primary-container font-semibold hover:opacity-80 transition-opacity" href="#">Forgot password?</a>
|
||||
</div>
|
||||
<!-- Submit Button -->
|
||||
<button class="btn-primary mb-lg">
|
||||
Log in
|
||||
</button>
|
||||
<!-- Spacer -->
|
||||
<div class="flex-grow"></div>
|
||||
<!-- Sign Up Link -->
|
||||
<div class="text-center pb-8">
|
||||
<span class="font-body-md text-body-md text-on-surface-variant">New here? </span>
|
||||
<a class="font-body-md text-body-md text-primary-container font-bold hover:opacity-80 transition-opacity" href="#">Create account</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user