Lazy Superheroes — Branding & Design Guide
The implementation spec for the dApp at app.lazysuperheroes.com: design tokens, component patterns, and the exact values the application ships today. Written for somebody working on that codebase.
If you are here to represent Lazy Superheroes — press coverage, a listing, a partner page, community art — you want the Brand & Media Kit instead. It has the downloadable assets, the licence, and the usage rules. This page has neither.
1. Brand Assets
2. Theme Mode
The dApp at app.lazysuperheroes.com is dark-only, forced via next-themes. Every token on this page refers to the .dark variant in its globals.css.
These docs are a different surface and ship both themes — a reference document gets read in daylight and printed, so the toggle stays. Nothing on this page constrains the docs site.
3. Color System
Colors are defined as CSS custom properties using HSL values and consumed via Tailwind utilities like bg-background, text-foreground, etc.
Gold is the brand; blue is what the dApp currently ships
Two different things are recorded on this page and it is worth separating them.
LAZY Gold #e5a800 is the brand colour — see §3.3 and the Brand & Media Kit. That is the colour to use when representing Lazy Superheroes.
The dApp's primary token, however, is #3b82f6 — a blue inherited from the shadcn/ui defaults the application was scaffolded with, not a colour anyone chose. It drives the default button, the focus ring and the link variant, so most interactive controls in the dApp are blue rather than gold. The same inheritance explains the blue-to-cyan gradient button variants in §7.
This is drift, not design. It is recorded here because the page documents what the dApp is, and changing these swatches without changing the application would make this page a work of fiction. Realigning the dApp's primary to gold is open work.
One measured consequence while it stands: the default button in §7 is white on #3b82f6, which is 3.68:1 — under the 4.5:1 that WCAG 2.2 AA asks for body-sized text. The gradient, gradientGreen, gradientCyan and gradientPink variants put white on lighter mid-tones still and fare no better. Gold with near-black text, the pairing this site uses, measures 9.41:1.
The swatches above are left exactly as the dApp renders them, because a spec that quietly corrects the thing it documents is worse than useless. Fixing the contrast belongs in the application.
3.1 Core Palette (Dark Mode)
3.2 Status Colors
3.3 Brand Color — LAZY Gold
--brand: 45 93% 47% → #e5a8003.4 Chart Colors
3.5 Sidebar Colors
4. Typography
4.1 Primary Fonts
--font-heebo · Tailwind: font-sansabcdefghijklmnopqrstuvwxyz
0123456789
--font-unbounded · Tailwind: font-unboundedabcdefghijklmnopqrstuvwxyz
0123456789
4.2 Decorative Fonts
Used for specific themed UI elements (NFT brands, game features):
| Font | CSS Class | Usage |
|---|---|---|
| Press Start 2P | .zero-font, .zerox-font, .pixelszero-font | Pixel-art styled NFT labels |
| Love Ya Like A Sister | .burn-font | Burn feature label |
| Viga | .lazy-font | LAZY brand text |
| Orbitron | .mission-font | Missions heading |
| Merriweather | .article-content | Blog/article body |
| Courier New | .terminal | Terminal-style code display |
4.3 Text Sizes
| Context | Class |
|---|---|
| Body (mobile) | text-sm (14 px) |
| Body (sm+) | text-lg (18 px) |
| Line height | leading-[150%] |
5. Decorative Text Gradients
6. Spacing & Radius
| Token | Value | Usage |
|---|---|---|
--radius | 0.5rem | Base border-radius |
rounded-lg | var(--radius) = 0.5 rem | Large radius |
rounded-md | calc(var(--radius) - 2px) | Medium radius |
rounded-sm | calc(var(--radius) - 4px) | Small radius |
rounded-xl | 0.75rem | Cards |
7. Button Variants
Sizes: default (h-9) · sm (h-8) · lg (h-10) · icon (h-9 w-9)
8. Component Patterns
Cards
- Background:
bg-card(#09090b) · Border:border(#27272a) - Radius:
rounded-xl· Shadow:shadow - Title font:
font-unbounded
Inputs
- Border:
border-input· Radius:rounded-md - Focus:
ring-ring(blue focus ring)
Dialogs
- Background:
bg-backgroundwithborder-border - Radius:
sm:rounded-lg· Title font:font-unbounded
9. Animations
| Animation | Duration | Easing | Usage |
|---|---|---|---|
accordion-down | 0.2 s | ease-out | Accordion expand |
accordion-up | 0.2 s | ease-out | Accordion collapse |
shimmer | 1.5 s | linear | Skeleton loaders |
flash | 1 s | alternate | Loading block pulse |
typing | 0.5 s | steps(40) | Typewriter effect |
10. Scrollbar
Custom webkit scrollbar:
- Width: 8 px
- Track:
bg-background - Thumb:
bg-borderwithborder-radius: 5px - Thumb hover:
bg-muted-foreground
11. Social & SEO
| Property | Value |
|---|---|
| App Title | Lazy dApp |
| Meta Description | Lazy dApp platform offers user-friendly solutions for Lazy Superheroes holders to stake, farm, exchange NFTs on Hedera. |
| Twitter Handle | @SuperheroesLazy |
| Twitter Card | summary_large_image |
| OG Image | https://lsh-cache.b-cdn.net/twitterHD.png |