Cube portal style guide
The portal's new look, based on Link by Stripe. Only colours, shapes and spacing change. Pages, wording and features stay the same. All data shown is example data.
Colours
Black for main buttons, blue for second buttons, links and credits, green only for success. Everything else is white and grey.
Type
SF Pro Rounded. Bold, tight headings. Body text is 14px.
Page title 32 bold
Section title 20 bold
Body text 14 regular
Secondary text 14 #737373
Hint text 12 #A3A3A3
Buttons
32px tall, 6px corners, 13px semibold, 8px apart. Black is the main action, blue is second, white with a border is third.
Button corners: pick one
The same buttons with two corner styles. 6px is the default.
A. 6px corners (Stripe)
B. Full pills (999px)
Inputs
Badges and tags
Small round labels and filter chips. The selected filter is black.
List row and card
Rows about 48px tall, hairline between them, icon in a grey square, label, grey value, arrow.
Floating menu (the only place with a shadow)
Payments page
Link reference on the left, a full Cube Payments page on the right.
Payments
| Date ▾ | Customer ▾ | Amount | Status ▾ | Card ▾ |
|---|---|---|---|---|
| Oct 24 | Jane Diaz | $120.00 | Paid | VISA•••• 4242 |
| Oct 23 | Sam Lee | +$40.00 | Paid | AMEX•••• 1005 |
| Oct 22 | Ana Ruiz | $65.50 | Pending | VISA•••• 1881 |
| Oct 21 | Tom Park | $15.00 | Failed | AMEX•••• 0005 |
| Oct 20 | Lee Chen | $250.00 | Paid | VISA•••• 3220 |
| Oct 19 | Mia Ford | $32.00 | Paid | VISA•••• 9001 |
| Oct 18 | Raj Patel | $1,200.00 | Paid | AMEX•••• 2002 |
| Oct 17 | Eva Novak | $18.25 | Pending | VISA•••• 7714 |
| Oct 16 | Omar Haddad | +$12.00 | Paid | VISA•••• 5150 |
| Oct 15 | Kim Ito | $75.00 | Failed | AMEX•••• 3007 |
| Oct 14 | Nora Bell | $420.00 | Paid | VISA•••• 8810 |
| Oct 13 | Luis Ortega | $9.99 | Paid | VISA•••• 6402 |
Status words Paid, Pending and Failed are example labels.
Loading state
| Date | Customer | Amount | Status | Card |
|---|---|---|---|---|
Settings
Sidebar and profile
