Brand & Design System

The single source of truth for GOLD IRA.

Every colour, typeface, button and component that builds the site — in one place. Download the logos, copy the palette, and reuse the same building blocks so every new page stays perfectly on-brand.

Get the logos Copy the palette

Brand Assets

Logo & downloads

The approved lockups. Download vector SVG for print and web, or high-resolution PNG for slides, docs and social. Use the white version on dark backgrounds. Keep clear space of at least the cap-height around the mark, and never recolour, stretch or add effects.

Horizontal Lockup

Primary lockup. Use in headers, wide spaces and email signatures.

Vertical Lockup

Stacked mark for square spaces, footers, social avatars and print.

App icon / favicon

The coin-and-monument mark for tabs, avatars and app tiles.

SVG

Palette

Colour

Two poles — malachite green and warm gold — on warm paper, never pure white or grey. Click any swatch to copy its hex; click the label row to copy the token name.

Surfaces

Warm off-white paper. Everything sits on these — never pure white, never grey.

Paper

Primary page background

Paper Deep

Alternating section bands, subtle contrast

Paper Card

Cards and raised surfaces

Ink

Green-tinted near-blacks for text. Sized and weighted for a 45+ readership.

Ink

Body copy, default text color

Ink Soft

Secondary text, ledes, nav

Ink Faint

Meta, captions, labels

Malachite Greens

The primary brand color, pulled straight from the logo. Structure and trust.

Malachite

Primary brand green, solid buttons

Malachite Deep

Headings, dark sections, footer

Malachite Soft

Hovers, stone banding highlights

Malachite Mist

Tinted hover fills, quiet backgrounds

Golds

Warm, Augusta-style gold — an accent, never harsh. Used sparingly for emphasis.

Gold

Primary accent, hairlines, logo

Gold Soft

Gradient top-stop, dark-bg eyebrows, selection

Gold Deep

Eyebrows on light, focus ring, CTA gradient base

Gold Whisper

Active/open fills, tint washes

Type

Typography

A serif/sans pairing: Fraunces for display warmth, Inter for readable body. Body is set at 17px / 1.65 line-height, deliberately generous for a 45+ readership.

Fraunces

Display — headings, numerals, brand voice

400 · 500 · 600 · 700 (optical sizing 9–144)

Gold that outlives paper.

Inter

Body — paragraphs, UI, labels

400 · 500 · 600 · 700

Plain-English education and honest, side-by-side comparisons of the leading Gold IRA companies.

Display / Hero

Fraunces · 48–60px · Medium

What is a Gold IRA?

Section Title (H2)

Fraunces · 36–48px · Medium

Questions we hear at every kitchen table

Card Title (H3)

Fraunces · 21.6px · Semibold

How the rollover actually works

Eyebrow

Inter · 12.8px · Semibold · 0.22em tracking

STRAIGHT ANSWERS

Lede

Inter · 18–20px · Regular

Everything below starts with what the law actually allows.

Body

Inter · 17px · Regular · 1.65 line-height

We compare five companies side by side on fees, minimums and conduct — so you can decide with clear eyes.

Meta / Small

Inter · 13.6px · Regular

6 min read · Updated July 2026

Actions

Buttons

Three variants in two sizes, from AffiliateCta (external) and CtaLink (internal). Gold is the one primary action per screen; malachite and outline are supporting.

Gold — primary

Our #1 Rated Company See the pick

Malachite — secondary

Compare companies Read the guide

Outline — tertiary

Browse all guides Learn more

Library

Components

The recurring blocks that assemble every page. Live, interactive — exactly as they render in production.

Section heading

components/SectionHeading.tsx

Straight answers

Questions we hear at every kitchen table

Article card

components/ArticleCard.tsx

Education9 min read

What Is a Gold IRA? A Plain-English Guide

A Gold IRA is a self-directed retirement account that holds physical gold instead of paper assets. Here is how it works, what it costs, and who it suits — explained without the sales pitch.

Read the guide

Trust stat

components/home/TrustStrip.tsx

5 companiescompared side by side on fees, minimums and conduct

FAQ item

components/home/Faq.tsx

No. IRS rules require IRA metals to be held by an approved custodian in an approved depository. Storing them at home can disqualify the account and trigger taxes and penalties.

Rating stars

components/ComparisonTable.tsx

4.9 / 5

Texture

Texture & utilities

Signature surface treatments that give the brand its printed, engraved feel. Copy the class name to reuse.

The brand's 1px gold divider — fades in and out at the ends.

Gradient-filled serif numerals and hero accent words.

Malachite

Dark polished-stone surface for footers and feature panels.

Adam has valued estates at kitchen tables across New York for decades, and the opinions here are entirely his own.

Serif first-letter for the appraiser's letter.

Structure

Layout & spacing

Token	Value	Use
Content width	`max-w-7xl (80rem)`	Default page container
Reading width	`max-w-3xl (48rem)`	Prose, headings, ledes
Gutter	`px-5 md:px-8`	Horizontal page padding
Section rhythm	`py-20 lg:py-28`	Vertical space between sections
Header height	`h-[4.5rem]`	Sticky header bar

Depth

Radii & elevation

Corner radii

rounded

4px — inputs, chips

rounded-lg

8px — buttons

rounded-xl

12px — cards

rounded-2xl

16px — panels, media

rounded-full

pills, icon buttons

Elevation

Card rest → hover

Article cards lift on hover

Gold CTA

Primary gold button, deepens on hover

Malachite CTA

Solid green button

Header float

Sticky header once scrolled

Movement

Motion

One easing curve throughout — . Confident but calm. All motion is gated behind prefers-reduced-motion and degrades to instant.

Reveal

Fade + rise 28px on scroll-in · 0.7s · once

Stagger

Children cascade · 0.1s step · 0.65s each

Hover lift

translateY(-2 to -4px) · 0.3s

Accordion

height + opacity · 0.4s

Tokens live in src/data/designTokens.ts & src/components/BrandStyles.tsx. Change them there and this page updates itself.