White base

Every page opens on white. No page opens dark. Dark blocks are for emphasis - use sparingly.

Emphasis

One word or phrase in Sky 600. No script type, no gradient type.

Type

Instrument Sans only. Titles in black (#000000). Phase hues may color a numeral, never a title.

Illustrations

Conceptual illustrations explain an idea; the home page is mostly these. Product mock-ups show the product; platform pages are mostly these. Both share the same radius, shadow and line icons. No photography.

Surfaces

A product mock-up sits in an illustration container: the light gray app surface (bg-app-main, the background the real app uses) with one of the GlowPanel gradients rising from its bottom edge. Never a bare gray box, and never on white. A conceptual illustration or a content card sits on white, so it reads as an idea.

3D is for the hero only

The hero video is the one cinematic moment on the site. Everything below the fold is flat. Do not make the sections match the hero.

Nav, buttons, footer

White nav with Sky pill buttons. Sky primary and outlined secondary buttons. Dark footer band with one call to action. Do not restyle.

Eyebrows

No small uppercase label above a heading. The heading carries the message on its own. Small uppercase labels belong only inside product mock-ups, where they are interface text.

One primary per view

A screen has one main action. Everything else is outlined. Two primaries side by side compete.

Pairs

When two buttons sit together, the primary goes first and the outlined second: Book Demo, then Get Started or How It Works.

Inside a card

When the whole card is the link, the call to action is a small sky text link with an arrow, not a button. The card is the click target; on hover the link turns purple and the arrow nudges right.

Labels

Verb first: Book Demo, Explore Connected Phones, Get Started. Title case. No period. No arrow. Keep them under four words where you can.

Tiles

Square, white, soft shadow. A line icon in a slate ring and a short label of one to three words. The selected tile carries the brand gradient on its border, ring and icon, with a faint glow along its bottom edge. Idle tiles fade the border in at half strength on hover.

Panel

A heading, one to three short paragraphs, then optional pills or an illustration. The old content fades out before the new fades in. Nothing in the panel repeats the tile label as a sentence.

Count

Three to six tiles. A short last row sits centred. Four or five tiles fit one row between lg and xl.

Component

TileSelector with an items array of label, icon, title, paragraphs, pills and illustration. Pass heading-tag="h2" when the panel title heads the page section.

Cards

Same anatomy as a tile, laid out as a card: icon ring, title, one line of copy, and an optional demo below. Equal heights; set the track and card heights on the carousel so the fan has room.

Selection

The front card is the selected one and carries the full gradient. The rest fade to half and sit behind. Dots below the fan mark the position; a click on a card or a dot brings it to the front.

When

Six or more equal items that a reader scans. Fewer than six, use the tile selector or a plain grid. Never for the main message of a page.

Component

CardCarousel with a card slot that renders CarouselCard. Bind v-model:active to drive the front card from a demo inside it.

Anatomy

Icon ring, title, one line of copy, arrow link. The copy is one sentence. The link label is the page name, nothing more: Connected Phones. It must fit on one line.

Row

Two or three cards in one row, equal heights, the link pinned to the foot. Never more than three; a longer list is a tile selector.

Click target

The whole card is the link. The arrow link at the foot is a label, not a second link, so it is a span.

Component

LinkCard with to, icon, title, description and cta. Pass an item with v-bind.

Shared DNA

Both kinds use the same line icons, the same radius and the same shadow where a shadow applies. The gradient is the brand gradient, sky to blue to purple to fuchsia, never another ramp.

Data in mock-ups

Names, numbers and dates are plausible and consistent across the site: Jim Crouse, CoreID M-1234, Austin TX. Mark an invented metric as an example. Never a real customer.

Motion

Slow and purposeful: a reveal, a dot along a line, a status pill that updates, a loop that repeats every few seconds. Nothing bounces. Everything respects reduced motion.

Never

No photography, no stock imagery, no 3D outside the hero, no screenshots of the real app in place of a mock-up.

One set per row

Icons that sit together share a set and a weight. Never a Thin glyph beside a Regular one, never Phosphor beside Material in the same row.

Stroke, not fill

Every icon is an outline. The only filled icons are status marks inside a mock-up: a green check, a red alert.

Color

Feature glyphs are Slate 400 at rest and the brand gradient when selected. Mock-up icons are Sky 600 on a Sky 100 disc.

Audience

Agencies first, brands second. Phones are sold through the agency. The agency angle is 'the agency that can prove it'.

Vertical

Headlines are industry neutral. Examples and visuals are automotive. In automotive CloudOne works with dealers and dealer groups, not OEMs.

Phones fit

Connected Phones works as the customer's phone system or alongside it. Keep copy neutral on which. No rip-and-replace applies to CRM, DMS, data and providers.

Sentences

Short sentences. One idea per section. One kicker line per section at most.

Order

Outcome first, product name second. No feature list on the home page. At most four product names on it.

Links

Every claim leads to a page that proves it.