TN Carousel Design Language

01

Canvas & Format

Dimensions, safe zones, and mandatory elements

4:5

Instagram carousel format. Every slide is 1080 x 1350px portrait orientation, optimized for maximum feed real estate.

Property	Value	Notes
Canvas Size	`1080 x 1350px`	Instagram portrait carousel
Top Padding	`36px`	Space for brand logo
Side Padding	`28-32px`	Slightly wider on cover slides
Bottom Padding	`28px`	Clear of SWIPE button
Brand Logo	Top center	Every slide, no exceptions
SWIPE Button	Bottom-right	Every feature slide (3-7)

The brand logo must appear at top-center on every single slide in the carousel. It uses the Playfair Display wordmark format: TRUFFLE + italic NATION.

02

Color Tokens

The complete TN carousel palette and usage rules

Primary Palette

Wine Dark#5A2339 · Deep bg, hover

Wine#6D2E46 · Primary brand

Wine Light#8B4063 · Gradient mid

Secondary & Accent

Rose#A26769 · Italic accent text

Gold#C4893B · Highlights, labels

Neutrals

Parchment#FAF7F2 · Light bg

Cream#ECE2D0 · Pill bg, cards

Cream Dark#D4C9B5 · Borders

Charcoal#2D2D2D · Body text

Follow the 60-30-10 rule: 60% Parchment/Cream backgrounds, 30% Wine/Rose for headlines and cards, 10% Gold for keyword highlights and CTAs.

      
/* CSS Variables */
--tn-wine: #6D2E46;
--tn-wine-light: #8B4063;
--tn-wine-dark: #5A2339;
--tn-rose: #A26769;
--tn-cream: #ECE2D0;
--tn-cream-dark: #D4C9B5;
--tn-parchment: #FAF7F2;
--tn-gold: #C4893B;
--tn-charcoal: #2D2D2D;
--tn-medium: #555555;
    

03

Typography

Three font families, strict usage hierarchy

Bake Better

Body text at 0.72-0.78rem, weight 400, line-height 1.65. Use 600 weight for emphasis and gold for keyword highlights.

Playfair Display — Headings ▼

Element	Size	Weight	Style
Hero headline	`2.4rem`	800	Normal, color wine-dark
Italic accent word	`2.4rem`	400-600	Italic, color rose
Section title	`1.6rem`	700	Normal
Brand logo	`0.68-0.72rem`	700	Uppercase, 2px tracking

Headlines always use a two-part structure: bold regular weight for the main words + italic lower weight for the accent/emphasis word. Example: "Create recipe cards automatically" where "automatically" is italic rose.

Inter — Body Text ▼

