Print & Packaging Reference

Roral Brand Guide

Everything you need to design a Roral label, carton, or insert. Every color includes a CMYK approximation and a suggested Pantone match. Both typefaces are free for screen and print use. Request the master logo and sun SVGs from the project owner.

Iconography — the Roral sun

The sun is the secondary mark and the only icon used by the brand. Request the master SVG from the project owner.

Scale check — 16, 24, 32, 48, 64, 96, 128 px

Color palette

The brand is built on warm browns and a cream base, with three accent families: action (red), trust (sage), and highlight (gold — matches the wordmark sun). Screen values are OKLCH; CMYK values target FOGRA39 / SWOP coated stock. For brand-critical accents (highlight gold, action red) request Pantone spot if the budget allows.

Action — warm red / terracotta

Action Primary CTA / urgency --ro-accent-action HEX #B14937 OKLCH 0.55 0.15 28 CMYK 25 / 75 / 75 / 15 ~PMS 7592 C
Action dark Hover / pressed --ro-accent-action-dark HEX #962E20 OKLCH 0.48 0.15 28 CMYK 30 / 85 / 85 / 30 ~PMS 7600 C
Action light Soft variant --ro-accent-action-light HEX #C5705B OKLCH 0.65 0.12 28 CMYK 18 / 60 / 60 / 8 ~PMS 7522 C
Action bg Pale tint / callout --ro-accent-action-bg HEX #F0DCD2 OKLCH 0.92 0.04 28 CMYK 2 / 15 / 15 / 0 ~PMS 7527 C

Trust — sage green

Trust Badges / success / clean-label --ro-accent-trust HEX #6D9D7E OKLCH 0.62 0.08 155 CMYK 55 / 15 / 55 / 10 ~PMS 5635 C
Trust dark Badge text on light --ro-accent-trust-dark HEX #5A8569 OKLCH 0.55 0.08 155 CMYK 60 / 20 / 60 / 20 ~PMS 5625 C
Trust light Borders / dividers --ro-accent-trust-light HEX #93B59E OKLCH 0.72 0.06 155 CMYK 40 / 10 / 40 / 5 ~PMS 5645 C
Trust bg Pale tint / callout --ro-accent-trust-bg HEX #C7E6CF OKLCH 0.90 0.08 155 CMYK 25 / 0 / 25 / 0 ~PMS 559 C

Highlight — warm gold · matches wordmark sun

Highlight Emphasis / golden CTA / sun --ro-accent-highlight HEX #CE9C42 OKLCH 0.70 0.14 68 CMYK 5 / 30 / 80 / 10 ~PMS 142 C · foil option: 871 C metallic gold
Highlight dark Hover / pressed --ro-accent-highlight-dark HEX #B0832F OKLCH 0.62 0.14 68 CMYK 10 / 35 / 85 / 20 ~PMS 7563 C
Highlight light Soft variant --ro-accent-highlight-light HEX #DEBA76 OKLCH 0.80 0.10 68 CMYK 5 / 25 / 60 / 5 ~PMS 7508 C
Highlight bg Pale tint / callout --ro-accent-highlight-bg HEX #ECDDB7 OKLCH 0.92 0.06 68 CMYK 5 / 10 / 35 / 0 ~PMS 7499 C

Text — warm brown palette

Aa
Headline Primary text / brand brown --ro-text-headline OKLCH 0.29 0.025 50 HEX #3B2C24 CMYK 30 / 55 / 65 / 85 ~PMS Black 7 C / 476 C
Aa
Body Body copy · aliased to Headline --ro-text-body OKLCH 0.29 0.025 50 HEX #3B2C24 CMYK 30 / 55 / 65 / 85 ~PMS Black 7 C / 476 C
Aa
Muted Secondary text --ro-text-muted OKLCH 0.58 0.08 42 HEX #92664B CMYK 30 / 55 / 70 / 25
Aa
Light Captions / metadata --ro-text-light OKLCH 0.72 0.09 40 HEX #BC8C6E CMYK 22 / 45 / 55 / 12
Aa
On dark Cream-on-brown reverse --ro-text-on-dark HEX #F4E6D0 CMYK 2 / 8 / 20 / 0

Backgrounds & surfaces

Cream Primary surface --ro-bg-cream HEX #FAF6EB OKLCH 0.98 0.02 80 CMYK 0 / 2 / 8 / 2
Cream alt Section alternation --ro-bg-cream-alt HEX #F8F2E5 OKLCH 0.97 0.025 75 CMYK 0 / 3 / 10 / 3
White Pure white surface --ro-bg-white HEX #FFFFFF CMYK 0 / 0 / 0 / 0
Dark Hero / CTA surface --ro-bg-dark HEX #3B2C24 CMYK 30 / 55 / 65 / 85 ~PMS Black 7 C
Dark deep Deepest surface --ro-bg-dark-deep HEX #2A1F19 CMYK 35 / 60 / 65 / 90 ~PMS Black 6 C

