Brand Guidelines
The visual identity, colors, typography, and interactive components of Ochi Jewelry.
Identity & Design Principles
Ochi Jewelry stands for luxury, heritage, and precision. Our visual identity balances classic elegance (traditional serifs, deep obsidian backgrounds) with modern interactions (subtle micro-animations, glassmorphism, responsive grids).
Brand Color Swatches
Click on any swatch card to copy its Hex code to your clipboard.
Gold (Primary)
#C9A84C--color-goldBrand core. Primary buttons, icons, accents.
Light Gold
#E8C96D--color-gold-lightPrimary button hover states, focus outlines.
Dark Gold
#9A7A30--color-gold-darkSecondary borders, icons, background glows.
Obsidian Black
#0A0A0A--color-blackMain page background color.
Obsidian Dark
#111111--color-darkSecondary page section backgrounds.
Alabaster Text
#F5F0E8--color-textPrimary typography, headings, high contrast text.
Font System
Our pairing combines classic editorial elegance with modern digital legibility.
Cormorant Garamond
Used primarily for hero banners, page headers, section titles, and key branding items. Regulates spacing, regality, and traditional luxury.
h1 Hero Headline (64px)
h2 Section Title (40px)
h3 Component Title (24px)
Inter Sans
Used for descriptions, body text, navigation bars, buttons, form controls, and metadata. Highly legible on all digital viewports, particularly at small scale.
Lead Paragraph (18px) — Used for sub-headers and summaries.
Body Copy (15px) — Standard text block size. Written in Inter, regular weight, with 1.6-1.8 line height for optimal legibility.
Small / Caption Copy (12px) — Used for section labels, timestamps, and badges.
Interactive Design Elements
Standardized components that define the user experience and interface of the Ochi Jewelry website.
Buttons & States
Card & Hover States
Premium Showcase
Hover over this card to preview the gold border glow, backdrop filter blur transitions, and depth shadows.