Lazy Superheroes — Branding & Design Guide

Single source of truth for the visual identity of the Lazy Superheroes dApp.

---

1. Brand Assets

logo.svg (dark)

logo-light.svg (light)

lazy_token.png

favicon.svg

Logo20Farm.webp

---

2. Theme Mode

The application uses dark mode only (forced via next-themes). All design tokens below refer to the .dark variant defined in globals.css.

---

3. Color System

Colors are defined as CSS custom properties using HSL values and consumed via Tailwind utilities like bg-background, text-foreground, etc.

3.1 Core Palette (Dark Mode)

background

#09090b

Page background

foreground

#fafafa

Primary text

primary

#3b82f6

CTA buttons

secondary

#27272a

Secondary surfaces

muted-foreground

#a1a1aa

Placeholder text

destructive

#dc2626

Error / delete actions

ring

#3b82f6

Focus ring

border

#27272a

Borders & inputs

3.2 Status Colors

Success

#16a34a

Warning

#f59e0b

Info

#0ea5e9

3.3 Brand Color — LAZY Gold

LAZY Gold

--brand: 45 93% 47% → #e5a800

Brand accents, LAZY token references

3.4 Chart Colors

chart-1

chart-2

chart-3

chart-4

chart-5

3.5 Sidebar Colors

sidebar-bg #09090b

sidebar-fg #a1a1aa

sidebar-primary #fafafa

sidebar-accent #27272a

---

4. Typography

4.1 Primary Fonts

Heebo

CSS var: --font-heebo · Tailwind: font-sans

Body text — all UI elements

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789

Unbounded

CSS var: --font-unbounded · Tailwind: font-unbounded

Headings (h1–h6), card & dialog titles

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
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

ZERO

.zero-font — Silver

ZEROX

.zerox-font — Neon pink

PIXELS

.pixelszero-font — Pink→Purple

BURN

.burn-font — Fire effect

LAZY

.lazy-font — LAZY gold

MISSION

.mission-font — Cosmic purple

---

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

default

destructive

outline

secondary

ghost

link

gradient

gradientGreen

gradientCyan

gradientPink

gradientOutline

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-background with border-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-border with border-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