DESIGN SYSTEM & IDENTITY

CityGold Brand Guidelines & Tokens

Authoritative token specification, approved logo lockups, contrast compliance, and typography scales for the CITYGOLD Haute Joaillerie platform.

BRAND IDENTITY

Approved Logo Lockups

Wordmark “CITYGOLD” in single-word display face with the letter ‘O’ replaced by the faceted gem glyph. Tagline “Gold • Diamonds • Platinum” centered beneath at ~18% cap height.

APPROVED

Gold on Dark (Header / Void Ground)

APPROVED

Red on Cream (Stationery / Light Surface)

APPROVED

Gold on Red (Footer Top Band / Editorial)

APPROVED

Red on Gold (Gift Packaging / Special Seal)

APPROVED

Red on White (Certificates & Invoices)

FAVICON / APP ICON / SMALL SCREENS

Isolated Gem-O Mark Variant (<480px header, favicon)

CLEAR SPACE

Minimum clear space on all sides must equal the cap height of the initial “C”.

RENDER SIZES

Minimum render width 87px. Target 130px in primary header. Tagline hides below 768px.

RESTRICTIONS

Never stretch, rotate, recolour, add drop shadows/glows, or crowd with other elements.

COLOR BALANCE RULE

50 / 37.5 / 6.2 / 6.2 Token Balance

Red is the dominant brand colour (surfaces & signals), Gold second, Forest and Teal are minimal accents only. Click any token to copy hex code.

#A6192E

--redClick to copy

Cartier red — THE signature colour. Dominant brand signal and active state surface.

Compliance:5.8:1 on Cream (Passes AAA)

#890017

--red-deepClick to copy

CityGold Rich Red — hover/pressed states, footer top band, red surfaces on dark.

Compliance:7.9:1 on Cream (Passes AAA)

#EDC797

--goldClick to copy

Humble Gold — primary button fill, logo on dark, hairline accents.

Compliance:12.4:1 on Void (Passes AAA)

#C9A176

--gold-deepClick to copy

Icon strokes, active underlines, small-type accents.

Compliance:8.1:1 on Void (Passes AAA)

#FEFEF7

--creamClick to copy

Light surfaces, text on red surfaces.

Compliance:5.8:1 against Red (Passes AA)

#233838

--forestClick to copy

Secondary accent, sparing. Trust bar icons, microcopy only.

Compliance:Accent Only (Never large surface)

#76BFB5

--tealClick to copy

Secondary accent, sparing. Certification hallmarks & badges only.

Compliance:Accent Only (Never large surface)

#0A0A0B

--bg-voidClick to copy

Page background — absolute quiet luxury ground.

Compliance:Near-black ground

#121214

--bg-panelClick to copy

Card surfaces, navigation on scroll, modals.

Compliance:Dark elevation tier 1

#1A1A1D

--bg-elevatedClick to copy

Hover states, interactive container elevation.

Compliance:Dark elevation tier 2

#F5F1EA

--textClick to copy

Primary body & display text on dark ground.

Compliance:16.1:1 on Void (Passes AAA)

#8E8880

--text-mutedClick to copy

Muted copy, metadata, secondary captions.

Compliance:6.2:1 on Void (Passes AA)

CRITICAL WCAG CONTRAST RULE

--gold on --bg-void and --cream on --red both pass AA for body text. Never set --gold text on --red or --red text on --bg-void — both fail accessibility standards.

Cream on Red: PASSGold on Void: PASS

TYPE SYSTEM

Megant & ARS Maquette Pro Stacks

Display is reserved strictly for H1, H2, and the wordmark. All UI, buttons, body copy, and prices are set in the body face.

DISPLAY H1 • CLAMP(48PX, 5VW, 72PX)tracking -0.015em, line-height 1.2

Sovereign Beauty, Set in Gold.

DISPLAY H2 • 24–36PXtracking -0.01em, line-height 1.25

Handcrafted Solitaires & High Jewellery Rivières.

BODY LUXURY • 18–20PXtracking +0.01em, line-height 1.5

Every natural diamond in the CityGold vault is laser-inscribed with its GIA or IGI certificate number. Forged in solid 18K Humble Gold and 950 Platinum by generational artisans in Mumbai.

UI / EYEBROW / BUTTONS • 11PX UPPERCASEletter-spacing 0.18em (0.18em)

DISCOVER COLLECTIONBIS 916 HALLMARKEDGIA CERTIFIED SOLITAIRESACTIVE NAV INDICATOR

GRAPHIC ASSETS

Seamless SVG Brand Patterns

Used strictly as subtle background texture: Pattern-2 at 5% on red bands and footers; Pattern-1 at 6% on editorial blocks. Never at full strength, never behind product photography.

PATTERN-1

Topographic Contour Ribbons

Flowing organic lines evocative of polished precious metal ribbons. Rendered at 6% opacity behind the editorial split block.

PATTERN-2

Gem-O Lattice

A seamless geometric lattice derived from the faceted gem glyph in GOLD. Rendered at 5% opacity behind trust-bar and footer.

COMPONENTS

Buttons & Interactive Signals

PRIMARY BUTTON

--gold fill, --bg-void text, 0-2px radius, 14px 32px padding, uppercase 11px/0.18em. Hover: brightness lift, no scale.

SECONDARY BUTTON

Transparent, 1px --hairline border, --text label, trailing “→”. Hover: border → --red.

ON RED INVERTED

On red surfaces, invert: --cream fill with --red text, or cream outline.