/* ═══════════════════════════════════════════ 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: color, type, logo, layout and the words.

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

Color

Five colors, and there is no sixth. Tints are fine.

Warm White · #F9F6F2 · Backgrounds

Linen · #E4E1DC · Panels and image areas

Dark Espresso · #332522 · Type, or the dark background

Warm Umber · #514441 · Secondary type

Dusty Teal · #89A1A3 · Accents only

  • Pick one background: Warm White or Dark Espresso. Never both in one piece, never pure white or pure black.
  • Ink in Espresso, with Warm Umber for secondary lines.
  • Teal is seasoning: a hairline, a small mark. Never a background, a headline, or text on Warm White.

Type

Ra Optics · Sunset Lenses

Made for the hours after dark.

Sunset filters the light that tells your brain it's still daytime, so your evening can feel like evening.

Shop Sunset →

  • Perfectly Nineties for headlines. Italic for the turn. Never all caps.
  • Apple Garamond for body copy.
  • Switzer Medium, all caps, as an accent: kickers and calls to action.
  • A ratio, not fixed sizes: headline 100 · body 36 · call to action 24.
  • No fonts on hand? The card above uses free stand-ins: Instrument Serif, EB Garamond and Inter.

Logo

image
image
  • Primary logo by default. The secondary where the primary would be illegible, or where it suits the layout better. The icon is for social avatars, products and packaging.
  • Use the files as supplied. Never recolor, stretch, outline, or add effects or shadows. Never add ® to the wordmark.
  • In a static, the logo sits bottom right, opposite the call to action, at about a tenth of the canvas height.

Download the logos →

Layout

Six zones, top to bottom. One dominant element per frame, and text under a fifth of the canvas.

  1. Kicker, in small spaced capitals
  2. Headline, two to four lines
  3. The hero: product or photo
  4. A teal hairline, about a third of the width
  5. One body sentence
  6. Call to action on the left, logo on the right
  • Over photos, set type on a soft Dark Espresso gradient, never a flat box.
  • Leave room: about 64 px of margin on a 4:5 post, 96 px on a story.
  • The offer never opens the ad. It sits in a band in the lower third.

The look

Warm, never cold or clinical. Grain and film warmth, real people, candid moments.

  • Product shots on Warm White or Dark Espresso, never studio white.
  • Showing the tints? Same scene, same angle, each lens.
  • Never: neon-red "biohacker rave" grading, glows or digital gradients, cluttered comparison grids, lab aesthetics, or memes with the logo on them.

Product photos → Lifestyle imagery → Photographed in Ra → Customer reviews →

The words

  • Say it our way. Circadian eyewear or functional eyewear, never "blue light blocking glasses." Filtering, never blocking. Well-being, never health.
  • Name the lenses right. Daylight, Sunset and BlueSync, always capitalized. Frames read Style then Lens: "Maxwell Sunset," never "Maxwell in Sunset."
  • No numbers in the frame. No percentages, CRI, Kelvin or lumens. Say what it does, not what it measures.
  • Supports, designed to, helps promote. Never cure, treat, prevent, heal or reverse. Never a named condition, "clinically proven" or "studies show."
  • Lead with the positive. Identity and aspiration first, never sickness or fear. "Harmful blue light," "digital damage," "protect your eyes," "99.9%" and "health-enhancing" are retired for good.
  • Never name another brand. Reframe to what makes Ra unique.
  • Disclose. If you earn from it, the post says so, per the Content Guidelines.

What makes a static work

One message per frame. One proof in the headline: a result, a reason, a feeling, never the price. The product legible at thumbnail size.

Made something strong? Send it through Trybe, or to partners@raoptics.com. The best creator statics get paid amplification.

← Back to About Ra Optics