Solara: A sunrise identity that gave a Python framework a more assured public face.

The name suggested sunlight. The homepage needed to look ready for serious work.

Solara's old homepage used pastel rockets and toy planets. The framework had outgrown that register, but the space theme still had something useful in it: a connection to the name.

I designed a sunrise identity and homepage around that connection. With two engineers maintaining the framework, I also agreed an implementation constraint early: motion concepts would use CSS opacity and color transitions, without a JavaScript animation runtime. That made the visual direction and its build requirements part of the same conversation.

The marketing site introduced Solara and encouraged visitors to try it. My documentation work served developers using the framework: finding functions, reading code and resolving errors. Both carried the same brand, with each experience designed around its own task.

Visitors arrived from GitHub. The homepage had to explain what they could build.

Most inbound traffic came from Solara's GitHub repository. These visitors already had a technical reason to be interested; the homepage needed to show what the framework made possible.

I worked with the team toward a page that explained the Python value proposition in its first screen, established an identity usable across the docs and product, and gave visitors one primary action. The existing illustrations offered personality but little evidence of production-ready applications.

The identity came from the name: a sunrise.

The sunrise came from Solara's name. A photograph of an astronaut above a planet at dawn gave that association a visual form: a dark field, a bright horizon and a quiet sense of scale. It retained the old site's space theme while moving away from cartoon objects.

The rim of light

The same photograph also gave the site its movement. What makes it read as close is the planet's edge: a rim of light that starts dim and formless, gathers into a defined white line toward the center of the curve, then loosens and diffuses again as it falls away. That rim tells you the camera is near something enormous.

I abstracted it into one motion pattern: emerge dim, sharpen toward the center, diffuse at the end. The hero uses it at full scale, section reveals at page scale and card hovers at component scale. Repeating one gesture at every size means the site moves the way its hero image implies it should, so the identity and the motion come from the same reference rather than two separate decisions. The motion recordings on this page come from the Figma prototype where I designed it.

On the homepage, a warm horizon and more room for typography replaced the pastel illustrations.

The direction took three passes. My first layouts still looked like a generic dark SaaS template. The second applied Solara's brand to a flat dark surface. The third committed to the sunrise horizon, which eventually reached the built homepage as a CSS gradient.

I extended the warm-on-dark treatment to the logo, code snippets, integration badges and event banners. These were different formats carrying the same identity, rather than a hero effect with no life elsewhere.

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

The pattern and the constraint fit each other. A movement about light arriving is a change in opacity, so nothing in it needed geometry or a JavaScript runtime. Each hover concept became a problem of layers and opacity.

On a card, the Solara emblem glow, bgAurora, sat beneath a dark foreground. Fading the foreground revealed the emblem: the same sunrise idea at a smaller scale.

Orange appeared on interaction rather than on every resting control. This kept the page restrained and avoided relying on the brand color where it could not provide enough contrast. The spec could describe the effect in terms the engineers would implement: foreground, backdrop, color and opacity.

I carried the same typography, spacing and color language into the developer documentation.

The homepage moves from the framework’s promise to examples of it in use.

I reduced competing navigation links and organized the scroll around the developer's next questions: what is Solara, what does it look like, what can it do, and who uses it? One primary call to action held that sequence together.

The same content recomposed from a 1440px design down to mobile. Calls to action and core information were checked against WCAG 2.1 AA contrast and focus requirements in the design.

The card spec named the layers and states engineers needed to build.

The card specs showed layer names, padding, color references and before-and-after hover states for each part. Engineers could start building the card system without a clarifying round-trip.

An interactive Figma prototype joined those component specs to responsive page layouts. It let the team review the proposed behavior, while the annotations supplied details a prototype alone could not convey. The homepage prototype remains available to explore.

The homepage was approved at its first all-hands and launched as part of Solara's relaunch.

The homepage prototype was approved with minor changes at its first all-hands presentation in January 2024. I completed the design MVP in Q1; the marketing site launched in Q3 2024. Engineering built it in HTML and CSS, carrying the sunrise into production as a CSS gradient across the page's composition and color.

The site was one part of a wider relaunch I worked on with the team. I also built the slide deck Maarten and Iisakki presented at PyData Paris 2024, while Solara's leadership promoted the framework through its own channels. Monthly downloads grew 13× through late 2024, and Solara had 3k+ new users by the end of Q4, including enterprise users. That growth came from the framework, the relaunch and the team's promotion together.

Solara's name gave the team a reason to choose the sunrise beyond personal preference. Reading the same reference twice, once for color and once for motion, made the identity consistent enough to hold across the hero, the cards and the code samples.

Designing motion in the implementation's own terms made the handoff concrete. The spec described layers, opacity and color, which engineers could start building without a clarifying round-trip, and the prototype keeps the complete motion design for the team to return to.