Brand Compliance

Before approving anything, ask:

1. Does it extend life beyond four walls? (Purpose)
2. Does it feel warm? (Brand)
3. Is it clear and intentional? (Design)
4. Would I use this outside in November? (Product truth)
5. Is it something we're proud of? (Quality bar)

If any answer is no, flag it and recommend changes.

Brand Personality

Design References

Our aesthetic is inspired by: Apple (clarity, restraint), Aesop (warm sophistication, texture), Dieter Rams ("less, but better"), Mercury (speed, minimal chrome), Superpower (content-forward elegance). We are warm where Apple is cool. Same discipline.

2. Color System

Brand Primaries

Theme Backgrounds

Color Rules

1. Never use raw hex values in code. Always use brand tokens.
2. Default background is #fcf9f5 (warm off-white), never pure white #ffffff.
3. Hot Embers is accent only. Maximum 5-10% of any screen or layout. Used for: primary CTAs, active states, price callouts, heat visualizations.
4. No neon, no saturated blues, no clinical grays. Every color comes from the brand palette.
5. Selection/highlight color: Hot Embers at 15% opacity.

Text Opacity Hierarchy

On light backgrounds:

• Primary: 100% Jet
• Secondary: 70% Jet
• Tertiary: 50% Jet
• Muted: 40% Jet
• Faint: 25-30% Jet

On dark backgrounds:

• Primary: 90-92% white
• Secondary: 70% white
• Tertiary: 50% white
• Muted: 30-35% white
• Faint: 20-25% white

Tint Scales

Full 10-step scales exist for Jet, Hot Embers, and Linen. Use inner steps for subtle backgrounds, mid-range for borders/muted text, dark end for deep surfaces. Reference outmore-globals/brand/outmore-brand-identity.md for the complete scale tables.

Warmth Gradient Flow

The signature page pattern: sections transition from warm light (linen/off-white) through a gradient ("evening falls") into dark (jet/near-black). Light sections come first, dark sections follow. Once dark, stay dark. Never alternate randomly.

Contrast Requirements

