Solaris Marketing
The Solaris system at work — sunlight, veils, and an editorial serif.
How Solaris shows up in marketing — the system proven in the sales prospectus. The product's orange-and-purple palette carries an editorial document language: ambient sunlight washes, light veil emphasis bands with drifting star fields, mono eyebrows over serif headlines, left-rule callouts, and starbursts echoing the mark. Light never dark; space is the luxury; the light is the motif.
Emphasis comes from light veil bands, hairlines, and type scale — never from dark inversion.
Generous measure, hairline structure, and a strict spacing rhythm carry the premium feel.
Warm radial washes, drifting star fields, and starbursts echoing the mark do the decorating — content does the talking.
Solaris logos are supplied as ready-made SVG. The SOLARIS wordmark is set in Hedvig Letters Sans (80px), outlined into fixed artwork; typography in the guide remains Brawler.
Surfaces
Ramps
Gradients
Click to inspect from / to / direction + CSS.
Elements
Content-type colors. Each pairs a deeper tone with a lighter tint — reverse background/icon as needed.
Functional
System states — a light surface with a deep icon, or reversed.
Levelling
Solaris renders the learning ladder in purple — the top tier is a gradient.
Tier / Leaderboard
Rank tiers shared across brands — each a metallic gradient.
Core tokens
Shared by every brand.
- Open every section with a mono eyebrow over a serif headline.
- Ration purple to one insight moment per section.
- Use the tint ladder — base for fills, deep for display, ink for small text.
- Don't invert to dark surfaces — emphasis is a lighter veil, not a darker block.
- Don't use the deprecated cream-and-cocoa sunburst palette.
- Don't box content — structure is hairlines and left rules, not cards.
Ambient sun washes cluster top-left with a violet answer top-right; emphasis moments sit on fixed-attachment veil bands with drifting star fields; starbursts echo the mark in product orange and purple.
The first-fold ambience of every marketing surface: warm sun radials cluster at the top-left, a single violet radial answers from the top-right, all at low alpha over the light canvas. Pure stacked CSS radial gradients — no imagery, no SVG.
Introduction
AI won't transform your company. Your people will.
Content sits directly on the wash — the glow never competes with the reading measure.
Recipe — token-driven, reusable in any Solaris panel
background:
radial-gradient(55% 45% at 10% 0%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 70%),
radial-gradient(45% 40% at 30% 0%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 70%),
radial-gradient(55% 45% at 92% 4%, color-mix(in srgb, var(--secondary) 10%, transparent), transparent 70%);- Warm radials always cluster top-left; the violet answer sits top-right — never reversed.
- Keep every layer under ~15% alpha so the canvas still reads as light.
- For full-page documents, echo the sun diagonally down the page with smaller, fainter splotches.
- A quiet starburst may echo the mark inside the wash, at ≤10% opacity.
The veil is the light-mode replacement for a dark emphasis section: sun splotches and the Page Header gradient over the card surface, bounded by hairlines, with ink text throughout. background-attachment: fixed pins the light to the viewport — the text scrolls, the light doesn't. A drifting star field floats behind the content.
What you own from day 90
A capability that compounds after we leave.
- Use at most one veil band per document moment — the ownership summary and the finale.
- Ink text only; the veil never earns light-on-dark type.
- Hairline top and bottom borders, full-bleed — a veil is a band, not a card.
- The star field inherits the panel's ink color, seeds deterministically, stills under reduced motion, and pauses off-screen.
- Print flattens the veil to a single opaque gradient and hides the stars.
Structure is carried by hairlines and left rules, never boxes. Every section opens the same way: a mono eyebrow, a serif headline, a lede capped at 60 characters.
The problem
Where AI programs stall.
Tools get bought, pilots get demoed, and ninety days later nothing has changed about how the work is done.
Callouts — the left-rule aside
An aside is a 2px color rule with a pale tint fill — never a box. Orange is the default; the violet variant is rationed to one insight moment per section.
The default aside. Use it for context, caveats, and worked examples inside a section.
The insight moment. One violet callout per section, reserved for the finding the reader should carry away.
“The pull-quote is oversized serif italic on the same left rule — no quotation cards, ever.”
Numbered ledgers
Licenses without adoption. Usage decays after week two.
One team's demo never crosses into the org's workflow.
Nobody owns the habit, so the habit dissolves.
The tint ladder in use
Base orange is a fill color, not a text color (≈2.4:1 on white). The ladder keeps every accent accessible — see the Color section for the exact steps.
Ink — eyebrows & small text
Proof rows (“We work directly with”) run as a continuous marquee: the track is duplicated for a seamless loop, edges fade through a CSS mask, and hover pauses it. Logos rest inked-down and light up to full color on hover. Reduced motion collapses it to a static wrapped row.
We work directly with
- 28s linear loop; duplicate the track and translate by −50% for the seam.
- 2.5rem edge fade via mask; the mask is dropped under reduced motion.
- Logos rest at brightness(0) / 70% opacity and restore to full color on hover.
Figures share one grammar: a bell distribution stroked with the Strong gradient (warm on the left, cool on the right — the progression from beginner to advanced), a soft gradient area beneath it, a dashed ghost showing the previous state, and a dashed plumb line to the apex.
- Stroke with the Strong gradient — warm left, cool right — so color encodes progression.
- The previous state is always a dashed ghost, never a second solid line.
- Caption chips are lavender rectangles with purple-700 mono labels.
- Axes are hairlines at ~35% ink with small triangular arrowheads; ticks are mono uppercase.
Photography and illustration direction is in progress.
Base radius drives every surface via --radius.
Every element reads the brand's live Tailwind tokens — no per-brand markup.
Product UI, social, and collateral applications will be showcased here.
This brand's logos, fonts, imagery, and downloads live in one folder, nested under the brand. Drop files here and they'll be wired up as they land.
public/brands/solaris/