TreeTank Color Palette Demo
Custom shadcn/ui components with Dark Teal, Royal Plum, and Bright Lemon
Color Palette
The custom colors defined in globals.css
Primary
#0b3c49
Secondary
#731963
Accent
#f0e100
Muted
#cbd2d0
Foreground
#fffdfd
Buttons
Different button variants with custom colors
Badges
Badge components with different variants
Default (Teal)
Secondary (Purple)
Outline
Destructive
Card Examples
Screenshot-to-Code
Turn screenshots into clean code
Upload a design screenshot and get production-ready React, Vue, or HTML code instantly.
Featured
TreeTank Portfolio
Showcase of projects
Professional portfolio highlighting skills, experience, and innovative projects.
Accent Card
With bright yellow background
This card uses the accent color (Bright Lemon) as background for maximum attention.
Typography
Text colors and hierarchy
Foreground Text (Off-white in dark, Teal in light)
Muted text for descriptions and secondary content
Text in primary color (Dark Teal)
Text in secondary color (Royal Plum)
Text in accent color (Bright Lemon)
Ready to see more?
These components will be used throughout the TreeTank portfolio