Arcadia Partners← All options

A colour system built from one green.

Every colour on this page grows from Arcadia's own brand green, #00461E, and three metal tones. Each palette is shown on a small page, in light and dark, with every text colour tested against the international readability standard (WCAG): AA is the legal minimum for body text, AAA is the strongest level.

Arcadia green
#00461E · the seed
Bronze
#9A7B4F
Brass
#C8B282
Copper
#A66844
Green is the ink, not the wallpaper

The brand green looks most expensive on headings, the logo, buttons and lines, with a light ground around it. Large areas of very dark green read heavy.

Metal is for lines and accents

Bronze, brass or copper on hairlines, small labels and links. Never for long text on a light ground unless it is the darker step shown here.

One accent per page

Pick one metal for the whole site. Two metals together start to look like a hotel lobby.

Seal & Stone Recommended

The green becomes the ink and the seal, not the wallpaper. A warm stone ground, bronze hairlines. Answers "I don't like the green": the green is still the brand, used where it looks expensive.

What we do · Partners · Contact
Invest · Engage · Advise
See beyond the obvious.

An independent investment and advisory firm in Abu Dhabi.

Speak to a partnerThe six partners
Active OwnershipOwnership with purpose.
Background#F9F7EE
Cards#FFFFFF
Text#0B3419
Secondary text#525046
Brand green#00461E
Accent#684918
Hairline#DDDBD2
Button#00461E
Button text#F9F7EE
PairContrastLevel
Body text12.88:1AAA
Secondary text7.54:1AAA
Brand green as text10.33:1AAA
Accent as text7.66:1AAA
Button label10.33:1AAA
Text on cards13.82:1AAA
Copy the colour codes (CSS)
:root {
  --arc-bg: #F9F7EE;
  --arc-surface: #FFFFFF;
  --arc-ink: #0B3419;
  --arc-muted: #525046;
  --arc-brand: #00461E;
  --arc-accent: #684918;
  --arc-line: #DDDBD2;
  --arc-button: #00461E;
  --arc-button-text: #F9F7EE;
}
[data-theme="dark"] {
  --arc-bg: #08200F;
  --arc-surface: #0B3419;
  --arc-ink: #F9F7EE;
  --arc-muted: #C3C1B8;
  --arc-brand: #9BD0A7;
  --arc-accent: #D2BF95;
  --arc-line: #114925;
  --arc-button: #D2BF95;
  --arc-button-text: #08200F;
}

Seal & Brass

For a darker, more cinematic site: a deep green ground, two steps lighter than the drafts the client found too dark, with brass for emphasis.

What we do · Partners · Contact
Invest · Engage · Advise
See beyond the obvious.

An independent investment and advisory firm in Abu Dhabi.

Speak to a partnerThe six partners
Active OwnershipOwnership with purpose.
Background#FEF6E6
Cards#FFFFFF
Text#0B3419
Secondary text#525046
Brand green#00461E
Accent#4C3A10
Hairline#E7D9BB
Button#114925
Button text#FEF6E6
PairContrastLevel
Body text12.86:1AAA
Secondary text7.53:1AAA
Brand green as text10.31:1AAA
Accent as text10.18:1AAA
Button label9.75:1AAA
Text on cards13.82:1AAA
Copy the colour codes (CSS)
:root {
  --arc-bg: #FEF6E6;
  --arc-surface: #FFFFFF;
  --arc-ink: #0B3419;
  --arc-muted: #525046;
  --arc-brand: #00461E;
  --arc-accent: #4C3A10;
  --arc-line: #E7D9BB;
  --arc-button: #114925;
  --arc-button-text: #FEF6E6;
}
[data-theme="dark"] {
  --arc-bg: #114925;
  --arc-surface: #0B3419;
  --arc-ink: #FEF6E6;
  --arc-muted: #E7D9BB;
  --arc-brand: #C0E6C8;
  --arc-accent: #D2BF95;
  --arc-line: #1B5F32;
  --arc-button: #D2BF95;
  --arc-button-text: #08200F;
}

Celadon

A softer, mineral grey-green, closer to sage. Calm and modern; reads less "traditional bank". The seal green stays in the logo only.

What we do · Partners · Contact
Invest · Engage · Advise
See beyond the obvious.

An independent investment and advisory firm in Abu Dhabi.

Speak to a partnerThe six partners
Active OwnershipOwnership with purpose.
Background#EBFBF5
Cards#FFFFFF
Text#0B1F19
Secondary text#275B4B
Brand green#00461E
Accent#275B4B
Hairline#C4E3D8
Button#1B463A
Button text#EBFBF5
PairContrastLevel
Body text16.05:1AAA
Secondary text7.32:1AAA
Brand green as text10.37:1AAA
Accent as text7.32:1AAA
Button label9.91:1AAA
Text on cards17.15:1AAA
Copy the colour codes (CSS)
:root {
  --arc-bg: #EBFBF5;
  --arc-surface: #FFFFFF;
  --arc-ink: #0B1F19;
  --arc-muted: #275B4B;
  --arc-brand: #00461E;
  --arc-accent: #275B4B;
  --arc-line: #C4E3D8;
  --arc-button: #1B463A;
  --arc-button-text: #EBFBF5;
}
[data-theme="dark"] {
  --arc-bg: #0B1F19;
  --arc-surface: #123229;
  --arc-ink: #EBFBF5;
  --arc-muted: #A1CCBD;
  --arc-brand: #A1CCBD;
  --arc-accent: #D2BF95;
  --arc-line: #1B463A;
  --arc-button: #A1CCBD;
  --arc-button-text: #0B1F19;
}

