Overview
A plain CSS copy of the lemonade.gg app UI, rebuilt from the markup of its moderator portal. One stylesheet, no build step, no framework.
Install
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="theme.css">
<html data-theme="dark"> <!-- dark, gray or light --> How the app is built
| Area | Notes |
|---|---|
| Stack | Next.js, Tailwind, Radix primitives, Clerk for auth, sonner for toasts. |
| Theme | Forced dark via next-themes. Light and gray are defined; gray maps to dark. |
| Color | Neutral grays. Primary buttons are near-white with dark text. The brand color appears once, on the "Assign 20 GIFs" button. |
| Type | GT Standard M (regular, semibold). Inter is used here as a free substitute. |
| Controls | Every button, input and select shares one height, radius, shadow, focus ring and transition. |
| Layout | Sticky translucent header, centered container, space-y-6 page stack. Cards only where a page groups separate tools (Delete User). |
| Feedback | Form results are a line of red or green text under the form row. List actions update the item in place. |
Class mapping
| Lemonade | theme.css |
|---|---|
rounded-control | --radius-control |
h-control-default | --control-default |
shadow-control | --shadow-control |
control-focus | .control-focus |
control-invalid | .control-invalid |
control-disabled | .control-disabled |
coarse-hit-target | .coarse-hit-target |
motion-control | .motion-control |
text-title, text-label, text-button | .text-title, .text-label, .text-button |
data-slot="button" | .btn |
data-slot="input" | .input |
data-slot="select-trigger" | .select |
data-slot="card", rounded-surface, shadow-surface | .card |
h-control-compact, text-button-compact | .btn-compact |
bg-brand, text-brand-foreground | .btn-brand |
Unofficial. Not affiliated with Lemonade. Values are approximations.