YOUR PURPOSE IS OUR PURPOSE
Tu propósito es el nuestro
Color Palette
Dark (Primary UI)
#4a4046
Panel headers · Section titles · Structural
Neutral Mid
#7a6e74
Labels · Axis ticks · Muted text
Neutral Light
#b0a8ac
Borders · Subdued fills
Row Alternate
#d8d4d5
Alternating table rows
Red Accent (Primary)
#ea002a
Alerts · Negative values · Active state
Red Light
#f47070
Secondary chart series · Mild alerts
Orange Accent
#f47921
Orange rule dividers · Chart series
Gold Accent
#fdb812
Chart series · Highlights
Gold Light
#f9d48a
Date pills · Soft chart fills
White
#ffffff
Backgrounds · Reversed text
Official Brand Colors (from BWM-2024-04-GUIDELINES)
Shuttle Gray
#5b6772
RGB 91,103,114
Brand Red
#ea172b
Black
#000000
White
#ffffff
Chart Color Sequence
Use in this exact order for donut/pie/line chart series. No blues or greens.
1
#4a4046
2
#7a6e74
3
#fdb812
4
#f9d48a
5
#f47921
6
#f47070
7
#ea002a
8
#b0a8ac
9
#d8d4d5
10
#2e2a2c
11
#c8a87a
Typography
BankGothic Bold
PANEL TITLE
Headlines · Panel headers · Logo wordmark
PANEL TITLE
Headlines · Panel headers · Logo wordmark
Geometos
SECTION HEADER
Sub-headlines · Secondary display
SECTION HEADER
Sub-headlines · Secondary display
Open Sans Bold
Body Bold Text — BIWEALTHY
BIWEALTHY sub-brand body bold
Body Bold Text — BIWEALTHY
BIWEALTHY sub-brand body bold
Open Sans Regular
Body copy, table content, footnotes
General body · Tables · Footnotes
Body copy, table content, footnotes
General body · Tables · Footnotes
Arial (fallback)
Table data 11–11.5px · Axis ticks 10px · Footnote 9px
All charts and data tables
Table data 11–11.5px · Axis ticks 10px · Footnote 9px
All charts and data tables
Component Examples
Panel header + orange rule + table
Portafolio Sugerido
| Fondo | YTD % | 1Y % | Vol |
|---|---|---|---|
| iShares Core 60/40 | 3.1 | 18.9 | 10.3 |
| Vanguard S&P 500 | -0.5 | 18.0 | 10.8 |
| iShares US Bond | 1.0 | 6.4 | 2.6 |
| Physical Gold ETC | 18.0 | 83.4 | 16.9 |
Toolbar controls
3 AÑOS · DIARIO
Legend (square swatches · 10×10px)
Renta variable39.4%
Bono47.6%
Efectivo3.1%
Otros9.9%
Total100.0%
Morningstar style boxes
Fixed Income — marker: #4a4046
| Ltd | Mod | Ext | |
|---|---|---|---|
| High | |||
| Med | |||
| Low |
Equity — marker: #ea002a
| Val | Blend | Gr | |
|---|---|---|---|
| Large | |||
| Mid | |||
| Small |
Value states & semantic colors
| Negative value | -4.2% |
| Positive value | 18.0% |
| Missing / N/A | — |
| Section header | Renta Fija |
| Active button | 3Y |
| Orange rule |
Do’s & Don’ts
✓ DO
✓Use #4a4046 (warm dark) as the primary dark in all panels and headers
✓Use 10×10px square swatches in all legends
✓Place a 2px #f47921 orange rule below every panel title
✓Color negative values #ea002a, bold
✓Alternate table rows: #d8d4d5 / #ffffff
✓Use the chart sequence in order (dark → neutral → gold → orange → red)
✓Use Arial as the fallback font in all charts and tables
✓Use #ea002a as the equity style-box marker
✓Use #4a4046 as the fixed-income style-box marker
✓Keep backgrounds flat — white or #f4f2f3 page bg
✗ DON’T
✗Use blues, teals, or greens in any chart or component
✗Use #5b6772 steel slate — replaced by #4a4046
✗Use circle legend swatches — squares only
✗Add gradients, drop shadows, or blur effects
✗Use the word «BANORTE» alone in charts — pair with «WEALTH MANAGEMENT» or omit
✗Stretch, recolor, or alter the logo
✗Use font sizes below 9px anywhere visible
✗Place black text on colored backgrounds — use dark shade from same ramp
✗Skip the orange rule divider below panel headers
✗Use rounded corners on legend swatches or table cells
Sub-brands & Tone
| Sub-brand | Primary Font | Tone |
|---|---|---|
| Banorte Wealth Management | BankGothic + Geometos | Trustworthy · Empathetic · Inspirational |
| Banorte Securities | BankGothic + Geometos | Professional · Trustworthy · Empowering |
| Banorte Wealth Advisors | BankGothic + Geometos | Professional · Trustworthy · Approachable |
| Banorte Wealth Strategies | BankGothic + Geometos | Professional · Trustworthy · Reassuring |
| BIWEALTHY™ | Open Sans | Empowering · Educational · Insightful · Professional |