Documentation

Documentation

Using Gold Accent Correctly (20% Rule)

How to apply AURA's gold accent without overusing it — and what happens when you do.

How to apply AURA's gold accent without overusing it — and what happens when you do.

AURA Team

Gold is AURA's most powerful visual tool. It signals action, value, and premium quality on every surface it touches. It is also the easiest token to overuse — and overuse destroys its effect entirely.

Why restraint is the rule

When gold appears on a primary CTA, the eye goes there immediately. The contrast against the warm dark background creates a pull that's almost involuntary. When gold appears on five elements per screen, that pull disappears. Nothing is prioritised. The accent becomes a base color, the warmth becomes noise, and the premium signal evaporates. The 20% rule exists to protect the scarcity that gives the color its power.

Where gold belongs

Primary CTA buttons. Active navigation states. The highlighted pricing card border. Syntax highlighting in code blocks. Hover states on interactive links. Decorative rule lines used sparingly in hero sections. That's the complete list — anything beyond it is overuse.

Where gold does not belong

Body text. Icon fills used at scale. Section dividers. Card backgrounds. Any element that appears more than two or three times on a single page. If you find yourself reaching for gold to make something feel important, the correct solution is usually layout or typography hierarchy, not color.

The opacity variants

For subtle applications — hover borders, glow effects, background tints — use gold at reduced opacity rather than full #C9A96E. At 10% opacity it works as a glow background behind a CTA button. At 25% opacity it works as a hover border state on cards. At full opacity it should appear on fewer than three elements per screen.

The 50% zoom test

Zoom out to 50% on any page and look at where your eye lands first. If it goes to the primary CTA, the gold usage is correct. If it goes somewhere else, or if you can't identify a clear focal point, there's too much gold competing for attention. Reduce until the hierarchy is obvious.

Create a free website with Framer, the website builder loved by startups, designers and agencies.