Element	Size	Weight	Color
Body paragraph	`0.72rem`	400	Medium (#555)
Bold keywords	`0.72rem`	600	Charcoal (#2D2D2D)
Gold highlights	`0.72rem`	600	Gold (#C4893B)
Wine highlights	`0.72rem`	600	Wine (#6D2E46)
Section labels	`0.6-0.7rem`	700	Gold, UPPERCASE, 2-3px tracking
Step labels	`0.7rem`	600	Charcoal

Caveat — Handwritten Annotations ▼

Size: 0.72-0.82rem, weight 500
Color: Always rose (#A26769)
Rotation: -2 to -5 degrees for natural feel
Pairing: Always paired with arrow symbol (↗) in same color
Purpose: Editorial personality, pointing to key UI elements

Annotations add the "human" editorial feel that separates premium carousels from generic ones. They should feel spontaneous, like a creative director scribbling notes on a proof.

04

7 Slide Types

Cover, CTA, and 5 feature slide patterns

TRUFFLE NATION

How to use

Claude

for Pastry Brands

Swipe →

1. Cover Hero

TRUFFLE
NATION

"bake"

to learn how to
use Claude for
pastry brands

2. CTA Hook

TRUFFLE NATION

Create
recipe cards
automatically

3. Feature

TRUFFLE NATION

Repurposing
platforms

4. Multi-Visual

TRUFFLE NATION

Aa

Light
Regular
Bold

5. Brand Guide

TRUFFLE NATION

1

Ideating concept

2

Writing Script

3

Creative Direction

6. Steps

TRUFFLE NATION

Concepts

Captions

7. Calendar

Slide 1: Cover Hero — Full Spec ▼

Background: linear-gradient(135deg, wine 0%, wine-light 40%, rose 100%)
Decorative circles: Two radial-gradient pseudo-elements — cream at 12-15% opacity top-right, gold at 12% bottom-left
Layout: Logo top → Hero text center → CTA pill bottom
Hero text: Small line (1.6rem/400) + Big word (4.2rem/800) + Accent line (1.8rem/italic/cream)
CTA pill: Frosted glass — rgba(255,255,255,0.15) + backdrop-filter:blur(8px) + white 20% border

Slide 2: CTA / Hook — Full Spec ▼

Background: Wine-dark solid + subtle radial-gradient(circle, wine-light at 30%, transparent) center glow
Layout: Logo top → Centered body with highlight pill → Footer CTA
Highlight pill: Gold bg, white text, 6px radius, Inter 0.85rem/700
Footer: Small text at 60% white opacity, @handle in gold

Slides 3-7: Feature Slides — Full Spec ▼

All feature slides share these base properties:

Background: Parchment (#FAF7F2)
Headline: Playfair Display, 2.0-2.4rem, weight 800, wine-dark
Accent word: Italic Playfair, weight 400-600, rose color
Body text: Inter, 0.65-0.72rem, weight 400, with gold/wine keyword highlights
SWIPE button: Always bottom-right, white bg, charcoal text, pill shape
Annotations: Caveat font, rose color, slight rotation

Slide 3 (Screenshot) adds a Claude chat UI mockup card. Slide 4 (Multi-Visual) adds floating rotated images with platform badges. Slide 5 (Brand Guide) adds color swatch grid + type specimen. Slide 6 (Steps) adds numbered wine-square steps + doc previews. Slide 7 (Calendar) adds Notion table/calendar mocks + checklist row.

05

Component Library

Reusable elements for building carousel slides

Brand Logo

TRUFFLE NATION

TRUFFLE
NATION

Light bg: wine + gold italic
Dark bg: white + cream italic

Pills & Tags

CTA Pill Keyword Course Carousel Reel

Frosted glass for cover CTA
Gold for keyword highlights
Wine-tinted for content tags

Numbered Steps

1

Step Label Here

2

Another Step

26px wine squares, 6px radius
Inter 0.62rem/800 white number

Checklist Items

Completed Item

Cream bg, 10px radius
Wine check icon, Inter 700

Navigation

SWIPE SWIPE

Bottom-right, every feature slide
White bg default, wine variant

Mockup Cards

White bg, 12px radius
Wine-tinted shadow-md
Subtle 6% wine border

06

Shadows & Effects

All shadows are wine-tinted, never gray

sm

md

lg

xl

Token	Value	Use
`shadow-sm`	`0 2px 8px rgba(109,46,70,0.08)`	Subtle cards, badges
`shadow-md`	`0 4px 20px rgba(109,46,70,0.12)`	Mockup cards, SWIPE button
`shadow-lg`	`0 8px 40px rgba(109,46,70,0.16)`	Floating images, slide container
`shadow-xl`	`0 16px 60px rgba(109,46,70,0.2)`	Hero elements, emphasis

Never use gray shadows (e.g., rgba(0,0,0,0.1)). All shadows must use wine-tinted values: rgba(109,46,70,X). This maintains visual warmth and brand cohesion across all slides.

Additional Effects ▼

Frosted glass: background: rgba(255,255,255,0.15); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.2) — used on cover CTA pills
Decorative gradient circles: radial-gradient(circle, rgba(236,226,208,0.12-0.15) 0%, transparent 70%) — on hero/CTA slides only
Floating image rotation: ±3 degrees via transform: rotate()
Minimum border radius: 6px — no sharp corners ever

07

Absolute Rules

12 non-negotiable rules for every carousel slide

1. NEVER pure white (#FFF) backgrounds — always parchment #FAF7F2

2. NEVER pure black (#000) text — always charcoal #2D2D2D

3. NEVER gray shadows — always wine-tinted rgba(109,46,70,X)

4. NEVER sans-serif headings — Playfair Display only

5. NEVER serif body text — Inter only

6. NEVER sharp corners — minimum 6px border radius

7. ALWAYS brand logo top center on every slide

8. ALWAYS SWIPE button on feature slides (3-7)

9. ALWAYS decorative gradient circles on hero/CTA slides

10. ALWAYS gold for section labels (uppercase + tracking)

11. ALWAYS italic Playfair for the accent/emphasis word in headlines

12. ALWAYS Caveat for handwritten annotations

08

Build Checklist

Verify before publishing any TN carousel

TN CarouselDesign Language

Primary Palette

Secondary & Accent

Neutrals

Brand Logo

Pills & Tags

Numbered Steps

Checklist Items

Navigation

Mockup Cards

TN Carousel
Design Language