Semantic state colors (UI only)

Error Form errors only --ro-accent-error HEX #B23926 OKLCH 0.55 0.18 25 CMYK 20 / 85 / 85 / 15
Warning Warm orange --ro-accent-warning HEX #D38338 OKLCH 0.68 0.16 55 CMYK 10 / 55 / 80 / 5
Success Alias for trust sage --ro-accent-success HEX #6D9D7E CMYK 55 / 15 / 55 / 10

Typography

Two typefaces. Both are SIL Open Font License — free for digital and print, no licensing fees. Embed and outline in PDF/X output as standard.

Fraunces

Headlines · product names · emphasis

Serif. Warm, slightly editorial. Download from Google Fonts (SIL Open Font License — free for print and digital). Use letter-spacing -0.02em for the tight, branded feel.

Aa
400 regular 400 italic 700 bold 700 bold italic 800 extrabold 900 black

Skin Hydration Shield

Hydrate skin from within

For a radiant glow.

DM Sans

Body · UI · legal · ingredient panels

Geometric sans-serif. Warm, contemporary. Download from Google Fonts (SIL Open Font License — free for print and digital). Standard letter-spacing; uppercase eyebrows use 0.1em tracking.

Aa
400 regular 400 italic 500 medium 600 semibold 700 bold

Three clinically-supported ingredients. One daily capsule.

Hyaluronic acid pulls moisture into the dermis. Rice ceramides reinforce the skin barrier. MSM supports collagen formation. Take two capsules per day with water.

Dietary Supplement · 60 Capsules · Net Wt. 30 g

Pairing rules
  • Fraunces only for headlines, product names, and a single emphasized word in body (use italic).
  • DM Sans for everything else: body, lists, badges, legal, ingredient panels, dosage.
  • Never mix two weights of the same family in a single block of headline text.
  • Uppercase eyebrows: DM Sans 600 with 0.1em tracking, 12–14 px.

Type scale

Nine fixed stops from caption (16 px) to hero (88 px). The four fluid heads (in clamp()) scale smoothly between mobile and desktop. For print labels, treat the px value as the reference size; convert to points at 1 px ≈ 0.75 pt for layout.

  • Hero--ro-text-4xl · 5.5rem / 88 px
  • Page--ro-text-3xl · 4.5rem / 72 px
  • Section--ro-text-2xl · 3rem / 48 px
  • Card heading--ro-text-xl · 2.5rem / 40 px
  • Subhead--ro-text-lg · 2rem / 32 px
  • Lead paragraph--ro-text-md · 1.5rem / 20–24 px
  • Body text--ro-text-base · 1.25rem / 18–20 px
  • Caption / badge--ro-text-sm · 1.125rem / 16–18 px
  • Legal / fine print--ro-text-xs · 1rem / 16 px
  • Minimum rendered text--ro-text-floor · 12 px floor

Spacing scale

8 px base. For print at 100% scale, multiply px × 0.2646 to get mm (e.g. --ro-space-md 24 px ≈ 6.4 mm).

  • --ro-space-2xs0.25rem · 4 px · 1.1 mm
  • --ro-space-xs0.5rem · 8 px · 2.1 mm
  • --ro-space-sm1rem · 16 px · 4.2 mm
  • --ro-space-md1.5rem · 24 px · 6.4 mm
  • --ro-space-lg2.5rem · 40 px · 10.6 mm
  • --ro-space-xl4rem · 64 px · 16.9 mm
  • --ro-space-2xl6rem · 96 px · 25.4 mm

Shape, radius & shadow

Roral's signature is organic, hand-pressed asymmetry — not perfect circles or rounded rectangles. Use the “melted blob” silhouettes below as inspiration for label corners, sticker die-cuts, or carton panels.

Standard radius

sm · 1rem
md · 1.25rem
lg · 1.75rem
pill

Organic blob shapes — the signature

Three size tiers (sm / md / lg), each with three rotational variants (v1 / v2 / v3) for natural-looking repeats. Hover the cards to see the morph — for print, pick a single silhouette per component.

sm v1
sm v2
sm v3
md v1
md v2
md v3
lg v1
lg v2
lg v3

Borders & hard shadow (neobrutalism)

Bordered card 2.5 px brown border, 4 px offset hard shadow
Compact 2 px offset shadow

Signature effects — with print translation

These screen effects make Roral feel hand-pressed. Each has a print equivalent. Choose the print technique that matches the brand budget; combining 2–3 effects per label is plenty.

Roral

Letterpress filter — .is-headline--pressed CSS drop-shadow simulates a hand-pressed type impression.

Print: actual letterpress impression, or blind deboss on the wordmark. If neither is in budget, simulate with a tight inner-shadow at 5% ink under the artwork plate.

Squiggle divider — --ro-squiggle-url Gold-stroked wave used between label sections.

Print: print in the highlight gold (PMS 142 C) as flat ink, or upgrade to a gold metallic foil (PMS 871 / 873) for a premium feel.