Brand colors, typography, component patterns, voice, and photography guidelines extracted from apmex.com and learn.apmex.com. Use this as the reference for all design and development work on the Knowledge Center rebuild.
Extracted October 20263 typefaces confirmedFull color systemLight-first brand
01 - Core brand colors
Light-first brand. APMEX uses white and light grey as the dominant content surfaces, with the dark navy reserved for nav, hero sections, and high-emphasis UI. Orange is the primary CTA accent; teal is the secondary action color. This is the opposite of dark-first brands like Aris.
APMEX Navy
#0B2437
RGB 21, 34, 52
Primary brand dark. Nav background, hero sections, dark UI surfaces, CTA buttons on light backgrounds.
Deep Navy
#071828
RGB 13, 24, 32
Price ticker bar, page-level footer. Deepest navy tone for maximum contrast.
Hero Navy
#1a4d72
RGB 26, 50, 68
Hero section background. Slightly lighter than APMEX Navy - creates depth in dark surfaces.
APMEX Orange
#F5A623
RGB 245, 166, 35
Primary CTA accent. SHOP NOW button, cart badge, promo bar links, and all primary call-to-action moments.
APMEX Teal
#00A99D
RGB 0, 169, 157
Secondary action color. Nav active underline, search hover, cart icon, breadcrumb links, and hover states throughout the UI.
These colors carry live market meaning on the APMEX platform. Green = price up, red = price down. This association is embedded in user expectations and must be maintained consistently.
Price Up
#3DA553
RGB 22, 163, 74
Positive price change, spot price increase, buy/bullish indicators. NEVER used for purely decorative elements.
Price Down
#DC2626
RGB 220, 38, 38
Negative price change, spot price decrease. Never reuse for generic error states - creates false financial signals.
Text Primary
#313131
RGB 26, 26, 26
Article body headings, primary UI labels, card titles. Near-black (not pure black) for softer contrast.
Text Secondary
#666666
RGB 85, 94, 104
Body copy, card descriptions, metadata. Mid-gray with a slight cool-blue shift matching the navy brand tone.
Text Tertiary
#9CA3AF
RGB 156, 163, 175
Timestamps, captions, placeholder text, disabled states. Not for meaningful content.
Fixed opacity steps for consistent usage across web and any future native environments.
APMEX Navy (#0B2437)
6%
12%
25%
50%
75%
100%
APMEX Orange (#F5A623)
6%
12%
25%
50%
75%
100%
White (#FFFFFF)
5%
10%
25%
50%
75%
100%
04 - Color ratio
Light-first brand. White and Off-White dominate the content layer; APMEX Navy is the structural anchor; Orange drives CTAs; Teal marks active states and secondary interactions.
38% White
22% Off-White
22% Navy
12% Text
4%
2%
White - primary content surfaceOff-White - page bg, section dividersNavy - nav, hero, emphasisOrange - CTA moments onlyTeal - active states and links
05 - Contrast & accessibility
WCAG 2.1 compliance targets. All primary text/background combinations must pass AA (4.5:1 for normal text, 3:1 for large). Text on the price ticker must pass AA for accessibility.
Combination
Sample
Ratio
Level
Text Primary on White
Article body
17.5:1
AAA
Text Secondary on White
Card desc
5.9:1
AA
White on APMEX Navy
Nav links
13.2:1
AAA
Orange on Deep Navy
Promo link
8.1:1
AAA
Teal on White
Active link
3.2:1
AA Large
White on APMEX Orange
CTA button
3.4:1
AA Large
Price Up on White
+$12.40 ▲
4.6:1
AA
Price Down on White
−$8.20 ▼
5.1:1
AA
Text Tertiary on White
Timestamp
2.9:1
Captions only
06 - Typography
Two Google Fonts on apmex.com (main site). Open Sans Condensed Bold is the logo/display font, giving APMEX its distinctive compact, uppercase brand word. Open Sans Regular handles all body copy and UI text. The knowledge center (learn.apmex.com) also loads Manrope as an additional heading face.
Display / Logo: Open Sans Condensed Bold 700
APMEX
font-family: 'Open Sans Condensed', sans-serif • font-weight: 700 • text-transform: uppercase • Used for the logo wordmark, hero display text, and large section banners
H2 / Section heading: Open Sans Bold 700
Our Latest Answers
font-family: 'Open Sans', sans-serif • font-weight: 700 • 1.4rem–1.75rem • Used for all section and page-level headings
H3 / Card heading: Open Sans SemiBold 600
What is the difference between gold bars and gold coins?
font-family: 'Open Sans', sans-serif • font-weight: 600 • 1rem–1.1rem • Used for article card titles and in-article subheadings. Q&A format - question-style titles throughout.
Body: Open Sans Regular 400
Gold has been a store of value for thousands of years. Unlike paper currency, gold's value is not tied to the performance of a single country's economy, making it a popular choice for investors looking to diversify their portfolios and protect against inflation.
font-family: 'Open Sans', sans-serif • font-weight: 400 • 0.9rem–1rem • line-height: 1.7 • Primary body copy in all article content
UI / Nav Label: Open Sans SemiBold 600, uppercase
Investing Guide Buying Guide Selling Guide Video Center
Gold has been a store of value for thousands of years.
Body 2 / Desc
Open Sans
0.85rem
400 Regular
Learn more about investing in precious metals.
Nav / UI label
Open Sans
0.8rem
600 SemiBold
Investing Guide
Caption / Meta
Open Sans
0.72rem
400 Regular
Updated October 2024
07 - Voice & copy
APMEX's Knowledge Center speaks with the calm authority of a trusted financial educator - not a salesperson, not a blogger. Every article answers a real question a buyer or investor would type into Google. The tone is informative, specific, and trust-building.
Hero & section headlines
Ask Us Anything About Gold or Silver
Get Started With Precious Metals
What is Gold's All-Time High?
How Do I Sell My Silver?
New to Metals? Get Started Here
Essential Guides for Every Investor
Article title patterns (Q&A format)
Titles are written as questions a real investor would ask:
What is Bullion? How to Buy Gold for the First Time What Are PCGS and NGC Graded Coins? Is Silver a Good Investment in 2026? How Much Gold Should I Own?
Voice rules
Use specific numbers and data where possible: Gold has gone up a lot recently
→ Gold is up 18% year-to-date as of October 2026.
Lead with the answer, then explain: In this article we will discuss…
→ Gold's all-time high was $2,135.39, set in December 2023.
No author bylines - articles are brand-attributed only. Rebuilding should add expert author names + credentials.
No publish dates - visible on the current site only in News. All articles should show published + updated date.
A+ BBB since 2004 - this trust signal lives only in the footer. Surface it on article pages and key conversion points.
08 - Core components
Price Ticker (utility bar)
Gold$2,621.40+12.40 ▲
Silver$30.85−0.32 ▼
Platinum$1,012.00+5.80 ▲
Palladium$1,140.50−22.10 ▼
SHOP NOW →
Navigation bar
APMEX®
Knowledge Center
APMEX AnswersCoin Value GuideLearning GuidesInvesting GuideBuying GuideSelling GuideVideo Center
Hero search (homepage)
APMEX Knowledge Center
Ask Us Anything About Gold or Silver
"What is gold's all-time high?" · "What is bullion?" · "How do I sell my silver?"
Inline search (category / section pages)
Filter + sort bar (section pages - rebuild adds this)
Filter:Type:142 results
Filter/sort bar is a new feature for the rebuild. The current Knowledge Center has no filtering or faceted browsing - users can only scroll or search. This is one of the highest-impact additions.
Category tiles (homepage navigation row)
APMEX Answers
Coin Value Guide
Learning Guides
Investing Guide
Buying Guide
Selling Guide
Article cards (content grids)
Gold product image
What is the difference between gold bars and gold coins?
Read More
Silver bars image
How to Store Gold and Silver at Home Safely
Read More
Platinum coins image
Is a Precious Metals IRA Right for You?
Read More
Button styles
Primary (Navy)
Primary (Gold)
Outline Navy
Outline Gold
Text link
09 - Photography & imagery
APMEX's visual language is entirely product and subject-matter focused. Photography shows physical precious metals - coins, bars, rounds - shot with professional warm lighting on rich textured surfaces. No lifestyle, no people.
Gold & silver coins
Use
Close-up product photography: graded coin slabs, gold bars, silver rounds. Warm lighting, textured surface (wood, fabric). High resolution, professional grade.
Ghosted coin on navy
Use
Hero backgrounds: large-format coin or bar photography at 15–25% opacity behind dark navy overlay. Maintains text legibility while creating visual richness.
Stock lifestyle photo
Avoid
Generic lifestyle photography, stock images of people, financial charts used decoratively. Not in the APMEX visual system - they use real product imagery only.
Warm gold tones
Use
Warm-toned photography of physical metals: gold's natural warm luster, silver's cool reflective surface. The contrast of warm gold vs. cool silver reflects the product range visually.
10 - Iconography
All icons are inline SVG - no icon font or external library dependency. Stroke weight 1.8px, 24x24 viewBox, rounded linecap/linejoin. Navy (#0B2437) on light surfaces; orange (#F5A623) as the dark-theme adaptation. The icon set covers the six content categories, UI controls, and social channels.
Content category icons
APMEX Answers
Coin Value Guide
Learning Guides
Investing Guide
Buying Guide
Selling Guide
Video Center
GitHub / Code
UI control icons
Search
Menu
Chevron right
Chevron left
Arrow right
Expand
Close
Info
Check
Location
Price down
Price up
Social icons (inline SVG, no library)
Twitter / X
Instagram
Facebook
YouTube
LinkedIn
11 - Spacing scale
--sp-14pxIcon gaps, tight inline spacing
--sp-28pxCard internal padding tight, chip gap
--sp-312pxCard padding, filter chip padding
--sp-416pxStandard card padding, article body gutter
--sp-624pxPage gutter, section spacing
--sp-832pxSection padding, card grid gap
--sp-1248pxHero vertical padding, section margin
--sp-1664pxMajor section breaks, hero to first content