## Customer Stories # On the aesthetics of a lighter internet (Image content) In conversation with Laís Kantor (Founder & Creative Director @ goodbase) ### TLDR - [goodbase](https://www.datocms.com/partners/goodbase.md) is an Italy-based studio founded by Laís Kantor, working on brand, UI/UX, and websites for startups - [ClimateAdaptation.life](https://climateadaptation.life/) is a platform reporting on climate adaptation projects. goodbase are co-founders, not simply suppliers - The core principle when building the platform was that the infrastructure itself couldn't be hypocritical with the content - They started with constraints (typography weight, color energy, image loading) rather than designing first and cutting later - Users can choose color palettes and see the energy impact of each. A grid API shows real-time energy source data - DatoCMS handles media management, modular page building, and content relationships [goodbase](https://goodbase.studio/) is based in Italy. Their team works across brand identity, marketing campaigns, UI/UX, and websites. Mostly startups and companies up to around 50-80 people. Laís, one of their founders, is the brain behind their design philosophy, who spends her time between Italy and Brazil (where she was during this call and made us pretty jealous of the sunshine). When it comes to choosing a CMS for their projects, Dato has become the default. Their head of technology knows it well, Laís has used it before, and it just works. No drama. No fuss. --- ### Let's talk about the project To begin with, this wasn't your typical client engagement. goodbase came in early, talked with the founder & CEO, Sergio Matalucci, and ended up becoming co-founders of the project, so they definitely have a voice in where it's heading, which is very different energy to just serving a request. (Video content) The platform reports on climate adaptation projects, features white papers, case studies, and all sorts of different types of content related to how we prepare for what's coming (not that I'm trying to drop any dark foreshadowing or anything). And during all of that evaluation on the content of the project is where the question came up: if the *content* is about climate adaptation, shouldn't the *design and infrastructure* reflect that too? ### Not just "Pretty Pixels" As with most best-in-class projects, goodbase started with the content structure. How editors will add things. How content can be reused. How components are built out using blocks. How locales are handled. The usual. (Video content) Then they moved to the visual layer, where every decision became a sustainability decision. Typography has weight. Colors consume energy. API calls add up. Even filtering UI matters. Things you wouldn't necessarily consider until you had an after thought on sustainability is what was front and center throughout this process. > If the site is entirely focused on climate adaptation, shouldn't our design and technology choices reflect that same philosophy? For example. They had a filter design where clicking on/off felt smoother as an experience. But it called the API too many times. Not great for sustainability. So they changed the design. > As a designer, I wanted things a certain way, which is what happened with our content filtering. Visually, I preferred just clicking options on and off to filter instantly rather than selecting everything and clicking apply. But what happens? It calls the API too many times, and excessive API calls aren't great for sustainability. So I said, 'Okay, let's change this design. That's the ongoing demand. Every choice gets questioned, and the most sustainable approach wins. Typography was also chosen carefully. They didn't want extra weight. Now they're adding Arabic, and the display font doesn't support it. Do they add another typeface? Does that make it worse? Maybe not. If the developer can conditionally load only what's needed based on language detection. These aren't abstract conversations. They happen in real time, mid-project, and they come with considerable trade-offs. The same philosophy applied to images. They're not the heroes of this site. They are shown in low-res until you choose to load them. The content is the point, not the photography. But it's also worth mentioning that these lightweight images feature a sleek, monochrome noise texture, making the energy-saving choice feel like an intentional design aesthetic rather than a compromise. ### Retaining Rock-Solid Foundations If we're being brutally honest, most sustainable websites look... ugly. Sacrifice visuals for performance. Make everything plain. Ship something that works but doesn't feel like anyone cared. Done. ClimateAdaptation.life doesn't look like that, and the trick was inverting the process. Instead of designing first and then cutting for sustainability, they started with all those constraints, and then designed within those limits. > We completely inverted the process. Usually, you design something first and then start stripping things away to make it more sustainable. Instead, we asked right at the beginning: 'What are our environmental constraints?' and built everything around those limits from day one The funny thing is that even though the typography *is* climate-conscious, it *does look pretty* and well thought out. To the point that when they did user testing, people who normally read climate content said the display font felt "too designed." They're used to ugly things. But Laís pushed back. They're a new company. They need branding. They need people to remember they exist. ### OK, but Why Not Just Force Dark Mode? The easy answer would be to make everything black and call it a day. Less energy. Done. But. That's not inclusive. If someone's system preference is light mode, forcing dark mode ignores their choice. (Video content) So goodbase built something completely different. A grid API that knows your energy source, and added color palettes with visible impact labels rather than just a simple light/dark toggle. This way, the user picks the color palette they want, AND they see what that choice means in terms of energy consumption. Honestly, that's pretty f\*ng cool! (Video content) > Should I force black on you just because it uses less energy? The easy answer is to make everything black and call it a day. But from an accessibility perspective, I shouldn't, because your preference might be light mode. This is an interesting approach as well, because in the end, it's about awareness, not *just* optimization. (Video content) When you're choosing a color and you see the energy impact, you think about it. Maybe for the first time. Maybe it sticks. ### Making Dato Shine OK, we LOVE the approach and the implementation, but we still had to be a bit cheeky and figure out how Dato fit into the project because we love a lil pat on the back, too. Media management was a big reason for choosing Dato here. If you can't substitute an asset in a single place everywhere, you end up with orphaned content. Stuff you uploaded once that's now just sitting there, unused. Dato's approach to media made it easier to keep things clean. And given that Dato ships assets with 50 shades of optimization options, the actual end delivery to the user also had an impact on the sustainability of the project, since assets could be delivered lighter, and re-optimized on the fly for the user's connection speed and device. (Video content) On the technical side, modularity mattered too. Pages are built from reusable components. Articles are different from landing pages, but they share pieces. If they need to spin up something for an event, they can pull from what already exists. > Modular design was key for us. We constructed everything using reusable components, which makes page-building incredibly convenient since you can easily repurpose elements as the site grows. And there's of course the relationship layer. A lot of content, all connected. Behind the scenes, things are wired up to stay smart as the library grows. OH, and. They also built an open-source [geographic areas plugin](https://www.datocms.com/marketplace/plugins/i/datocms-plugin-geographic-area.md) early on and made it available to the [community](https://www.datocms.com/marketplace/plugins.md). This is a super nifty plugin for editors who want to select geographic areas. Ironically, they stopped using it internally because the editors wanted something that'd let them make more complex selections, but even though they didn't need the plugin anymore, they decided to keep it for the community. That's the part Laís kept coming back to as well. The ease of talking to people, suggesting a plugin idea, and maybe collaborating on something. It feels like a real community. Not every tool does. > "What I really like is that it's super easy for us to, you know, talk with each other, decide to put something out there and somehow work together. So I think there is this part which makes you feel a little bit like home. 🫶🏽 They're currently working on AI and audio accessibility features to implement into the project, and while they're still figuring out how to approach it given their focus on sustainability, they'll share it once it "clicks".