Images By JRod TX
Brand Reference + Pixieset CSS
Quick Copy
Click any box to select the hex code, then copy
Pure White
#FFFFFF
Warm White
#F9F8F6
Light Gray
#F0EFEC
Near Black
#1A1A1A
Dark Charcoal
#333333
Medium Gray
#666666
Silver
#999999
Champagne Gold
#BFA370
Light Gold
#D4B98A
Muted Gold
#8C7A55
White & Light Tones
The clean, bright foundation
Pure White
#FFFFFF
Primary background
Warm White
#F9F8F6
Alternate sections & cards (from your current site)
Light Gray
#F0EFEC
Hover backgrounds & input fields
Border Gray
#E5E5E5
Borders, dividers, and thin lines
Dark & Text Tones
For headings, body text, and the nav bar
Near Black
#1A1A1A
Nav bar background & primary headings
Dark Charcoal
#333333
Body text & paragraphs
Medium Gray
#666666
Captions, metadata, and secondary text
Silver
#999999
Placeholder text & subtle labels
Gold Accents
Used sparingly for luxury details
Champagne Gold
#BFA370
Buttons, links, accents
Light Gold
#D4B98A
Hover state
Muted Gold
#8C7A55
Borders & dividers
Typography
Serif headings + sans-serif body
Headings -- Cormorant Garamond
Capture the Moment
Wedding Collections
Quinceanera Services
Get in Touch
Google Fonts: fonts.google.com/specimen/Cormorant+Garamond
Body & Navigation -- Raleway
Light 300 -- Every celebration tells a unique story. We capture the moments that matter most.
Regular 400 -- Our style blends documentary and fine art photography.
Medium 500 -- View Gallery | Book Session | Contact
Semibold 600 -- Navigation Labels
Google Fonts: fonts.google.com/specimen/Raleway
Full Page Preview
How the palette comes together on a real page
Jorge Rodriguez
Your Story Deserves to Be Told
Every celebration has its own heartbeat. From the quiet emotion of wedding vows to the bold energy of a quinceanera, we are here to document the moments you will treasure for a lifetime. Our style blends documentary and fine art photography so every image feels both real and timeless.
Explore CollectionsPixieset Custom CSS
Copy and paste these into your Pixieset custom CSS panel
1. Global Colors & Fonts
/* ======================================== JROD BRAND PALETTE - White + Gold Theme Paste into Pixieset > Design > Custom CSS ======================================== */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Raleway:wght@300;400;500;600&display=swap'); :root { /* White & Light Tones */ --white: #FFFFFF; --warm-white: #F9F8F6; --light-gray: #F0EFEC; --border-gray: #E5E5E5; /* Dark & Text Tones */ --near-black: #1A1A1A; --charcoal: #333333; --medium-gray: #666666; --silver: #999999; /* Gold Accents */ --gold: #BFA370; --gold-light: #D4B98A; --gold-muted: #8C7A55; /* Fonts */ --font-heading: 'Cormorant Garamond', serif; --font-body: 'Raleway', sans-serif; }
2. Background & Body Text
/* --- Page Background --- */ body, .site-wrapper, .page-wrapper { background-color: var(--white) !important; color: var(--charcoal) !important; font-family: var(--font-body) !important; font-weight: 300; max-width: 100% !important; width: 100% !important; } /* --- All Headings --- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading) !important; color: var(--near-black) !important; font-weight: 300 !important; letter-spacing: 3px !important; text-transform: uppercase !important; } /* --- Body Text --- */ p, li, span { font-family: var(--font-body) !important; color: var(--charcoal); font-weight: 300; line-height: 1.7; }
3. Navigation
/* --- Navigation Bar (stays dark) --- */ nav, .navigation, .site-header, header { background-color: var(--near-black) !important; } nav a, .navigation a, .nav-link { font-family: var(--font-body) !important; color: var(--silver) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 3px !important; text-transform: uppercase !important; transition: color 0.3s ease !important; } nav a:hover, .navigation a:hover, .nav-link:hover, .nav-link.active { color: var(--white) !important; }
4. Buttons & Links
/* --- Buttons --- */ button, .btn, .button, input[type="submit"] { background: transparent !important; border: 1px solid var(--gold) !important; color: var(--near-black) !important; font-family: var(--font-body) !important; font-size: 11px !important; font-weight: 500 !important; letter-spacing: 3px !important; text-transform: uppercase !important; padding: 14px 36px !important; border-radius: 0 !important; transition: all 0.3s ease !important; } button:hover, .btn:hover, .button:hover, input[type="submit"]:hover { background: var(--gold) !important; color: var(--white) !important; } /* --- Text Links --- */ a { color: var(--gold) !important; text-decoration: none !important; transition: color 0.3s ease !important; } a:hover { color: var(--gold-muted) !important; }
5. Sections & Footer
/* --- Content Sections --- */ section, .section, .content-block { background-color: var(--white) !important; } /* --- Alternate Sections --- */ .section-alt, .block-alt { background-color: var(--warm-white) !important; } /* --- Footer --- */ footer, .site-footer { background-color: var(--near-black) !important; color: var(--silver) !important; } footer a, .site-footer a { color: var(--silver) !important; } footer a:hover, .site-footer a:hover { color: var(--gold) !important; } /* --- Dividers --- */ hr { border: none !important; border-top: 1px solid var(--border-gray) !important; }
6. Forms & Inputs