We are trying to build a ROI study for a customer based on the provided screenshot. This was a model we built in excel. Can you build a sample dashboard that we could share with the customr to walk through the ROI? It can be built in the form of a calculator dashboard. Focus on both aesthetics and functionality
Loading...
Loading...
please implement this color pallette.
🧠 LLM Instructions: Tread Brand Color Guide
Use the following official Tread color palette for all design-related tasks, including UI mockups, marketing assets, accessibility checks, and theme generation. Follow these rules:
- Use black, gray, and white as foundational colors.
- Use yellow for highlights only — to draw attention or emphasize.
- Maintain strong contrast for readability and accessibility.
- Favor accessible pairings based on contrast best practices (see examples below).
- Refer to HEX codes as primary values for styling; use RGB/CMYK if needed.
🎨 Tread Color Palette
Primary Colors
| Color | HEX | RGB | CMYK |
|--------------|----------|----------------|----------------|
| Tread Yellow | #FFE500| 255, 229, 0 | 2, 4, 99, 0 |
| Tread Black | #132732| 19, 39, 50 | 80, 70, 55, 62 |
| Tread White | #FFFFFF| 255, 255, 255 | 0, 0, 0, 0 |
Neutral Grays
| Name | HEX | RGB | CMYK |
|--------------|----------|----------------|----------------|
| Gray 1 | #354752| 53, 71, 82 | 80, 61, 51, 37 |
| Gray 2 | #4E606A| 78, 96, 106 | 72, 53, 46, 21 |
| Gray 3 | #697982| 105, 121, 130 | 62, 44, 40, 9 |
| Gray 4 | #8B929A| 139, 146, 154 | 52, 36, 33, 2 |
| Gray 5 | #A0ABB1| 160, 171, 177 | 39, 20, 25, 0 |
| Gray 6 | #BAC4C9| 187, 196, 201 | 27, 17, 18, 0 |
| Gray 7 | #D0DDE1| 214, 221, 225 | 15, 8, 8, 0 |
| Gray 8 | #F1F5F9| 241, 245, 249 | 4, 1, 1, 0 |
Secondary Accent Colors
| Color | HEX | RGB | CMYK |
|------------------|----------|----------------|----------------|
| Tread Orange | #FFA315| 255, 170, 19 | 0, 38, 99, 3 |
| Tread Orange Dark | #EB850F| 235, 133, 15 | 5, 57, 100, 0 |
| Tread Yellow Dark | #ECC500| 236, 200, 0 | 8, 19, 100, 0 |
♿️ Color Accessibility Rules
Use the following pairings for optimal legibility and accessibility:
- ✅ Yellow
#FFE500on Black#132732 - ✅ White
#FFFFFFon Black#132732 - ✅ Black
#132732on Gray 8#F1F5F9 - ✅ Orange
#FFA315on Gray 1#354752 - ✅ Black
#132732on Yellow#FFE500
Do not use light grays (Gray 7–8) as foreground text unless on dark backgrounds. Ensure all text meets WCAG AA contrast standards.