This is Text XL – Facett is a clean skincare brand inspired by natural elements and architectural form. The objective was to develop a brand identity and packaging system that felt both premium and grounded.

Facett is a clean skincare brand inspired by natural elements and architectural form. The objective was to develop a brand identity and packaging system that felt both premium and grounded.

Facett is a clean skincare brand inspired by natural elements and architectural form. The objective was to develop a brand identity and packaging system that felt both premium and grounded.

Facett is a clean skincare brand inspired by natural elements and architectural form. The objective was to develop a brand identity and packaging system that felt both premium and grounded.

Facett is a clean skincare brand inspired by natural elements and architectural form. The objective was to develop a brand identity and packaging system that felt both premium and grounded.

Facett is a clean skincare brand inspired by natural elements and architectural form. The objective was to develop a brand identity and packaging system that felt both premium and grounded.

Facett is a clean skincare brand inspired by natural elements and architectural form. The objective was to develop a brand identity and packaging system that felt both premium and grounded.

Facett is a clean skincare brand inspired by natural elements and architectural form. The objective was to develop a brand identity and packaging system that felt both premium and grounded.

This is Text XL – extra-large text. It’s ideal for hero sections or attention-grabbing headlines. Here’s a bit more dummy copy so it wraps neatly across a couple of lines.

This is Text L – large text. Great for sub-headings or standout paragraphs that need to guide the reader’s eye. A few extra words here to make sure it spills onto a second line.

This is Text M – medium text. It’s the exact same size as default body copy, your standard paragraph size. A little extra filler here to simulate a realistic chunk of content.

This is Text S – small text. Often used for captions, secondary details, or supporting notes. A touch more dummy content here for line-wrapping.

This is Text XS – extra-small text. Perfect for footnotes, meta information, or fine print that shouldn’t dominate the layout. A few more words for balance.

H1 heading in a Rich Text element

Pop some paragraph copy here. Pop some paragraph copy here. Pop some paragraph copy here. Pop some paragraph copy here. Pop some paragraph copy here.

Pop some paragraph copy here. Pop some paragraph copy here. Pop some paragraph copy here. Pop some paragraph copy here. Pop some paragraph copy here.

H2 heading in a Rich Text element

Pop some paragraph copy here. Pop some paragraph copy here. Pop some paragraph copy here. Pop some paragraph copy here. Pop some paragraph copy here.

Key Points

Why Vertical Spacing Matters

• Vertical gaps between paragraphs and headings create readable, structured content

• Space before H2s is bigger than paragraph spacing to signal new sections

• Space before H3s is smaller than H2s to show they’re subheadings within a section

Two Types of Vertical Spacing

• Flex Row Gap – for spacing separate UI elements in layouts (hero headers, cards, etc.)

• Contextual Spacing – for spacing inside Rich Text or Post Content elements (articles)

• Contextual spacing is set once in Theme Styles and you’re done forever

Understanding the “em” Unit

• 1em equals the size of the letter M in the current font

• Em is relative to font size—that’s why H2 margins are bigger than H3 margins

• Must use em (not rem) for contextual spacing to create proper heading hierarchy automatically

Setting It Up

• Theme Styles > Contextual Spacing

• Remove all Bricks’ default margins on elements

• Set top margins: headings (1.5em), paragraphs (1em), fallback (1em)

• Add custom CSS (provided below) to make list items use 0.5em