JRod Brand Reference + Pixieset CSS

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

Capture the Moment

Dallas Fort Worth Photography & Video

View Our Work

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 Collections

Pixieset 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;
}