Brand
Every colour, type style and component that makes up happly.ai, in one place. The swatches below are read from the live stylesheet and the components are the real ones — so this page is always in step with the product.
The wordmark is the primary lockup. The vertical lockup covers square and narrow spaces, and the mark on its own is reserved for the tightest — favicons, avatars, app icons.
Keep clear space of at least the cap height of the wordmark on all sides.
Scale proportionally; the wordmark has a minimum width of 96px.
On dark backgrounds use the reverse lockup — it keeps the mark in colour. The all-white version flattens the mark into one silhouette, so save it for single-ink printing.
✕ Don't recolour, stretch, rotate, add effects, or place the wordmark on a busy photo.
Surfaces stay warm and low-contrast so product screenshots and photography carry the colour. Purple is the only accent that appears in interface chrome.
--purple
—
Primary brand purple. Buttons, links, active states.
--purple-tile
—
Tinted purple surface behind icons and active menu rows.
These five live in the artwork rather than the stylesheet. Use them for illustration and data accents — never for body text or buttons.
Sun
#FBD570
Ember
#F97627
Punch
#E30147
Violet
#6422C8
Mint
#2ACEB6
--bg
—
Page canvas. The warm putty behind every panel.
--panel
—
Section panels. Warm cream white.
--white
—
Cards and controls that sit on a panel.
--light
—
Subtle fill for hover and inactive states.
--ink
—
Primary text and headings.
--gray-600
—
Body copy and secondary text.
--gray-400
—
Labels, captions and muted metadata.
--badge-text
—
Text on the amber announcement badge.
--border
—
Control and card borders.
--hairline
—
Internal dividers on cream panels.
Inter Display throughout, self-hosted as woff2 subsets. Headings sit at 500–700 with tight tracking; body copy stays at 400.
We help people find money.
We help people find money.
We help people find money.
We help people find money.
We help people find money.
We help people find money.
We help people find money.
We help people find money.
We help people find money.
Two radii do most of the work: 8px on full-width panels, 24px on cards. Shadows stay almost invisible — depth comes from the warm gradient surfaces, not blur.
Buttons are 40px tall with an 8px radius. The nav call to action is a special case: it keeps a fixed footprint and swaps its label on hover so the layout never shifts.
Small labels carry status and category. All of them are pill-shaped except the feature chips, which use a softer 8px radius.
Three card treatments cover the whole site: a plain white card on cream, a warm gradient card for feature and beta content, and the icon card used in showcase grids.
.prov-icon-card
The warm #fbf9f7 to #f4f1eb gradient with a hairline stroke. Artwork sits full-bleed across the bottom and is clipped by the card.
.prov-feature-card
Image on top, title and body beneath, logo and arrow in the footer row.
.announce-card
Content is capped at a fixed column and every section is a panel floating on the putty canvas. At the widest breakpoint the row also paints the full-bleed side panels.
Content width
1198px
--content, with 40px inner padding
Wide grid
1fr · 1212px · 1fr
≥1440px, side panels flank the column
Panel gap
2px
The canvas showing between panels
Card gap
24px
Between cards in a grid row
Section padding
48–64px
Vertical rhythm inside a panel
Bento row
724 / 384
Alternating wide and narrow cards
Motion is used to reveal, not to decorate. Everything eases out; nothing bounces. Reveals fire once when a section scrolls into view and never repeat.
Reveal
600ms
Fade up 14px, cubic-bezier(.22, 1, .36, 1)
Artwork rise
700ms
Staggered 120ms per layer
Float
5–7s loop
4–8px vertical drift, easeInOut
Marquee
30–42s
Linear, infinite, masked at both edges
Headline swap
450ms
Per-letter, 35ms stagger, 6s hold
Hover
160–350ms
Colour and shadow only, no scaling
