Atlas DS Colors Type Grid Components Patterns
Atlas · Patterns

Page-scale moves, shown doing their jobs.

Compositions built from the components: section chrome, three hero frames, the swiss scrolly, and a half-page mock that shows the patterns in context. Colors, type, and grid each have their own chapter.

Composition In context v2026.07
01 / Chrome Headers & breaks

Section headers and breaks set the reading rhythm.

A two-column header (numbered rail + title + lede) opens each section. Between sections, choose a rule, an accent gradient, a dotted line, or ticks to control how hard the cut feels.

03 / Approach Method

From a broken intake to one legible decision system.

A numbered rail anchors the chapter; the title carries the claim; the lede sets up the evidence that follows.

Break weights — hard to soft
02 / Hero Cover composition

Three hero compositions: cinematic, split, editorial.

One component composes photo, brand wash, grain, and caption. Swap the modifier to change the frame. (Photos shown as placeholders.)

hero-fig--cinematic

21:9. The establishing shot.

hero-fig--split

Half panel,
half photo.

For heroes that need a paragraph.

hero-fig--editorial

Centered. Formal.

03 / Scrolly Swiss editorial

The swiss scrolly: hard structure, moving argument.

Steps scroll on the right; the stage answers on the left with flat planes, hairline column rules, and a ledger of actors. One restrained tint drifts behind the structure — the only atmosphere allowed. Scroll to drive it.

Actors · IoT Connectivity 01 / 04
01

Sales

Incomplete context
02

Pricing

Hidden exceptions
03

Legal

Late risk
04

Activation

Handoff state

CAPEach scroll step activates the actor whose uncertainty drives the next design constraint.

Actor 01 · Sales

Sales needed context capture without becoming systems experts.

The nine-section intake turns tribal knowledge into a guided path: every question the deal needs, none it doesn't, and derived answers wherever the system already knows.

Actor 02 · Pricing

Pricing needed exception signals earlier.

Non-catalog needs become structured exceptions at intake time — typed, owned, and visible to the pricing desk before the quote exists.

Actor 03 · Legal

Legal needed constraints, not reconstructed history.

Every clause traces to the intake section and pricing component that produced it, so review starts from state instead of archaeology.

Actor 04 · Activation

Activation needed clean handoff state.

The signed quote drops into provisioning as typed order lines with lineage intact — SIMs activate against the same record the seller started.

04 / In context Half-page mock

The patterns assembled as a real case study would use them.

A half-page mock balancing hero, description, evidence, tradeoffs, and metrics — so each pattern is shown doing its job, not floating in isolation.

index.html / case · IoT connectivity
Hero · cinematic
01 · Featured — current

T-Mobile — IoT Connectivity.

The decision system behind every enterprise IoT deal.

Description + photo

The problem

Every enterprise IoT deal ran through a Salesforce dual-list-picker. Account executives rebuilt the same nine-section intake by hand, pricing approvals stalled in email, and contracting inherited whatever survived. We rebuilt the path into one legible decision system — intake, custom and special pricing, and contracting on a single spine.

Before · Salesforce intake
Outcome metrics
Intake time−71%Median time to a complete, priced intake.
Handoff rework−58%Fewer round-trips between AE, pricing, and legal.
AE CSAT4.6Out of 5, post-launch pilot (n=42).
Teams on the spine5Sales, pricing, deal desk, legal, ops.
Evidence
01 The intake was the bottleneck, not pricing. Shadowing 9 AEs showed 70% of cycle time spent assembling context before pricing ever began.
02 Approvals stalled because state was invisible. Deals sat in inboxes; no one could see whose turn it was. Making state inspectable cut idle time sharply.
03 One spec held across five teams. A shared intake model let downstream teams consume the same record instead of re-keying it.
Tradeoffs
Keptin scope
  • +Inspectable state on every record, end to end.
  • +One intake model shared by all five teams.
  • +Guided pricing with guardrails, not free text.
Cutdeferred
  • Full CPQ replacement — too large for the window.
  • Automated approvals — kept a human in the loop.
  • Net-new contracting UI — reused the existing surface.