Design system · Spacing v3.2
One rhythm for every page
Every section on siena.cx sits the same distance from the next one. This guide shows how that space is built, which side of a boundary carries it, and which spaces are part of the design.
Each example below is a real section copied from a live page, with its padding drawn on top. Blue is a section’s top padding, pink its bottom padding, green the total at a seam.
Between sections
160 / 128 / 112
Desktop / Tablet / Phone
Section padding, each edge
80 / 64 / 56
Each section carries half
Heading → content
72 / 56 / 40
Inside a section
Dark band, inside
96 / 80 / 56
Enterprise block
Rule 1 & 2
The same space between every section
Every seam adds up to the same total: 160 on desktop, 128 on tablet, 112 on phone. Each section carries half of it, so two neighbours meet at one full gap and a section can move anywhere on the page without breaking the rhythm.
automated actions
Act on what matters
Set a threshold on any criterion. Siena sends a Slack alert, tags the ticket, and attaches the full reasoning.
Slack notifications
Low compliance score? Your team gets alerted right away.
Help desk tasks
Flagged conversations appear in your team's queue automatically.
Internal notes
Score and reasoning on every ticket. No digging required.
Ask Siena anything
Turn your quality data into answers
Every score flows into Ask Siena. Ask in plain language, get an answer in seconds, backed by the actual conversation.
product feedback
Has there been any change in sentiment to any product?
Agent coaching
What pattern is driving low scores for my agents?
retention
What are the reasons for cancellations from last week?
subscription
How many customers are doing skips and for how long?
Overall CXP score is 98.7% this week – down from 99% last week
The return policy page appears to be causing friction across multiple conversations.
Resolution rate
•
91.2%
Customer effort
•
4.4
Compliance
•
95%
Rule 3
Measure what you see
Double spacing happens when padding stacks: a section’s padding, plus padding on the block inside it, plus a gap on the container that holds the sections. Each number looks fine in the properties panel. Together they leave a hole.
Here the heading floats over the card gallery. The panel shows the section’s padding (184) plus the gallery’s own 16, but the first thing you read is the heading, pinned 160 from the top. The logo row above has no padding, so this edge carries the full gap. Measure to the heading.
Blue = space to the first thing you read · pink = bottom padding
Know exactly where quality breaks down
Rule 4
Read the background before you split the gap
When the background changes with a hard edge, the edge does the separating. Here a white section meets the dark Enterprise band: the white side keeps its 80 below its content, and the dark band keeps its own 96 inside.
When both sides share a background they read as one area, so their combined space is the target. White fills count as the page; the real bands are cream (Siena 50) and dark (Siena 900).
Enterprise-grade safety
Trusted by some of the fastest-growing ecommerce and retail companies, Siena meets the highest enterprise standards with guardrails and granular controls that keep every interaction on brand and on policy.
Compliances
Certified against SOC 2, GDPR, CPRA, and HIPAA standards.
AI guardrails
System-level and configurable boundaries on tone, topics, and actions.
SSO, roles, logs
SAML SSO, granular permissions, and a full trail of every action.
Dedicated support & SLA
A named success manager, hands-on onboarding, and an uptime SLA.
hard edge · each side keeps its own
Rule 4 · Fades
A fade counts as space
Many sections blend into the next one with a gradient instead of a hard edge. The fade sits inside the gap: it never adds space, and nothing is added to make room for it. The two sections read as one area, so their padding adds up to the target.
When the fade is its own strip between two sections, the strip is the whole gap: it’s sized to 160 / 128 / 112, and the sections on either side drop their facing padding to 0.
Your partner in understanding customers
From signal to decision
Customer intelligence turns what your customers are already telling you into a decision you can make today.
Signals surface the same day they emerge, ready to act on
Every insight is backed by the real conversations behind it
Teams move from noticing to deciding in the same sitting
What's trending well this week?
What do customers love about our products?
What's driving repeat orders?
Ask Siena
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 24 12 C 24 18.627 18.627 24 12 24 C 5.373 24 0 18.627 0 12 C 0 5.373 5.373 0 12 0 C 18.627 0 24 5.373 24 12 Z M 7.254 12.254 C 7.254 15.015 9.493 17.254 12.254 17.254 C 15.016 17.254 17.254 15.015 17.254 12.254 C 17.254 9.493 15.016 7.254 12.254 7.254 C 9.493 7.254 7.254 9.493 7.254 12.254 Z" fill="rgb(255, 93, 78)" height="24px" id="QpwtL19X5" width="24px"/></svg>)
"Generally, that would have taken me several hours. With Siena Intelligence, it only took 10 minutes."
Rebecca Blount
DIRECTOR OF CX · COTERIE
Playbooks
Your recurring reports: built, scheduled, and delivered to your inboxes and Slack channels, by Ask Siena.
"Generally, that would have taken me several hours. With Siena Intelligence, it only took 10 minutes."
Rebecca Blount
DIRECTOR OF CX · COTERIE
"Generally, that would have taken me several hours. With Siena Intelligence, it only took 10 minutes."
Rebecca Blount
DIRECTOR OF CX · COTERIE
"Generally, that would have taken me several hours. With Siena Intelligence, it only took 10 minutes."
Rebecca Blount
DIRECTOR OF CX · COTERIE
Rule 5
Strips borrow the gap
Logo rows and tickers have no padding of their own. Something still has to hold the space, so the section next to the strip carries the full gap on that edge.
A section that ends in a padded coloured card isn’t a strip: its card edge works like a band edge, and the neighbour carries half.
Order logistics intelligence
Your Agent's direct line to carriers
When customers ask about their order, Siena pulls current tracking data and delivers clear, accurate updates in seconds.
Direct access to 2,000+ carriers
Real-time status with full delivery context
Eliminate tracking errors
full gap · the ticker has no padding
Rule 6
Zero means attached
Some sections are one idea split into two frames, like this title above its row of cards. The title has no bottom padding on purpose. The only space between them is the cards’ own top padding (36 on desktop), so the pair reads as one block.
Leave the zero alone. The rhythm applies above and below the pair, never between its two halves.
The intelligence layer for commerce
The commerce agent CX teams prefer
Frees your team from ticket firefighting to focus on strategic work
Handles complex customer needs in your brand's authentic voice
Absorbs growing customer volume with your existing team
Attached to the title · not a section seam
Rule 7
Inside a section: side padding and the heading gap
Two numbers frame everything inside a section. Side padding keeps content off the edges: 96 on desktop, 40 on tablet, 24 on phone. The heading sits closer to its content than to the section above: 72, 56, 40.
That difference in distance is what tells a reader which things belong together. Cards and blocks inside a section use their own, smaller padding.
The complete agentic commerce platform
With Siena, you can create specialized AI agents for any industry. Train them with your product knowledge, brand voice, and expertise–then deploy skilled product experts that work 24/7 across the top Shopify categories
On-demand expertise
Access specialist-level guidance instantly—no recruiting, no ramp-up.
Compund learning
Every conversation sharpens the model, and your agent becomes smarter.
24/7 expert availability
Always on, always helpful—no shifts, breaks, or out-of-office.
Consistent quality and brand tone
Same high-caliber advice every time, no matter the volume.
Rule 8
Some space is design
The dark Enterprise band keeps its own padding (96 / 80 / 56). The CTA below it is never resized.
Grey zones are hands off
Enterprise-grade safety
Trusted by some of the fastest-growing ecommerce and retail companies, Siena meets the highest enterprise standards with guardrails and granular controls that keep every interaction on brand and on policy.
AI & brand-safety guardrails
Follower thresholds, sensitive-topic rules, and approval gates keep every reply on-policy.
SSO, roles, audit logs
SAML SSO, granular permissions, and a full trail of every action your team and the agent take.
SOC 2 Type II compliant
Your data and your customers' data handled to enterprise security and privacy standards.
Dedicated support & SLA
A named success manager, hands-on onboarding, and priority response with an uptime SLA.
Rule 8 · Scroll stories
Scroll stories are one screen per step
Some sections tell a story as you scroll: each step is one screen tall, and a sticky panel and chip nav follow along. The empty space inside a step is what lets the next step take over the screen, so it isn’t spacing, and the spacing rule doesn’t apply inside.
To adopt it: the section’s outer edges follow the rhythm like any other section. Every step stays one screen tall, never auto. On very large monitors, cap steps at about 900px (proposal). When you copy a scroll story to another page, point its chip nav at the copied steps.
The CX platform built for agents
AI agents that run support, shopping, social, QA, and VoC
One system to consolidate your full CX stack
Designed for AI from day one. Platform agnostic
Brand intelligence that unlocks growth at scale
Turn customer interactions into strategic business insights
Activate intelligence across teams to drive revenue and retention
Delight customers by anticipating needs better than anyone else
Your brand voice unified across all channels
AI Personas built on your tone, voice, and customer language
Channel-specific design that holds together as one brand
Every interaction reinforces what makes your brand yours
Reference
All the rules
The siena-spacing skill applies these on a Framer branch, checks every seam against the target, and reports what it kept and why. Never on main.
Rule
1 · Space between sections
2 · Section padding, each edge
3 · Container gap
3 · Inner padding on the edge
4 · Same background
4 · Colour edge
4 · Fade between sections
4 · Gradient strip
5 · Next to a strip
6 · Attached pairs
7 · Side padding
7 · Heading → content
4 · Dark band, inside
8 · Closing CTA top
8 · Scroll stories
8 · Heroes
