Ghost buttons
Hero component
Note: Ghost dark should not be used on tints. It is always white with a dark background. Just kept one for a visual example.
| Background colour | HEX | Ghost (Light) | Ghost (Dark) | Notes |
|---|---|---|---|---|
| White | #ffffff | PASS | FAIL - N/A | |
| Light grey | #f0f0f0 | PASS | FAIL - N/A | |
| Medium grey | #c8c8c8 | PASS | FAIL - N/A | |
| Dark grey | #6E6E6E | FAIL | PASS | White text error on hover |
| Very dark grey | #2C2C2C | PASS | PASS | |
| Black | #000000 | PASS | PASS | |
| Burgundy | #912338 | FAIL | PASS | |
| Magenta | #db0272 | FAIL | PASS | |
| Orange | #da3a16 | FAIL | FAIL | |
| Mauve | #573996 | FAIL | PASS | |
| Dark blue | #004085 | PASS | PASS | |
| Blue | #0072a8 | FAIL | PASS | |
| Turquoise | #057d78 | FAIL | PASS | |
| Green | #508212 | FAIL | FAIL | |
| All tints | PASS | FAIL - N/A |
Offset block component
Note: Ghost dark should not be used on tints. It is always white with a dark background. Just kept one for a visual example.
| Button colour | White background | Light grey background |
|---|---|---|
| Dark | Pass | Pass |
| Burgundy | Pass | Pass |
| Dark grey #6e6e6e | Pass | Fail |
| Very dark grey #2c2c2c | Pass | Pass |
| Magenta | Pass | Fail |
| Orange | Pass | Fail |
| Purple | Pass | Pass |
| Dark blue | Pass | Pass |
| Blue | Pass | Pass |
| Turqoise | Pass | Fail |
| Green | Pass | Fail |
| Gold | Pass | Fail |
Excluded secondary colours (cyan, lime, gold), white and light grey.
Offset block on dark background
Excluded primary colours
All pass except Cyan. Cyan is a fail on a black background.
Offset block on Primary background
Excluded all but white. Other colours should not be used.
Ghost white is a fail.
Card component
Note how white ghost buttons no longer have a margin-top 20px. This should be fixed.
| Background colour | HEX | Ghost button |
|---|---|---|
| White | #FFFFFF | PASS - both dark and burgundy |
| Light grey | #f0f0f0 | PASS |
| Medium grey | #c8c8c8 | PASS |
| Dark grey | #6E6E6E | FAIL |
| Very dark grey | #2C2C2C | FAIL |
| Black | #000000 | FAIL |
| Burgundy | #912338 | FAIL |
| Magenta | #db0272 | FAIL |
| Orange | #da3a16 | FAIL |
| Mauve | #573996 | FAIL |
| Dark blue | #004085 | PASS |
| Blue | #0072a8 | FAIL |
| Turquoise | #057d78 | FAIL |
| Green | #508212 | FAIL |
| All tints and secondary colours | PASS |
Button component
Ghost dark on primary colour is a fail