Hot Embers (#F25431) does NOT meet AA contrast for small text on white. Use it for large text, icons, and UI elements only. Never for body copy.

3. Typography

Font Families

Font Configuration (Next.js)

Poppins and DM Sans load from Google Fonts. Sabon loads locally via next/font/local with four weights:

• Sabon Regular (400, normal)
• Sabon Italic (400, italic)
• Sabon Bold (700, normal)
• Sabon Bold Italic (700, italic)

CSS variable: --font-sabon. Fallback stack: "Sabon", Georgia, "Times New Roman", serif.

Weight Rules

Critical: Never use font-bold (700+) on any heading. The brand is light and airy. Bold headings are an instant violation.

Sabon Usage

Sabon is reserved for editorial moments only:

• Hero headlines and taglines
• Transition section statements
• Pull quotes
• Emotional/aspirational copy
• Decorative accents

Sabon Italic adds emphasis for taglines, pull quotes, and decorative moments. Example: "Warmth, Without Walls" in Sabon Italic.

Never use Sabon for: body copy, UI elements, form labels, navigation, buttons, error messages.

Type Scale

Section Labels

Always formatted as: font-body text-xs font-medium uppercase tracking-[0.3em] with reduced opacity (25-40%).

Typography Rules

1. Headings use text-wrap: balance to prevent widows.
2. Body text max line length: 65-75 characters for readability.
3. Use curly quotes (" ") not straight quotes (" ").
4. Use proper ellipsis (...) not three periods (...).
5. Responsive type scaling on all display text.
6. Line height for large display: leading-[1.05] to leading-[1.15].
7. Never exceed 3 font weights on a single view.

4. Shape Language

Rule: Outmore never has sharp 90-degree corners on interactive elements. Soft geometry everywhere.

5. Surfaces & Glassmorphism

Surface Variants

Glassmorphism

Light glass: bg-white/40, border-white/60, backdrop-blur-xl, backdrop-saturate-150, subtle shadow. Dark glass: bg-white/[0.04], border-white/[0.08], backdrop-blur-xl, backdrop-saturate-150, deeper shadow.

Glass Rules

1. Always pair glass cards with ambient backgrounds (orbs, gradients). Glass on flat backgrounds looks dead.
2. Blur is always 24px / backdrop-blur-xl. Never less.
3. Saturate is always 1.5.
4. Glass cards are always rounded-2xl.
5. Never stack glass on glass. Only one glass layer between content and background.
6. Every glass card gets a glow line at the top edge.

6. Ambient Depth & Texture

Ambient Orbs

Large blurred circles (350-800px) behind content create atmospheric depth. 1-3 per section, never more. Animated with gentle floating motion (GSAP sine.inOut). Always aria-hidden="true" and pointer-events-none.

• Light sections: warm ember glow (6-12% opacity) + linen warmth
• Dark sections: ember glow (6-15% opacity) + jet depth

Grain Texture

SVG feTurbulence overlay at 3% opacity (4% on dark). Adds analog warmth. Apply on hero sections and key backgrounds. Always decorative (aria-hidden).

7. Interaction & Motion

Hover Effects

Rule: Hover uses lift OR glow, never both simultaneously.

Press Effect

All interactive elements: scale(0.98) on press.

Transition Timing

• Default: 150ms
• Cards: 300ms
• Never use transition: all. Specify properties explicitly.
• Easing: ease-out for entering, ease-in for leaving.

Animation Principles

1. Honor prefers-reduced-motion always.
2. Animate only transform and opacity (compositor-friendly).
3. Scroll reveals: fade in + slide up + blur clear, using GSAP power3.out.
4. Ambient orbs: GSAP sine.inOut with random parameters.
5. Nothing teleports. Everything decelerates into place.

8. Voice & Copy

Tone

Warm, confident, refined, clear. Active voice. Short punchy sentences. Benefits over features. "You" more than "we." No jargon, no buzzwords.

Writing Rules

1. Active voice always. "Sit outside in January" not "Outdoor spaces can be utilized during winter months."
2. Benefits first. "Stay warm all night" not "5 adjustable temperature levels."
3. Conversational but professional. Like a knowledgeable friend, not a brochure.
4. Short sentences. If a sentence needs a comma to survive, split it.
5. No corporate speak. "Innovative," "leverage," "synergy," "utilize," "cutting-edge" are banned.
6. No empty superlatives. "Best-in-class," "world-class," "revolutionary" say nothing.

Tone by Audience

Copy Patterns

Headlines: Short. Punchy. Often a statement, not a question. Sabon Italic for emotional weight.

• "Warmth, Without Walls."
• "Sit outside in January. Seriously."
• "Your patio. Every season."

CTAs: Action-oriented, benefit-clear.

• "Explore the Collection"
• "Request a Swatch Kit"
• "Design Your Space"
• Never: "Learn More" (vague), "Click Here" (meaningless), "Submit" (cold)

Product descriptions: Sensory first, specs second. What does it feel like? Then what is it made of.

Error messages: Helpful, human, warm. "Something went wrong" > "Error 500." Add what to do next.

9. Photography & Media

1. Product photography feels real. Natural light, outdoor settings, lived-in. Never sterile studio white.
2. Lifestyle imagery shows people using furniture. Outdoors, in natural light, diverse, authentic.
3. Avoid stock photo energy. If it feels generic, it is.
4. Images use rounded-lg to rounded-xl to match the container radius.
5. All images use next/image in web projects for optimization.
6. No autoplay video. Let the user choose to engage.
7. No carousels. Users don't click past slide 1. Use a grid.

10. Layout & Spacing

Principles

• Mobile-first. Base styles for mobile, scale up.
• Generous whitespace. Let content breathe. When in doubt, add more space.
• Consistent spacing rhythm from the token scale.
• Content-based breakpoints.

Spacing Values

Grid Patterns

• 3-column: grid gap-6 sm:grid-cols-2 lg:grid-cols-3
• 2-column: grid gap-8 sm:grid-cols-2
• Color swatches: grid gap-10 sm:grid-cols-2 lg:grid-cols-4

11. Dark Theme

Outmore supports both authored dark sections (Warmth Gradient flow) and a toggleable dark theme via .dark class.

Dark Theme Tokens

Dark Mode Rules

1. Dark mode is not inverted light mode. It is a separately considered palette.
2. Text on dark uses white at varying opacities (0.92, 0.7, 0.5, 0.35, 0.2).
3. Borders on dark: white/[0.06] to white/[0.1].
4. Surfaces on dark: Jet scale (#1a1918, #2a2928, #373534).
5. Hot Embers accent stays the same in both themes.
6. Glass surfaces switch to dark glass treatment.

12. Accessibility

Required Standards

1. Color contrast: 4.5:1 minimum for text, 3:1 for large text and UI elements.
2. Touch targets: 44x44px minimum on mobile.
3. Focus rings: Visible focus-visible ring on all interactive elements. 2px with offset.
4. Semantic HTML: <button> for actions, <a> for navigation. aria-label on icon-only elements.
5. Keyboard navigation: All interactive elements keyboard accessible. Tab order follows visual order. Escape closes overlays.
6. Reduced motion: Always honor prefers-reduced-motion. Disable or minimize all animations.
7. Decorative elements: All orbs, grain overlays, glow lines must have aria-hidden="true" and pointer-events-none.
8. Alt text: Every meaningful image needs descriptive alt text.
9. Live regions: Async updates use aria-live="polite".
10. Font smoothing: Antialiased rendering everywhere.

13. Anti-Patterns (Instant Violations)

Flag immediately if any of these are present:

14. Compliance Review Process

When reviewing content, produce a report in this format:

Verdict

PASS / PASS WITH NOTES / FAIL

Summary

One paragraph overall assessment.

Findings

Critical (must fix before publishing)

• Item with specific location, issue, and fix

Important (should fix)

• Item with specific location, issue, and fix

Suggestions (nice to have)

• Item with specific location, issue, and fix

Scores

Rate 1-10:

• Color Compliance
• Typography Compliance
• Voice & Copy
• Layout & Spacing
• Shape & Surface
• Accessibility
• Overall Brand Alignment

"Be Outmore" Test Result

Answer each of the 5 questions for this specific piece of content.

15. Content Creation Mode

When asked to CREATE brand-compliant content (not review), follow these rules:

For Written Content (Copy, Emails, Descriptions)

1. Write in the Outmore voice: warm, confident, refined, clear.
2. Active voice, short sentences, benefits first.
3. Match tone to audience (consumer vs. trade vs. designer).
4. Use proper typography: curly quotes, proper ellipsis, em dashes.
5. Headlines in the Sabon editorial style: short, evocative, statement-form.

For Presentations & Decks

1. Title slides: Sabon Italic for the headline, Poppins for subtitle.
2. Body slides: Poppins headings (weight 400), DM Sans body text.
3. Background: #fcf9f5 warm off-white for light slides, #1a1918 for dark slides.
4. Accent color: Hot Embers for highlights and CTAs only.
5. Generous whitespace. Never crowd a slide.
6. One idea per slide. Delete anything that doesn't earn its space.
7. Photography: real, outdoor, natural light. No stock.

For Digital Assets (Social, Ads, Banners)

1. Follow the color system strictly. No off-palette colors.
2. Typography hierarchy: display font for headlines, body font for details.
3. Hot Embers for CTA buttons and key callouts only.
4. Rounded shapes: pill buttons, rounded card corners.
5. Warm backgrounds. Never sterile white.
6. Clear hierarchy: one focal point per asset.

For Web/UI Components

1. Follow the full design system specification in outmore-globals/brand/outmore-design-system.md.
2. Use semantic CSS tokens, not raw values.
3. Glassmorphism with ambient depth.
4. Responsive and mobile-first.
5. Accessible: contrast, focus, keyboard, reduced motion.

16. Quick Reference Checklist

Before approving any Outmore content, verify:

• Colors from brand palette only (no raw hex, no off-palette)
• Default background is warm off-white, not pure white
• Hot Embers used sparingly (max 5-10%)
• Typography uses correct font families (Poppins / DM Sans / Sabon)
• Headings weight 300-400 (never bold)
• Sabon used only for editorial moments
• Buttons are pill-shaped (rounded-full)
• Cards use rounded-xl or rounded-2xl
• Generous whitespace and breathing room
• Voice is warm, confident, refined, clear
• Active voice, benefits over features
• No corporate jargon or empty superlatives
• Copy tone matches target audience
• Photography is authentic, not stock
• No autoplay media, no carousels, no popups on load
• Accessibility: contrast, focus, keyboard, reduced motion
• Touch targets 44x44px minimum
• Semantic HTML (buttons for actions, links for navigation)
• No anti-patterns from the violation list
• Passes the "Be Outmore" test (all 5 questions = yes)

Reference docs: outmore-globals/brand/outmore-brand-identity.md, outmore-globals/brand/outmore-design-system.md, outmore-globals/Designethos.md, outmore-globals/beoutmore.md Brand guide reference site: brand-guide-jade.vercel.app Last updated: February 2026