Components · Forms
Input
Each card is a real input pattern pulled from that product's source — compare the actual fields side by side instead of one shared approximation. Expand Design tokens used on any card to see the CSS variables that give it its look.
Source priority is the same as for blocks: real local component → exact in-context class/style mirror from the app → honest planned gap.
Editorial input from the DESIGN.md directory — the live flagship reference surface.
Add your DESIGN.md
Actual DesignMD input component from the directory submit flow.
Design tokens used
Monochrome neutral — near-black --primary, crisp gray borders, 0.75rem radius. No brand hue.
--primary0 0% 7%--background0 0% 100%--foreground0 0% 7%--border220 14% 90%--ring (focus)0 0% 7%--radius0.75remWarm rounded newsletter/email field from the live marketing surface.
Get updates in your inbox
Exact warm newsletter field pattern from the marketing hub.
Design tokens used
Warm cream surface, orange #f54e00 --primary, fully rounded fields (1rem --radius).
--primary19 100% 48%--background48 14% 94%--foreground50 11% 13%--border50 11% 13% / 0.12--ring (focus)19 100% 48%--radius1remShared editorial input used in auth, settings, submit, and editor flows.
Submit your product URL
Actual SiteHunter input component from app auth/editor flows.
Design tokens used
Pure black/white editorial system — near-black --primary, neutral grays, 0.5rem radius. No brand hue.
--primary0 0% 6.7%--background0 0% 100%--foreground0 0% 6.7%--border0 0% 89.8%--ring (focus)0 0% 6.7%--radius0.5remShared community input used across auth and content creation screens.
Start a new thread
Actual AIdiscuss input component from auth/community flows.
Design tokens used
Indigo #4f46e5 --primary on a slate-50 background, with an indigo focus --ring.
--primary243 75% 59%--background210 20% 98%--foreground222 47% 11%--border218 33% 88%--ring (focus)243 75% 59%--radius0.5remHero validation input with live placeholder rotation and CTA coupling.
Design tokens used
Indigo #5b5ef4 --primary on white, driving validation-state focus colors.
--primary240 83% 64%--background0 0% 100%--foreground0 0% 6.7%--border0 0% 89%--ring (focus)240 83% 64%--radius0.5remRounded auth card fields from the live ChecklistMD login flow.
Welcome back
Exact current auth field styling from the live product.
Design tokens used
Indigo --primary on a soft #f4f4f1 card surface, 0.5rem radius auth fields.
--primary238 84% 64%--background0 0% 100%--foreground0 0% 6.7%--border0 0% 89.8%--ring (focus)238 84% 64%--radius0.5remCompact auth fields from the live directory submission dashboard login.
Sign in to SubmitDB
Exact current auth field styling from the live product.
Design tokens used
Indigo #5b5ef4 --primary on pure white, compact dashboard-grade auth fields.
--primary240 83% 64%--background0 0% 100%--foreground0 0% 6.7%--border0 0% 89%--ring (focus)240 83% 64%--radius0.5rem