/* ═══════════════════════════════════════════ RA OPTICS LUMINARIES — COMPLETE STYLESHEET ═══════════════════════════════════════════ */ /* FONTS */ @font-face { font-family: 'ABC Arizona Mix Variable'; src: url('https://cdn.shopify.com/s/files/1/0021/9335/8905/files/ABC_Arizona_Mix_Variable_Unlicensed_Trial.woff2?v=1749328046') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Maison Neue'; src: url('https://cdn.shopify.com/s/files/1/0021/9335/8905/files/MaisonNeue-Book.woff2?v=1743741269') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Maison Neue'; src: url('https://cdn.shopify.com/s/files/1/0021/9335/8905/files/MaisonNeue-Bold_8f8ac6d4-b3aa-4063-bffa-9f2bbda01254.woff2?v=1752541793') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* VARIABLES */ :root { --cream: #FFF2DE; --cream-light: #FFFCF8; --navy: #002249; --navy-mid: #1a3a5c; --navy-muted: #4a6280; --gold: #DCAC4D; --border: rgba(0,34,73,0.09); --border-soft: rgba(0,34,73,0.06); --shadow-sm: 0 1px 4px rgba(0,34,73,0.05), 0 4px 14px rgba(0,34,73,0.04); --shadow-md: 0 2px 8px rgba(0,34,73,0.07), 0 8px 28px rgba(0,34,73,0.05); --shadow-lift: 0 4px 20px rgba(0,34,73,0.09), 0 16px 48px rgba(0,34,73,0.05); } /* BASE */ body { background: var(--cream) !important; color: var(--navy) !important; } /* TYPOGRAPHY */ .notion-header__title, .notion-h1, .notion-h2 { font-family: 'ABC Arizona Mix Variable', Georgia, serif !important; color: var(--navy) !important; font-weight: 400 !important; } body, p, span, li, .notion-text, .notion-callout, .notion-table__cell, .notion-toggle-block { font-family: 'Maison Neue', sans-serif !important; } /* PAGE TITLE */ .notion-header__title { font-size: 2.8em !important; letter-spacing: -0.01em !important; line-height: 1.15 !important; padding-top: 64px !important; } /* COVER IMAGE */ .notion-header__cover.has-cover { height: 320px !important; min-height: 320px !important; } /* NAVBAR */ .super-navbar { background: rgba(255, 247, 233, 0.82) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border-bottom: 1px solid rgba(0,34,73,0.06) !important; box-shadow: 0 1px 0 rgba(0,34,73,0.05), 0 6px 24px rgba(0,34,73,0.05) !important; transition: background 0.3s ease, box-shadow 0.3s ease !important; } .super-navbar__item a { font-family: 'Maison Neue', sans-serif !important; font-size: 0.85rem !important; letter-spacing: 0.04em !important; color: var(--navy) !important; text-transform: uppercase !important; font-weight: 500 !important; opacity: 0.75 !important; transition: opacity 0.2s !important; } .super-navbar__item a:hover { opacity: 1 !important; } .super-navbar__item-list { display: flex !important; flex: 1 !important; justify-content: center !important; position: static !important; } /* PAGE CONTENT WIDTH */ .notion-page-content { max-width: 720px !important; margin: 0 auto !important; padding: 0 24px 80px !important; animation: fadeUp 0.4s ease both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* HEADINGS */ .notion-h1 { font-size: 1.9em !important; margin-top: 2em !important; margin-bottom: 0.5em !important; padding-top: 0.5em !important; border-top: 1px solid var(--border) !important; } .notion-h2 { font-size: 1.4em !important; margin-top: 2em !important; margin-bottom: 0.4em !important; } .notion-h3 { font-family: 'Maison Neue', sans-serif !important; font-size: 0.82em !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--gold) !important; margin-top: 1.6em !important; } /* DIVIDER */ .notion-divider { border: none !important; border-top: 1px solid var(--border) !important; margin: 2.5em 0 !important; opacity: 1 !important; } /* CALLOUT */ .notion-callout { background: rgba(255,255,255,0.55) !important; border: none !important; border-left: 3px solid var(--gold) !important; border-radius: 0 8px 8px 0 !important; padding: 18px 24px !important; box-shadow: var(--shadow-sm) !important; color: var(--navy) !important; margin: 1.5em 0 !important; } .notion-callout .notion-callout__icon { display: none !important; } /* TABLES */ .notion-table__wrapper { width: 100% !important; border-radius: 10px !important; overflow: hidden !important; box-shadow: var(--shadow-sm) !important; margin: 1.5em 0 !important; } .notion-table { width: 100% !important; border-collapse: collapse !important; } .notion-table tr:first-child td { background: var(--navy) !important; color: var(--cream) !important; font-size: 0.7rem !important; font-weight: 600 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; padding: 14px 18px !important; } td { background: rgba(255,255,255,0.5) !important; border-bottom: 1px solid var(--border-soft) !important; padding: 14px 18px !important; vertical-align: top !important; } .notion-table__cell { display: block !important; width: 100% !important; box-sizing: border-box !important; background: transparent !important; font-size: 0.9rem !important; color: var(--navy) !important; line-height: 1.6 !important; } td:first-child .notion-table__cell { font-weight: 600 !important; } tr:last-child td { border-bottom: none !important; } tr:hover td { background: rgba(255,255,255,0.75) !important; } /* TOGGLES */ .notion-toggle-block { background: rgba(255,255,255,0.45) !important; border: 1px solid var(--border) !important; border-left: 3px solid var(--gold) !important; border-radius: 0 8px 8px 0 !important; padding: 16px 20px !important; margin: 0.6em 0 !important; box-shadow: var(--shadow-sm) !important; transition: box-shadow 0.2s ease, background 0.2s ease !important; } .notion-toggle-block:hover { background: rgba(255,255,255,0.7) !important; box-shadow: var(--shadow-md) !important; } .notion-toggle-block > summary { font-weight: 600 !important; color: var(--navy) !important; cursor: pointer !important; } /* FOOTER */ .super-footer { background: var(--navy) !important; color: rgba(255,242,222,0.6) !important; } /* SCROLLBAR */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--cream); } ::-webkit-scrollbar-thumb { background: rgba(0,34,73,0.2); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: rgba(0,34,73,0.35); } /* ─── MOBILE ─────────────────────────────── */ @media (max-width: 768px) { .super-navbar__item-list { display: none !important; } .notion-header__title { font-size: 2.2em !important; padding-top: 48px !important; } .notion-callout { padding: 16px 20px !important; border-left-width: 3px !important; } .notion-table { width: auto !important; } .notion-table__wrapper { max-width: 100% !important; overflow-x: scroll !important; -webkit-overflow-scrolling: touch !important; } .notion-table__cell { padding: 10px 12px !important; font-size: 0.875rem !important; min-width: 90px !important; } .notion-asset-wrapper, .notion-image-block, .notion-image { display: none !important; } } @media (max-width: 480px) { .notion-header__title { font-size: 1.75em !important; } .notion-header__cover.has-cover { height: 200px !important; min-height: 200px !important; max-height: 200px !important; } }

Brand Guide

Making your own static ads or designed posts? This page is the standard. It's the short version of the full brand book — when in doubt, the Brand Companion settles it.

The one-line brief: elite sport meets old-world luxury. Confident, calm, precise. Never clinical, never loud, never try-hard.

The logo

Download the logo package — SVG, PDF and PNG.

Use the primary logo by default. Use a secondary mark only where the primary would be illegible, and the icon alone only at small sizes.

Use the provided colorways only — never recolor, stretch, outline, or add effects or shadows.

Give it room: clear space around the logo of at least the height of the icon.

Never add ® to the wordmark.

Color

Build on the warm neutrals, ink in espresso, and use teal like seasoning — an accent, never a flood.

Colour
Hex
Use it for
Warm White
#F9F6F2
Backgrounds
Linen
#E4E1DC
Panels, dividers, soft contrast
Dark Espresso
#332522
Headlines and body text
Warm Umber
#514441
Secondary text
Dusty Teal
#89A1A3
Accents and small labels — sparingly

Type

Download the fonts

Perfectly Nineties — headlines. The workhorse of the identity.

Apple Garamond — body copy, for contrast under the headline.

Switzer Medium — small labels and captions, all caps, letter-spaced.

Proportion guide, not fixed sizes: if the headline is 100, body is about 36 and the call to action about 24.

The look

Warm, clean, premium. Natural light, real spaces, real product. Generous negative space — one subject, one message per frame.

Use the approved photography rather than mockups: product photos, lifestyle imagery, celebrities photographed in Ra, customer testimonials.

Never: neon-red “biohacker rave” grading, cluttered comparison grids, clinical lab aesthetics, or meme formats with the logo attached.

The words

Serious, not funny. Matter-of-fact, not enthusiastic. Lead with identity and aspiration, never with fear.

For any designed asset that carries our logo:

Say it our way. Circadian eyewear or functional eyewear — not “blue light blocking glasses.” Filtering, never blocking. Well-being, never health.

No numbers in the frame. No percentages, no CRI, no Kelvin, no lumens. Say what the product does, not what it measures.

Supports, designed to, helps promote. Never cure, treat, prevent, heal, or reverse. Never a named condition. Never “clinically proven” or “studies show.”

No fear framing. “Harmful blue light” and “digital damage” don’t appear. Retired for good: “protect your eyes,” “99.9%,” “health-enhancing.”

Never name another brand. Compare to the category, not a competitor.

Disclose. If you earn from it, the ad carries #ad per the Content Guidelines.

What makes a static work

The winners in our account share three things: one message per frame, a proof device or an offer in the headline — not just a pretty picture — and the product legible at thumbnail size. The north star: “Not Sunglasses. Night Lenses.” Category-defining, six words, product front and center.

Made something strong? Send it through Trybe, or to partners@raoptics.com — the best creator statics get paid amplification.
← Back to About Ra Optics