Copper Patina

Green with copper, like old metal: warmer and more distinctive in the Gulf, where navy-and-gold is everywhere.

What we do · Partners · Contact
Invest · Engage · Advise
See beyond the obvious.

An independent investment and advisory firm in Abu Dhabi.

Speak to a partnerThe six partners
Active OwnershipOwnership with purpose.
Background#F9F7EE
Cards#FFFFFF
Text#1D1B12
Secondary text#525046
Brand green#00461E
Accent#7A3C13
Hairline#DDDBD2
Button#7A3C13
Button text#F9F7EE
PairContrastLevel
Body text16.07:1AAA
Secondary text7.54:1AAA
Brand green as text10.33:1AAA
Accent as text7.88:1AAA
Button label7.88:1AAA
Text on cards17.24:1AAA
Copy the colour codes (CSS)
:root {
  --arc-bg: #F9F7EE;
  --arc-surface: #FFFFFF;
  --arc-ink: #1D1B12;
  --arc-muted: #525046;
  --arc-brand: #00461E;
  --arc-accent: #7A3C13;
  --arc-line: #DDDBD2;
  --arc-button: #7A3C13;
  --arc-button-text: #F9F7EE;
}
[data-theme="dark"] {
  --arc-bg: #1D1B12;
  --arc-surface: #2E2B22;
  --arc-ink: #F9F7EE;
  --arc-muted: #C3C1B8;
  --arc-brand: #9BD0A7;
  --arc-accent: #EDB292;
  --arc-line: #403D34;
  --arc-button: #EDB292;
  --arc-button-text: #1D1B12;
}

High contrast (accessibility)

Required variant for visitors who need stronger contrast. Every text pair reaches AAA (7:1). Same identity, nothing faded.

What we do · Partners · Contact
Invest · Engage · Advise
See beyond the obvious.

An independent investment and advisory firm in Abu Dhabi.

Speak to a partnerThe six partners
Active OwnershipOwnership with purpose.
Background#FFFFFF
Cards#F9F7EE
Text#08200F
Secondary text#0B3419
Brand green#00461E
Accent#3A2709
Hairline#525046
Button#00461E
Button text#FFFFFF
PairContrastLevel
Body text17.16:1AAA
Secondary text13.82:1AAA
Brand green as text11.08:1AAA
Accent as text14.25:1AAA
Button label11.08:1AAA
Text on cards15.99:1AAA
Copy the colour codes (CSS)
:root {
  --arc-bg: #FFFFFF;
  --arc-surface: #F9F7EE;
  --arc-ink: #08200F;
  --arc-muted: #0B3419;
  --arc-brand: #00461E;
  --arc-accent: #3A2709;
  --arc-line: #525046;
  --arc-button: #00461E;
  --arc-button-text: #FFFFFF;
}
[data-theme="dark"] {
  --arc-bg: #0A0F0C;
  --arc-surface: #08200F;
  --arc-ink: #FFFFFF;
  --arc-muted: #EFEDE4;
  --arc-brand: #C0E6C8;
  --arc-accent: #E7D9BB;
  --arc-line: #C3C1B8;
  --arc-button: #E7D9BB;
  --arc-button-text: #0A0F0C;
}

The full scales

Eleven steps from lightest (50) to darkest (950) for each colour, spaced evenly to the eye. Designers pick from these; nothing else needs inventing.

Arcadia greenseed #00461E sits between 700 and 800
50#E8FDEC
100#DAF5DF
200#C0E6C8
300#9BD0A7
400#71B481
500#4B9660
600#2D7744
700#1B5F32
800#114925
900#0B3419
950#08200F
Stonewarm neutral for grounds and text
50#F9F7EE
100#EFEDE4
200#DDDBD2
300#C3C1B8
400#A4A299
500#85837B
600#68665E
700#525046
800#403D34
900#2E2B22
950#1D1B12
Bronzeseed #9A7B4F
50#FFF5E9
100#FAEAD6
200#ECD7BB
300#D9BC95
400#BE9B6A
500#A17C45
600#825F29
700#684918
800#51380F
900#3A2709
950#241806
Brassseed #C8B282
50#FEF6E6
100#F6ECD6
200#E7D9BB
300#D2BF95
400#B69F6B
500#998047
600#7B632A
700#624D19
800#4C3A10
900#36290A
950#221907
Copperseed #A66844
50#FFF4EF
100#FEE8DC
200#FCD0B8
300#EDB292
400#D58E66
500#B86D41
600#975023
700#7A3C13
800#602D0A
900#451F06
950#2B1305
Celadonseed #3B7A67
50#EBFBF5
100#DDF3EB
200#C4E3D8
300#A1CCBD
400#79AF9D
500#56917E
600#397361
700#275B4B
800#1B463A
900#123229
950#0B1F19

Method: perceptual colour space (OKLCH), each scale keeping its seed's hue. Contrast ratios computed with the WCAG 2.x formula. The brand green as text passes AA on every light ground shown. Next steps once a palette is chosen: apply it to the chosen website option, and check it against the real logo file (SVG) once the client sends it.

Feedback