Theme customizer
Make Plinth yours.
Pick an accent, a radius and a mode. The whole site changes as you go and remembers your choice. When you like it, copy the CSS into your project's app/globals.css.
Live preview
Real components, nothing mockedCreate project
Projects group invoices and clients.
Share with teamEveryone in Fernhill Studio can view it.
Revenue
Paid invoices, last 30 days
$48,290▲ 16.4%
- This period
- Last period
| Label | This period | Last period |
|---|---|---|
| Sep 20 | $4,200 | $3,900 |
| Sep 25 | $5,100 | $4,300 |
| Sep 30 | $4,800 | $4,600 |
| Oct 5 | $6,900 | $4,500 |
| Oct 10 | $6,400 | $5,200 |
| Oct 15 | $8,100 | $5,600 |
| Oct 19 | $9,300 | $5,900 |
Recent invoices
4 of 128
| Invoice | Client | Status | Amount | Actions |
|---|---|---|---|---|
| INV-0412 | FSFernhill Studio | Paid | $1,280.00 | |
| INV-0411 | LELedgerly | Pending | $640.00 | |
| INV-0410 | OPOrchard & Pine | Overdue | $2,150.00 | |
| INV-0409 | QUQuillmark | Draft | $480.00 |
Buttons and badges
Every variant follows the accent.
AccentNeutralSuccessWarningDanger
Storage68 / 100 GB
Search anything with Command K and follow accent links.
Delete “Spring campaign”?
The project and its 12 invoices move to trash. You can restore them for 30 days.
Copy CSS
Paste over the matching variables in :root and .dark. Your theme then becomes the default, with no attributes needed.
app/globals.css
/* Plinth theme: Graphite accent, Medium radius. Paste over the matching values in app/globals.css. */ :root { --pl-accent: #18181b; --pl-accent-hover: #2f2f35; --pl-accent-fg: #ffffff; --pl-accent-soft: rgb(24 24 27 / 0.07); --pl-ring: rgb(24 24 27 / 0.35); --pl-radius: 0.625rem;} .dark { --pl-accent: #f4f4f5; --pl-accent-hover: #ffffff; --pl-accent-fg: #18181b; --pl-accent-soft: rgb(244 244 245 / 0.1); --pl-ring: rgb(244 244 245 / 0.4);}