Styleguide

Tokens, typography voices, the Section wrapper and building blocks.

Body text: Source Sans 3 Regular 17px, Charcoal, line-height 1.6. This paragraph should read comfortably at around 70 characters per line inside the content container.

Orange bold emphasis - a phrase, never a full sentence. Steel Blue semibold - the second voice, used for sub-heads.

EXPERIMENT - section padding

This band uses lg (48px) top & bottom

This band uses xl (80px) top & bottom

Compare the breathing room above and below with the lg band.

Cards - light section (filled tiles)

Watch the pulse

Live from the data already in Business Central.

Learn what's normal

Your shopfloor’s baseline - not a generic one.

Flag what drifts

Quietly - only when it matters.

Cards - subtle section (white cards)

One system

Same grammar, the fill flips with the section.

Calm by default

The border defines the tile - no shadow.

Consistent

10px radius, Steel-Blue badge everywhere.
Coming soon

Tag above a headline

bg-subtlesteel blueorangecharcoalchart-sky

Slim divider - narrow / centered

Two blocks, same background

Block A sits on a subtle section. The pulse line below separates it from Block B (also subtle) - without a divider the two would merge into one flat area.

Block B

Same subtle background. The pulse line is the structural separator (Branding doc 3.2).

Real-time execution intelligence for your shopfloor

See the signal in the noise - the moment it happens, not in next week's report.

Book a demo See how it works
Placeholder illustration - shopfloor photo pending

Section Headline block - centered

The Text block runs through markdownify, so content authors can use bold, links and lists. It caps line length at a comfortable measure and can be left, center or right aligned.

Headline (H3), Image and Text - image right

Two columns, headline spanning the element. Fixed gaps per doc 04: sm under the headline, lg between columns. Stacks text-first on mobile.
Placeholder illustration
Same block without a headline = the plain Image and Text entry from the doc. Here with image left and a 40/60 split.
Placeholder illustration

Logo Band - grayscale, color on hover

Placeholder partner
Placeholder partner
Placeholder partner
Placeholder partner
Placeholder partner
Full width variant - no side gaps. The price section pattern: a short pitch, then one centered CTA md below.
Start now
Medium gap variant - md side gaps left and right.
Learn more
Large gap variant - xl side gaps.
Get the guide

3 Columns Image Band with CTA

Short benefit statement that explains one tangible outcome.
Placeholder
Short benefit statement that explains one tangible outcome.
Placeholder
Short benefit statement that explains one tangible outcome.
Placeholder
See all benefits

Flex Grid: Image above Text (team pattern)

Portrait placeholder
Jane Doe - Co-founder. One line about the person.
Portrait placeholder
Jane Doe - Co-founder. One line about the person.
Portrait placeholder
Jane Doe - Co-founder. One line about the person.

2 columns, expandable content

How does the pilot work?

Collapsed by default, opens on click. Native details element - no JavaScript, keyboard accessible.

Which BC versions are supported?

Placeholder answer text.

What data does SPC read?

Placeholder answer text.

How long does onboarding take?

Placeholder answer text.
Book a demo

Ready to see your shopfloor pulse?

Closing banner: charcoal token background (background image + overlay supported when real photography lands), everything centered, sm gaps.
Get started

Type scale

H1 - Transformational claim

H2 - Section headline

H3 - Card / feature headline

Subhead - Steel Blue Semibold

Body - Regular 17px Charcoal

Caption - 14px secondary

Dark section

On Charcoal, headings flip to white automatically. Body inherits the on-dark color from the section wrapper.

Steel Blue subhead stays as-is on dark.

Primary CTA Secondary on dark

Colors

brand-primary
brand-dark
brand-accent
bg-subtle
text-secondary

Spacing scale

Bars: xs 8 / sm 16 / md 24 / lg 48 / xl 80 px