Solara: A sunrise identity in a market of cold neutrals, approved at the first all-hands.

A sunrise identity, and a homepage designed within what two engineers could build.

Open a dozen developer-tool websites and you'll see the same palette again and again: cold blues, neutral grays and dark gradients. Solara's name offered another direction, because "Solar-a" already suggests sunlight and warmth. I turned that association into a visual identity, then into a marketing homepage.

I designed the identity, the homepage and its motion concepts. Before designing any hover state, I agreed a constraint with the engineers: every motion concept had to be expressible with CSS opacity and color transitions. That constraint shaped the component design and the handoff.

The documentation portal that carries the identity into Solara's product is covered in the Solara documentation case study.

Most visitors came from GitHub, and the landing page undersold the framework they had found.

Most of Solara's inbound traffic came from its GitHub repository, so visitors usually arrived already technical and curious about the framework.

The landing page they reached used a pastel space theme with cartoon rockets and toy planets. It was charming, but it felt closer to a side project than to a framework teams could build production apps on. With the team, I set three goals for the redesign:

• Clearly communicate the value proposition. What Solara is and who it's for, in one screen.
• Establish a distinct visual identity. One that could stretch across the site, docs and product.
• Simplify the information architecture. Focus the page on one primary action.

The identity came from the name: a sunrise.

From association to concept

I built the identity on the one association the product already owned. In a category dominated by cold blues, warmth was a clear point of difference.

The reference that set the direction was an image of an astronaut above a planet at dawn: vast, calm and technical. I translated it into a realistic sunrise horizon for the hero, keeping the old site's sense of space while replacing its toy rockets with a calmer register.

The same reference suggested the motion

The planet's rim of light in that photograph starts dim, sharpens toward the center of the curve and diffuses again. I abstracted that into one motion pattern, emerge, sharpen and diverge, for section reveals, component hovers and the hero. One gesture repeated at every scale kept the motion concepts consistent with the identity.

From toy-like to technical

On the homepage hero, the sunrise replaced the pastel illustrations with a dark surface, a warm horizon glow and more room for typography.

The direction arrived in versions

The sunrise was the third hero direction. The first layouts used the generic dark SaaS look the redesign was meant to leave behind. The second applied the Solara brand to a flat dark surface. The final pass committed to the sunrise horizon, which the built homepage carries as a CSS gradient.

One language across surfaces

Logo treatment, palette, code-snippet styling, integration badges and event banners all draw from the same warm-on-dark language, so the repository, site and docs read as one product.

A motion language designed to run on CSS opacity and color.

The constraint

Solara's team had two engineers and a framework to maintain, and the marketing site shouldn't require a JavaScript animation runtime. So I set the constraint before designing any hover state: every motion concept had to use CSS opacity and color transitions alone. The emerge-sharpen-diverge pattern fit it well, because it describes light arriving rather than objects moving.

The card component shows the result. Its backdrop is a small version of the hero: the Solara emblem glow (bgAurora) sits beneath a dark foreground layer. On hover, the foreground fades and the emblem shows through, a sunrise at component scale.

Hover is also where the brand color appears. Solara's orange is hard to use as a primary interface color without failing contrast, so the product keeps it off resting states. The marketing pages used the same approach: a dark, restrained surface at rest, with warmth arriving on interaction.

The marketing pages deliberately sat outside the product's semantic token layer. Those expressive one-off surfaces were styled directly; the token architecture behind the product is covered in the documentation case study.

One page with one primary call to action.

A simpler structure

The old site spread attention across navigation links competing for the same click. The redesign used fewer links, one primary call to action and a scroll sequence that answers a developer's questions in order: what Solara is, what it looks like, what it can do and who uses it.

Responsive and accessible in the design

The design scales from the 1440px marketing viewport down to mobile by recomposing the same cards and motion logic. In the design, calls to action and core information meet WCAG 2.1 AA contrast and focus standards.

Specs in the implementation's vocabulary, and a prototype engineers could build from.

Because the motion was designed in CSS terms, the card spec could be exact: layer names, pixel padding, color tokens and before-and-after hover states for each sub-component. The engineers started building the card system without a clarifying round-trip.

The final deliverable was an interactive Figma prototype with responsive breakpoints and interaction states, plus those annotated specs. You can explore the homepage prototype or browse the curated design file.

Approved at the first all-hands, then built in HTML and CSS with the sunrise identity.

I presented the homepage prototype at an all-hands in January 2024, and it was approved with minor changes. The design MVP was finished in Q1, and the marketing site launched in Q3 2024.

The engineers built the homepage in HTML and CSS. It carries the structure, copy and sunrise identity, with the sunrise rendered as a CSS gradient. The designed motion layer and some visual fidelity did not make it into the build.

The site launched during a period of strong product growth. Monthly downloads grew 13× through late 2024, and Solara had 3k+ new users by the end of Q4 2024, several of them enterprise. That growth belongs to the framework, its documentation and the team's wider work; no separate effect of the marketing site was measured.

Look for the identity the product already has

The sunrise came from Solara's own name. Starting there gave the identity a reason that the team could recognize immediately, instead of a style chosen to look different.

Design motion in the implementation's language

Setting the CSS constraint early gave the engineers a motion language they could evaluate and build without a new runtime. It also made the specs precise enough to start from.

A precise prototype makes approval easier

A breakpoint-complete prototype and annotated specs let the team review the real behavior of the page, which helped the design get approval in one all-hands.