The house look
One look for everything we build.
This is the look of the coaching portal, packed into one CSS file. Drop it into a page and the page matches. This whole guide is built with it, so what you see here is what you get.
Try it
Sales I need a month
67sales a month
Type on the left. The answer card updates as you go.
How a screen is laid out
Questions go in a card on the left. One answer card on the right carries the big result and gets the plum tint. On a phone the answer shows first, then the questions.
The pieces
Everything in the box.
Each piece is one class name that starts with ps-. All of them are live below.
Colors
One accent, lilac. Rose is only for bad news.
Type
Good to see you.
A card heading
Body text is the system font at a normal weight. It reads like a person talking.
Helper text is muted and stays plain.
Quiet label for row numbers
Buttons
The graphite one is the main action. Use one per group. Its label says what happens.
Quick picks
These set the price in the demo at the top.
Fields
The picked row gets a filled dot, a lilac line and heavier words. Never color alone.
Tabs, labels and progress
- Posting every day Top earner Double down$8,000 / 57%
- Running ads Double down$4,000 / 29%
- Weekly email Stop$1,000 / 7%
| What | Now | Ten times |
|---|---|---|
| Posts a week | 3 | 30 |
| Ad spend a month | $2,000 | $20,000 |
The answer card
86%of the money comes from two things
One per screen. It is the only card with a tint.
The same card with bad news
2.3to 1. Under the 3 to 1 target
A miss turns rose, so it never looks like a win.
The rules
Eight rules that keep it ours.
- One accent.Lilac only. No second color and no gradient text.
- Sentence case.Headings read like a sentence. Only the small mono label is in capitals.
- Rounded cards with a thin line.The plum answer card is the one place with depth, and it shows up once.
- Buttons look like buttons.They have a shape before you hover. Labels have no outline, so nobody tries to click them.
- Bad news looks different.A miss gets the rose card or rose error text.
- Never color alone.A picked or open item also gets weight, a bar, a dot or a word.
- Phones first.Nav is a pinned row on top, the answer comes before the questions, and every tap target is 44 pixels or taller.
- Plain words.Write for a busy owner. Explain a term the first time it shows up.
Use it
Three steps, a few minutes.
Step 1
Get the two files
The CSS file is the look. The starter page is a screen already laid out.
Step 2
Turn it on
Link the file and put one class on the body. Nothing outside that wrapper changes.
<link rel="stylesheet" href="portal.css"> <body class="ps">
Step 3
Build from the pieces
Start from the starter page. Swap the words, then add cards, fields and buttons from this guide.