Calm white field, one purple for action.
The Yuma AI design system, read from yuma.ai by Kamply — colours, type and voice, learned from the public site alone.
1 · Brand essence

Yuma's site is calm and plainly built. A white field runs the whole way down, colour arrives in full-width bands rather than in flecks, and one purple shows up only where you are meant to act. Headlines are sentence case with a full stop kept, one thought per line, and nothing is set in caps or italics anywhere. The pictures carry the argument, real console screens and product comps, while the copy stays short and literal. "Resolve, don't just respond."

The site already tells one story well, that the agent takes the action instead of drafting a reply someone still has to send, and a feed is where that story can be shown a ticket at a time. There is a lot of material on yuma.ai that a post could reuse straight away: the resolved-count tile, the auto-pilot toggles, the merchant quotes sitting on the mint band. A weekly rhythm of small, concrete posts built from that same material would let the evidence work more than once, and it would look like the site rather than like a template.

2 · Colour system
Primary
#6F34FF
Purple
buttons, links, progress ticks
#161517
Ink
headlines and body copy
#ACE6C8
Mint
outcomes, resolved and retained
#BDD5FB
Pale blue
process rows and badges
#F0EBFF
Lavender wash
panels behind console shots
#FF812C
Orange
status dots, never text
Supporting
#4A4850
Ink soft
secondary copy and captions
#78757E
Ink mute
labels and fine print
#804CFF
Purple hover
hover state on the purple button
#DDCFFD
Lavender panel
the panel a console shot sits on
#FFFFFF
White
the page ground and the cards on colour
Background recommendations
White field The default ground for most of a layout, with wide margins and one idea per block.
Purple bleed One full-bleed moment per piece, the opener or the closing card, white type over it.
Mint highlight Outcome blocks only, a resolved count or a retained chip, dark ink on the mint.
3 · Typography
Display font
Figtree
every heading, weight 500 to 600, sentence case, tracking pulled in slightly at 48px
Body font
Inter
deck copy, labels and UI strings, 400 for running text and 500 when a label needs to rank
  • Headlines: Figtree 500 to 600, sentence case, tracking pulled in about -0.02em at 48px.
  • Body and UI strings: Inter 400 around 14px, 500 when a label needs to rank.
  • Hierarchy comes from the size gap between a 48px headline and 14px body, not from heavier weight.
  • The site sets no italics anywhere, so every line stays upright.
  • One display family and one body family, sentence case throughout, no all-caps labels.
Aa
abcdefghijklmnopqrstuvwxyz
0123456789
4 · Visual style direction
calm
white
field
One white ground runs the whole page and colour arrives as full-width bands.
full-bleed
purple
One solid #6F34FF moment per piece, white type on top, the way the hero band does it.
soft
big
radii
8px on buttons and chips, about 28px on cards and panels, a pill on status chips.
real
product
shots
Console screens and objects on grey studio seamless, photographed rather than drawn.
5 · Layout principles
Breathing room generous whitespace lets the product and message stand out
8px rhythm every gap sits on an 8px grid — consistent margins and alignment
Clear hierarchy strong headline, clear subhead, scannable support copy
Visual first roughly 60% visual, 40% text for stopping power in the feed
6 · Imagery & creative direction
Lean into
  • Real product screens. The Ask Yuma chat, the auto-pilot toggles and the resolved-count tile all still read at thumbnail size.
  • Photographic objects on a plain grey studio backdrop, placed behind or beside the UI cards, the way the hero comps already do it.
  • Real people in the cards and real merchant logos on the mint band, matching the customer strip on the home page.
  • Thin white connector curves linking floating cards, used sparingly, one or two per comp.
Steer around
  • Redrawn or mocked-up product UI. A real screenshot is stronger every time, and it is the one thing a reader can check.
  • 3D renders, gradient meshes and abstract icon collages. The flat cards already carry the idea and the extra texture would fight them.
  • Hard drop shadows. Your depth comes from a white card on colour, so anything heavily dropped reads as a different brand.
7 · Social direction — three posts designed in this system
A cancellation turned into a delayed delivery, shown on your own hero comp.
A cancellation turned into a delayed delivery, shown on your own hero comp.
Four slides following one ticket, from the shopper's message to the automation setting behind it.
Four slides following one ticket, from the shopper's message to the automation setting behind it.
A founder's stockroom with one real Yuma screen on the seam between her room and the helpdesk.
A founder's stockroom with one real Yuma screen on the seam between her room and the helpdesk.
8 · Quick win ideas
1

One ticket across four slides: the shopper's message, the action taken, the setting that let it run on its own, and the outcome chip. Every screen comes from your own image library.

2

A weekly resolved card. The mint tile with the number, one line of context under it, nothing else on the slide.

3

A merchant quote on the mint band, set in Figtree 500 with the logo small underneath, in the same shape as the customer strip on the home page.

Kamply designs posts like these every week, in this exact system. You approve, it designs.

See what Kamply makes