Upgrade modal
Five generations of the upgrade modal, plan colours, and the app re-skinning per plan.
- 800+
- Paid customers
- $100K+
- Revenue
Five of the eight generations of the modal, May 2024 to September 2025.
May 14 2024. One magenta Premium product sold three ways. The struck-through “limited time” prices came with the file; this was my first restyle of it.
Plans
Each plan got its own colour, so you could tell which plan you were on at a glance.
One “Premium”
May to Jul 2024 · hue 314
A single magenta for anything paid: the Premium button styles in Button.js and the modal band.
A ramp per plan
Jul 2024 · hues 358, 274, 175
850→900 buttons · 1000 tags · 700 accents · 0 and 25 tints
Added with the pricing page. Each plan got a full HSL ramp and the same recipe, so any surface could be tinted by name.
Materials
Aug 2025 · copper, gemstone, crystal
Centralized as GRADIENTS and MASTER_THEME, served through a ThemeProvider that re-skins the app chrome per plan. Hover a badge.
Pick a plan
Big Tech
Unicorns
Small Companies
Portland, OR
In-person
Undergraduate
$35/hr
Sponsorship LikelyCopperleaf builds a budgeting app for shared households. The frontend team is four engineers and one designer, and interns ship to production in their first two weeks. You will build features in React and TypeScript, work from Figma files with the designer, add tests for the flows you touch, and own one small project end to end over the summer.
- Build and ship user-facing features in React, TypeScript and Next.js
- Pair with the designer to turn Figma files into accessible components
- Write unit and integration tests for the flows you touch
- Own one scoped project end to end, from kickoff to launch
getThemeColors({ plan_name: "Coffee" })
- sidebarBackground
- CoffeeNearWhite → White
- sidebarBorder
- Black200
- buttonBackground
- Coffee25
- buttonBorder
- Coffee200
- buttonBackgroundHover
- Coffee0
- iconColorSelected
- Coffee750
- iconColorUnselected
- Black900
- textColorSelected
- Coffee750
- borderColor
- Coffee200
- borderColorSelected
- Coffee200
- loaderColor
- Coffee200
- backgroundColor
- Coffee0
- feedBottomBackground
- CoffeeNearWhite
- badgeComplexGradient
- GRADIENTS.COMPLEX.COFFEE
- flagBackground
- GRADIENTS.SIMPLIFIED.COFFEE
- flagBorder
- GRADIENTS.BORDERS.COFFEE
- jobHighlightBackground
- rainbow tint, 10%