Clerk — Feature
Left-aligned text content with expandable component documentation (USER AUTHENTICATION, B2B AUTHENTICATION, BILLING) paired with a prominent signup modal mockup on the right. The layout uses a two-column grid with the modal serving as a visual proof-of-concept for the described components.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/inspiration/clerk-pixel-perfect-uis-code-panel-live-sign-up-card.
Measured spec
| Scheme | light |
| Background | #FFFFFF |
| Text | #141316 |
| Contrast | 18.51 |
| Columns | 1 |
| Alignment | left |
| Whitespace | regular |
| Density | 0.243 |
| Measured size | 1600×1421 px |
Palette
#FFFFFF#1A1A1A#5B5BFF#F0F0F0#666666
Fonts
Geist
Page types
Detail
UX patterns
Social AuthProgressive Onboarding
UI elements
FormCardDropdown
Context
Other sections on this page
- Hero — Authentication & user management hero with dual CTAs
- Logo Wall — Trusted companies logo wall with CTA buttons
- Feature — Bento grid of authentication features
- Feature — Three-column feature highlight with hero text and cards
- Pricing / Plans — Two-tier subscription pricing with feature comparison
- Feature — Two-column SDK and integrations showcase with icon grids
- Testimonial / Social Proof — Trusted around the world with customer testimonials