Soft Intelligence
Calm AI product pages: pearly gradients, a literary serif and a chat window as the hero.
This style
$9$19
One-time, no subscription · instant download · client use · 7-day refund before download
The idea
Pale pearl backgrounds with a slow wash of peach, lilac and sky, a thoughtful serif for headlines and a conversation UI at the centre of the page. It avoids the neon-robot clichés of AI marketing and goes for something closer to a well-lit reading room with a very good assistant in it.
Soft Intelligence is an AI product page that feels thoughtful rather than futuristic. A warm pearl canvas carries a barely-there aurora of peach, lilac and sky; a literary serif sets the headlines with one italic word, and the hero is a real conversation window showing the product answering. It borrows from book design, reading rooms and the gentle gradients of early-morning light, deliberately avoiding robots, circuits and neon. The feeling is calm competence: an assistant you would trust with something important.
Principles
- Show the conversation; the chat UI is the hero visual.
- Warm and quiet: no neon, no circuits, no glowing brains.
- One italic serif word per headline carries the voice.
- Citations and confidence are design elements — show them.
- Ink-dark buttons; violet only as a thinking indicator.
Motion
The hero chat window types its answer in real time at about 40 characters per second, with citations fading in as superscript chips. The background gradient breathes slowly between peach and lilac over 20 seconds.
Do & don't
Do
- ✓ Make the hero a working-looking chat with a cited answer.
- ✓ Use superscript citation chips throughout the copy.
- ✓ Show a three-dot violet 'thinking' indicator once.
Don't
- ✕ Don't use robots, brains, sparkles or circuit imagery.
- ✕ Don't use neon or saturated gradients.
- ✕ Don't set body copy in the serif.
+ 3 more of each, and component rules, in the full DESIGN.md.
What's in the DESIGN.md
- 01Overview & principles
- 02Colors (tokens + proportions)
- 03Typography (families + 12-role scale)
- 04Layout & spacing scale
- 05Elevation & depth
- 06Shapes & radii
- 07Motion (easing, durations, signature)
- 08Imagery + generation prompt
- 09Components (button, card, nav, input, badge)
- 10Do's and don'ts
- 11Responsive behaviour
- 12Iteration guide + agent checklist
Plus theme.css (Tailwind v4 @theme), tokens.json (W3C) and the preview page source — 371 lines of DESIGN.md in total.
More like this
All SaaS & Bento →
FreeBento Daylight
No. 039A sunlit bento box of product tiles: soft grey canvas, white cells, one confident blue.
Bento Midnight
No. 040Charcoal tiles on a blueprint grid, lit from inside by a single violet glow.
Hairline Noir
No. 041Near-black, one ice-blue accent and hairlines drawn with a 0.5mm technical pen.
Indigo Clarity
No. 042White space, deep indigo and crisp product screenshots that explain themselves.
Signal Grid
No. 043A dense analytics cockpit: tight grids, tabular numbers and charts that do the talking.
Lime Voltage
No. 067Black, electric lime and huge condensed caps. A startup that wants you to notice.