# S9 Studio Design a beautiful world ! - Site: https://s9studio.com/ ## Why the making matters: brand identity in the age of AI - Link: https://s9studio.com/insights/brand-craft-ai-era/ - Published: 2026-10-23T09:00:00+01:00 - Author: sumitkafre On 21 October, Apple Music unveiled a new identity. Its logo was created by passing sound through a pool of oil, made with the musician Fred again.., and the brand moved to a black-and-white palette. It follows Instagram’s first wordmark update in about a decade in August, and Coca-Cola’s single global visual system in July. Three very different brands, one shared lesson about where brand identity is heading as AI makes images easier than ever to produce. ## Craft as a signal When images can be generated in seconds, a mark with a real making process carries a story that is hard to copy. Apple Music’s logo is not only a shape. It is evidence of how the brand thinks about sound, captured in a physical process. Not every brand needs a physical experiment. But every identity benefits from an idea that explains why it looks the way it does. That idea gives designers something to build on and gives audiences something to remember. ## Refine, don’t restart Instagram kept its familiar script and refined the details. Coca-Cola focused on bringing one consistent look to packaging, retail and digital across its markets. Both protected what people already recognise and improved how it works in today’s contexts. For established businesses, a careful refresh is often more valuable than a reinvention. The goal is a stronger version of a brand people already trust. > Every identity benefits from an idea that explains why it looks the way it does. ## Think in systems Modern identities appear on app icons, in motion, across social formats and, increasingly, in content produced with AI tools. A logo alone cannot hold all of that together. A clear system of typography, colour, motion, imagery and rules lets a brand stay recognisable wherever it appears, even when many people and tools are producing the work. ## Identity in an AI-heavy world As AI-generated imagery becomes common, generic visuals become easier to ignore. Distinctive brand assets, such as a recognisable mark, an ownable colour, a consistent tone of voice and a clear photographic direction, become more valuable. Brand guidelines also need to cover how AI tools are used: which assets can be generated, which must be crafted, and how outputs are reviewed for consistency. ## The power of restraint Apple Music’s move to black and white is a reminder that restraint can be as striking as colour. Removing elements can make the remaining ones stronger. For many brands, the most effective update is not adding something new but simplifying what is already there. ## Applying these lessons You do not need Apple’s budget to apply these ideas. Start by writing down the idea behind your brand in one sentence. Check whether your logo, colours, typography and imagery all express it. Then look for one way your brand could show its craft, for example custom photography, a distinctive illustration style or a signature motion detail. ## Guidelines for a busy world Modern brand guidelines need to be practical and accessible. Templates for common formats, clear examples and simple rules help many people produce on-brand work quickly. Guidelines that live in a long PDF nobody opens protect very little. ## Questions for your brand What idea explains why your brand looks the way it does? Which recognisable elements should any update protect? Is your system clear enough for many people and tools to use consistently? Answering these honestly is the best starting point for any identity work. ## Key questions to ask * Find the idea that explains your brand’s look. * Protect the elements people already recognise. * Build a system, not just a logo. * Set rules for how AI tools use brand assets. ## Room to breathe: spacing as a design decision - Link: https://s9studio.com/insights/white-space/ - Published: 2026-10-20T09:00:00+01:00 - Author: sumitkafre When a page feels cluttered, the instinct is often to remove content. Sometimes that is right. Just as often, the fix is spacing. The same content, arranged with consistent, generous space, can feel calm, organised and easy to read. Spacing is not the absence of design. It is one of the most powerful design decisions on any page, and one of the most frequently overlooked. ## Spacing groups ideas People read closeness as relationship. Elements that sit near each other feel connected; elements with more space between them feel separate. This is one of the most reliable principles in visual perception. Used deliberately, spacing can do the job that extra lines, boxes and borders often try to do. A form where labels sit close to their fields and further from the next field needs no dividers to be understood. ## Spacing creates hierarchy Space around an element signals importance. A headline with generous space above and below feels significant. A dense block of small elements feels secondary. This is why premium brands often feel spacious. Space communicates confidence: the content does not need to shout or crowd to be noticed. > Spacing does the job that extra lines and borders often try to do. ## Use a spacing scale Choosing a new spacing value for every situation leads to inconsistency. Eight pixels here, eleven there, fourteen somewhere else. The page starts to feel slightly off, even if nobody can say why. A small spacing scale, used everywhere, solves this. It also makes decisions faster for designers and engineers alike, because the question becomes “which step on the scale?” rather than “what number?”. ## Scale spacing with the screen Generous spacing on a large monitor can feel empty on a phone, and spacing that works on a phone can feel cramped on a large screen. Spacing should respond to the screen, keeping the same rhythm while using the available space well. In practice this means defining spacing for a few screen ranges and checking key pages at each one. We regularly tune the space around page titles and between sections for desktop, tablet and phone separately. ## Space for reading Long-form content needs comfortable line lengths and line spacing. Lines that run too wide are tiring to read; lines packed too tightly blur together. Paragraph spacing gives readers natural pauses. These details matter most in the places people actually read: articles, documentation, terms and product descriptions. ## Common spacing mistakes Equal spacing everywhere flattens hierarchy. If the space between a heading and its paragraph is the same as the space between two sections, the reader cannot see where one idea ends and the next begins. Another common mistake is using borders and backgrounds to fix grouping problems that spacing should solve. Each added line adds visual noise. ## An example from our site On our own pages, we recently tuned the space around page titles separately for desktop, tablet and phone. A gap that felt balanced on a large monitor looked excessive on a tablet, and the same numbers felt cramped on a phone. Small adjustments at each size made every page feel calmer. ## A quick check Take a busy page and, before removing anything, try increasing the space between groups and reducing it within them. Remove borders that spacing could replace. Often the page becomes clearer without losing a word. ## Spacing habits * Use space to group related items before adding lines or boxes. * Pick spacing values from one consistent scale. * Tune spacing separately for desktop, tablet and phone. * Give long-form content comfortable line length and spacing. ## Code inside the design file: what code layers mean for handoff - Link: https://s9studio.com/insights/code-layers-handoff/ - Published: 2026-10-17T09:00:00+01:00 - Author: sumitkafre At Config 2026 in June, Figma introduced code layers, which turn a design layer into interactive code with a click or a prompt. At Config India on 15 October, code layers and Specs moved into open beta. For teams that have spent years translating static screens into working interfaces, this is a meaningful change in the tools. It does not remove the need for engineering, but it changes where some conversations happen and how much is left to interpretation. ## The gap static designs leave Static mockups are good at showing layout and visual style. They are poor at showing behaviour: what happens when a list is empty, when a name is very long, when the screen is narrow, when data is loading or when an action fails. Those details are usually discovered during the build, when changing them is more expensive. Engineers fill gaps with their best guess, designers review later, and the cycle repeats. ## What code layers change Code layers let designers prototype interactive states, real data and responsive behaviour with the same material that will eventually ship. A component can be reviewed as it will behave, not only as it will look. This shortens feedback loops. Questions about edge cases surface during design, when they are cheap to answer, rather than during development. > A convincing prototype is not the same as finished software. ## What they do not replace Code in a design file is not production code. Performance, accessibility, security, data handling, testing and long-term maintenance still belong in the codebase, reviewed by engineers. The main risk is treating a convincing prototype as finished software. Clear agreements about what is reference material and what is intended for reuse help avoid that confusion. ## The design system is still the bridge Handoff works best when design and code share a vocabulary. Named tokens for colour, type and spacing, and components that exist in both the design file and the codebase, remain the bridge between the two. Code layers are most powerful when they use those shared components. Then a prototype is not a one-off, but a combination of pieces that engineering already recognises. ## How roles shift Designers who are comfortable with basic code will be able to explore interactions more independently. Engineers can spend less time interpreting static screens and more on the hard problems underneath. Collaboration still matters most. The best results come when designers and engineers review interactive prototypes together, early, and agree on what needs to be built properly. ## Where it helps most Consider a filterable data table. In static frames, a designer would need dozens of screens to show sorting, filtering, empty results, long values and loading states. An interactive code layer can show all of that in one prototype that reviewers can actually use. Complex forms are another good fit, especially those with conditional fields and validation messages that are hard to describe in static frames. ## Keeping it organised As more code appears in design files, teams need simple rules: where prototypes live, how they are named, which ones are current and who maintains them. Without this, files fill up with outdated experiments that confuse everyone. ## How to adopt it Start small. Use code layers for interactions that are hardest to describe in static frames, such as complex forms, data-heavy views or responsive navigation. Agree with engineering which outputs are reference and which are reusable. Keep the design system as the single source of truth, and expand use as the team learns. ## Before you adopt it * Use code layers for interactions that are hard to describe. * Agree what is reference and what is reusable. * Build prototypes from shared design-system components. * Review interactive prototypes with engineers early. ## Building the Vamo design system from a landing page - Link: https://s9studio.com/insights/vamo-design-system/ - Published: 2026-10-14T09:00:00+01:00 - Author: sumitkafre Vamo gives workers direct access to their wages through an FDIC-insured bank account, a Mastercard debit card and $1.99 money transfers, all set up through their employer’s payroll. When we redesigned the Vamo landing page, we quickly saw that the page was carrying decisions a growing product would need again and again: how a headline should feel, which green means “go”, how a feature card is put together. On 9 October we published Vamo Design System V1, built directly from the fourth version of the landing page redesign. This is how we approached it, and what we would do the same way again. ## Why a system, and why now Small teams often postpone a design system until “later”, when the product is bigger. The trouble is that later never gets easier. Every new page made without shared foundations adds another slightly different button, another shade of green, another spacing value. By the time the system arrives, it has to untangle months of drift. Vamo was at a useful moment. The landing page had been through four rounds of redesign and review, so its decisions were tested rather than theoretical. The product team was about to build more marketing pages and in-app screens. Capturing the system at this point meant the next pages would start consistent instead of needing a clean- up afterwards. We also wanted the system to be small enough to be adopted. A large library that nobody uses is worse than a modest one that everybody does. V1 was deliberately scoped to what the landing page actually needed. ## Extracting, not inventing Instead of designing a component library in the abstract, we extracted it from a page that already worked. We went through the landing page section by section and asked the same question each time: is this a one-off, or a pattern we will need again? Navigation, section tags, feature cards, comparison rows, trust badges and call-to-action buttons all passed that test. Anything used only once stayed out. That rule kept V1 honest. Every component in the library has a proven job, a real example and a reason to exist. When the team asks “should this be in the system?”, the answer comes from usage, not from opinion. Extraction also exposed inconsistencies we had not noticed while designing page by page. Two card styles that looked almost identical became one. Several near-identical greys were reduced to a single token. The page itself improved as a result of building the system from it. > Every component in the library has a proven job, a real example and a reason to > exist. ## Colour: five tokens with clear jobs Vamo’s palette has five brand colours: Vamo Dark Blue (#1E2F59), Bright Green (# 95D904), Dark Green (#65A603), Air Green (#E1F2BD) and Gray Light (#F2F2F2). A palette alone does not tell anyone how to use it, so each colour has a role. Dark Blue carries headings and structure, and gives the brand its seriousness. Bright Green is reserved for action and positive outcomes, so it keeps its meaning instead of being used as decoration. Dark Green supports it where more contrast is needed. Air Green creates calm, recognisable backgrounds, as in the security section of the page. Gray Light separates surfaces without adding visual noise. Writing these roles down matters as much as the hex values. It is the difference between a team that picks colours by taste and one that picks them by meaning. ## Type: three roles, one family The type system uses one family, Nimbus Sans, in three clearly defined roles. Nimbus Sans Black is for bold brand statements such as “Your money. Your life.” Nimbus Sans Bold is for screen titles and active text such as “Card Collection” and “Performance Summary”. Nimbus Sans Regular covers body copy, input labels such as username and password, and fine print. Defining roles instead of a long list of sizes makes the system easier to apply. A designer or engineer does not need to remember that a heading is 48 pixels on one page and 44 on another; they need to know whether the text is a statement, a title or body copy. Sizes then follow from the role and the screen. One family in three weights also keeps the brand consistent across very different contexts, from a large campaign headline to the small legal text under a sign-up form. ## How the file is organised The system lives in four pages. The Cover states what the library is, its version and its source: Landing Page Redesign V4. Foundations holds colour, typography and the basic rules. Components contains the reusable web pieces with their states. The Playground is where new layouts are composed from existing components before anything new is added to the library. The Playground turned out to be one of the most useful parts. It gives people permission to experiment without polluting the system. A new section is first assembled from existing pieces. Only if it proves itself, and if it will be reused, does it graduate into Components. Composition rules sit alongside the components. They explain how pieces combine, for example how a section tag, heading and supporting line stack together, so the system describes layouts and not only parts. ## Mistakes we avoided The first is building too much. It is tempting to add every possible variant of a button or card “just in case”. Each one has to be documented, maintained and kept consistent with the rest. Unused variants also make the library harder to navigate, so people fall back to building their own. The second is separating the system from the people who use it. We reviewed V1 with the people who would build the next pages before publishing it, so the names, organisation and rules matched how they actually work. A system that makes sense only to its authors does not get adopted. The third is treating the first version as final. Publishing it as V1, with a date and a source, made it clear that the system would evolve, and that feedback was expected rather than a sign that something had gone wrong. ## Helping the team adopt it Adoption is where most design systems succeed or fail. We kept the entry point simple: the Cover explains what the system is for, and Foundations can be read in a few minutes. Anyone designing a new page starts in the Playground with real components rather than a blank canvas. We also made the source visible. Because every component came from the landing page, people can see exactly how it is meant to be used in context. That is often more useful than an abstract usage guideline. ## What comes after V1 A design system is a product, not a project. V1 is a starting point with a version number, which signals that it will change. New components will be added when real pages need them, and existing ones will be refined as the team learns how they behave in production. The most important habit is to keep the system and the product in step. When a page needs something the system does not have, that need is recorded and reviewed, rather than solved quietly with a one-off. Over time, that discipline is what keeps a brand feeling like one company, even as more people contribute to it. ## What made V1 work * Extract the system from real, reviewed work rather than designing it in the abstract. * Give every colour and type style a written role, not just a value. * Use a playground to compose new layouts before anything joins the library. * Version the system and keep it in step with the product. ## Your website has a new kind of visitor: AI agents - Link: https://s9studio.com/insights/designing-for-agents/ - Published: 2026-10-08T09:00:00+01:00 - Author: sumitkafre A growing share of visits to websites now comes through AI assistants that read pages on someone’s behalf. A person asks an assistant to compare suppliers, find opening hours or summarise a service, and the assistant visits the page instead of them. Trend reports this year recommend designing content so these agents can understand it: semantic HTML, consistent labels and clear structure. The encouraging part is that almost everything that helps agents is simply good web practice, and it helps human visitors too. ## A new kind of visitor Agents do not see a page the way people do. They do not admire a hero animation or notice a clever layout. They read the underlying structure and text, and try to work out what the page is about and what can be done there. If key information is buried in images, spread across interactions or phrased inconsistently, an agent may misunderstand it, and the person relying on that agent receives a poor answer about your business. ## Structure matters again Real headings that describe their sections, lists that are real lists, tables for tabular data, and buttons that are real buttons all help an agent understand a page. They also help screen readers and search engines. This is a return to fundamentals that many sites drifted away from as visual frameworks made it easy to build everything from generic containers. > Most of what helps AI agents is simply good web practice. ## Consistent names for things If pricing is called “Plans” on one page, “Packages” on another and “Options” in the footer, people and agents both get confused. Choose one name for each idea and use it everywhere: in navigation, headings, buttons and URLs. Consistency also improves internal search, analytics and support conversations, because everyone refers to the same thing in the same way. ## Make key facts easy to find Put the important facts in plain, visible text near the top of the relevant page: what you offer, who it is for, where you operate, what it costs if you publish prices, and how to get in touch. Facts hidden inside images, animations or downloadable files are hard for agents to read and often hard for people too. ## Clear, honest actions Agents increasingly try to help people act, not just read. Forms with clear labels, predictable steps and helpful error messages are easier for both agents and people to complete. Avoid deceptive patterns. Hidden costs or confusing opt-outs are bad for people and, increasingly, they are flagged by the tools people use to navigate the web. ## An example: a services page A typical agency services page might show large images with service names inside them and descriptions that appear only on hover. An assistant reading that page may not find the services at all. The same page with each service as a real heading, a short plain description underneath, and a clear link to learn more is easier for an agent to summarise accurately, and easier for people to scan. ## Checking how agents see you Ask an AI assistant to summarise your website, list your services or find how to contact you. Compare the answers with reality. Where they are wrong or vague, look at how that information is presented on the page. Repeat this after changes. It is a simple, practical way to see your site through a new kind of visitor’s eyes. ## Where to start Review your most important pages as text only. If the main message, offer and next step are clear without any visual design, you are in good shape for both agents and people. If not, start there. ## Quick wins * Use real headings, lists, tables and buttons. * Give each idea one consistent name across the site. * Keep key facts in plain, visible text. * Review important pages as text only. ## How to measure the impact of design - Link: https://s9studio.com/insights/measuring-design-impact/ - Published: 2026-10-06T09:00:00+01:00 - Author: sumitkafre Design decisions affect sign-ups, support requests, sales conversations and how quickly teams can build. Yet many projects end without anyone measuring what changed. Without evidence, design becomes easy to cut when budgets tighten. Agreeing what to measure at the start of a project turns design from a cost into an investment with visible returns. Here is the approach we use with clients. ## Start from the business goal Every project should begin with a clear statement of what success looks like for the business. More qualified leads from the website. Fewer people abandoning onboarding. Fewer support tickets about a confusing feature. Faster delivery of new pages. Measures follow from that goal. Without it, teams track whatever is easy to count, which rarely reflects real value. ## Measure the starting point Before changing anything, record where things stand. How many people complete the key task? How long does it take? How often do people contact support about it? How many questions does the sales team answer about a particular feature? Without a baseline, improvement is only an impression. With one, even a modest project can show clear results. > Without a baseline, improvement is only an impression. ## Choose a few measures Pick two or three measures directly linked to the goal. More measures make the picture harder to read and easier to argue about. Combine at least one number with one qualitative signal. Conversion rate tells you what changed; a handful of user interviews tells you why. ## Give changes time Some changes show results quickly, such as a clearer call to action. Others, such as a brand refresh or a design system, take months to show their full effect. Agree in advance when results will be reviewed, so a project is not judged too early or forgotten too late. ## Count the benefits inside the team Some of the most valuable design work pays back internally. A design system can make new screens faster to design, build and review. Clear guidelines reduce rework and debate. Track that time saved. It is often the strongest argument for continued investment in design foundations. ## Examples of useful measures For a website redesign: enquiry rate, quality of enquiries as judged by sales, and time spent on key pages. For onboarding: completion rate and time to complete. For a design system: time to design and build a new page, and the number of design questions during development. For brand work: recognition in surveys, consistency across touchpoints and how confidently the team can produce new materials. ## Pitfalls to avoid Avoid vanity measures that look good but say little, such as total page views without context. Be careful about attributing every change to design when other factors, such as pricing or seasonality, also changed. Where possible, compare against a baseline period or a control group. ## Share the results Report results in plain language, connected to the original goal. What changed, by how much, and what we learned. Share what did not work as well as what did. Honest reporting builds the trust that makes the next project easier to approve. ## Agree before you start * Define the business goal before choosing measures. * Record a baseline before changing anything. * Pick two or three measures, plus one qualitative signal. * Track time saved inside the team as well. ## Accessibility is the baseline, not a feature - Link: https://s9studio.com/insights/accessibility-baseline/ - Published: 2026-10-01T09:00:00+01:00 - Author: sumitkafre Across this year’s product design conversations, one shift stands out. Accessibility is no longer described as a feature or a nice extra. It is increasingly treated as the baseline every interface is measured against, much like performance or security. That is good news for the people who rely on accessible design, and it is also good news for product teams, because accessible products tend to be clearer, faster and easier for everyone. Here is how we approach it in our work. ## Accessibility helps everyone Accessible design is often framed around permanent disabilities, and those needs are essential. But the same improvements help many more people. Clear contrast helps someone with low vision and someone reading their phone in bright sunlight. Captions help people who are deaf and people watching on a noisy train. Large touch targets help people with tremors and people using a phone with one hand on a bus. When teams see accessibility this way, it stops being a niche requirement and becomes part of good usability. ## It is cheapest at the start Fixing accessibility after launch is expensive. Colours have been chosen, components have been built and content has been written. Changing any of them affects many screens. At the start of a project, the same decisions cost almost nothing. Choosing colours that pass contrast, type sizes that scale, layouts that reflow and flows that work with a keyboard is simply part of good design when it happens in the first sketches. > Accessibility is cheapest at the start. ## Content is part of accessibility Accessibility is not only visual. Plain language helps people with cognitive disabilities, people reading in a second language and people who are tired or distracted. Clear headings help screen-reader users navigate and help everyone scan. Link text should make sense on its own. Error messages should explain what went wrong and how to fix it. Instructions should not depend on colour or position alone. These are writing decisions as much as design decisions. ## Structure that machines can read Screen readers, voice control and other assistive technologies rely on the structure underneath the visuals. Real headings, real buttons, labelled form fields and meaningful image descriptions make a product usable for people who navigate without a mouse or without sight. The same structure also helps search engines and the growing number of AI assistants that read pages on people’s behalf. ## Testing with tools and with people Automated tools catch a useful share of common problems, such as missing labels and low contrast. They should run as part of normal development, not only before launch. But tools cannot tell you whether a journey makes sense. Testing key flows with people who use assistive technology reveals problems no checker will find, such as confusing focus order or instructions that only make sense visually. ## Common myths One myth is that accessible design looks plain. In reality, many of the most beautiful products are also highly accessible. Constraints such as contrast and clear structure often lead to stronger, more confident design. Another myth is that accessibility only affects a small number of users. Permanent, temporary and situational disabilities together affect a very large share of people at some point, and older users are a growing audience for almost every product. ## Where to start in an existing product If accessibility has not been a priority, start with the most important journeys, such as sign-up, checkout or contact. Fix keyboard access, contrast, labels and error messages there first. Then move these fixes into shared components so they spread across the product. Set a clear standard for new work so the problem does not keep growing while older parts are improved. ## Making it the default The most effective teams make accessibility part of their everyday standards: in the design system, in definitions of done, in reviews. When it is the default, nobody has to remember to add it at the end. ## Baseline checks * Check colour contrast in every theme and background. * Make every action possible with a keyboard. * Write plain, self-explanatory content and error messages. * Test key journeys with people who use assistive technology. ## A lean tool stack for small product teams - Link: https://s9studio.com/insights/lean-tool-stack/ - Published: 2026-09-30T09:00:00+01:00 - Author: sumitkafre New design and productivity tools launch every week, and many now include AI features that promise to save hours. It is tempting to try them all. For a small product team, though, every extra tool adds logins, subscriptions, handoffs and places for work to get lost. In our experience, small teams move faster with a few well-chosen tools and clear rules for how they are used. ## The hidden cost of more tools Each tool has an obvious cost, its subscription, and several hidden ones. People need to learn it. Work has to move in and out of it. Information gets split between it and everything else. Someone has to manage access when people join or leave. Individually these costs are small. Together they can quietly consume hours every week, especially in teams where the same few people do everything. ## One place for each job Decide where each kind of work lives: one tool for design, one for tasks, one for documentation, one for conversation, one for files. When everyone knows where something belongs, less time is spent searching and asking. Write these decisions down. A short page that says “designs live here, decisions are recorded there” is one of the most useful documents a small team can have. > Removing a tool is as valuable as adding one. ## Evaluate against real work Before adopting a new tool, try it on a real piece of work for a week or two, not a demo project. Note what it actually saves and what it costs in switching and learning. If it does not clearly save time or improve quality, it is not worth the disruption, however impressive the demo was. ## Prefer tools that connect Tools that integrate well with what you already use reduce manual copying and keep information in sync. A slightly less capable tool that fits your stack can be more valuable than a more powerful one that stands alone. ## Retire tools on purpose Every quarter, review what you pay for and what you actually use. Cancel what nobody needs, and move any remaining work into your main tools. Removing a tool is as valuable as adding one. It simplifies onboarding, reduces cost and makes it clearer where work lives. ## An example stack For many small product teams, a lean stack looks like this: one design tool, one task tracker, one shared document space, one messaging tool and one file store. Code lives in a repository connected to the task tracker. Everything else is optional and should earn its place by saving real time on real work. ## Onboarding as a test A good test of your stack is onboarding. If a new team member needs more than a day to understand where everything lives, the stack is probably too complex. Simplify until a short page can explain it. ## A note on AI features Many existing tools now include AI features. Before adding a separate AI tool, check whether the tools you already use cover the need. Often the best AI improvement is the one that appears inside the workflow people already have. ## A simple rule set * Decide one tool per job and write it down. * Trial new tools on real work before adopting them. * Prefer tools that connect to your existing stack. * Review and retire tools every quarter. ## Motion and shaders are becoming design materials - Link: https://s9studio.com/insights/motion-as-material/ - Published: 2026-09-24T09:00:00+01:00 - Author: sumitkafre For years, motion lived in separate tools. Designers drew static screens, then someone opened a different application to animate a few key moments, often near the end of a project. That is changing. Figma Motion, announced at Config 2026, brings a timeline, keyframes and presets directly into the design file, with export to formats including CSS, JSON, React, MP4, WebM, animated SVG and GIF. Shader fills and effects arrived at the same time. Movement and texture are becoming design materials, reviewed alongside layout, colour and type. ## From afterthought to material When motion sits in a separate tool, it tends to be treated as polish. It arrives late, gets cut when deadlines tighten, and is rarely discussed with the same care as layout. When it lives in the same file, motion becomes part of the design conversation from the start. Teams can decide how a panel should open while they are deciding what goes inside it. Transitions are designed for the content they carry, not added on top. ## Better handoff Describing motion in words is hard. “Ease out, slightly bouncy, about a third of a second” can be interpreted in many ways. An exported animation, in a format engineers can use directly, is a far clearer specification. Exporting to code-friendly formats such as CSS and React shortens the gap between design intent and implementation, and reduces the back-and-forth that usually surrounds animation details. > The best motion explains something. ## Every movement needs a job More capability brings more temptation. The most effective motion explains something: where an item came from, what changed, what will happen next, or that an action succeeded. Decorative movement on every element makes an interface feel busy, slows people down and can cause genuine discomfort for people sensitive to motion. A useful test is to ask what a person would miss if the animation were removed. If the answer is nothing, it probably should not be there. ## Texture with restraint Shaders open new expressive possibilities: grain, gradients that shift, light that responds to movement. Used subtly, they can give a brand depth and a sense of craft that flat colour cannot. Used heavily, they compete with content and can affect performance on lower-powered devices. Treat them like a strong spice: a little goes a long way, and the dish should still work without it. ## Put motion in the design system Motion works best when it is systematic. Define a small set of durations, easing curves and patterns, such as how things enter, exit and change state, and reuse them everywhere. This keeps the product consistent and makes it easy to respect reduced-motion settings in one place, by swapping animated transitions for simple fades or instant changes across the whole product. ## Getting timing right Most interface motion should be short. Small transitions often work best in the range of a few tenths of a second; larger movements across the screen can take slightly longer. Anything much slower starts to feel like waiting. Easing matters as much as duration. Movements that start quickly and slow down as they arrive feel natural for things entering the screen; the reverse often suits things leaving. ## Reviewing motion Review motion on real devices, not only in design tools. Frame rates, screen sizes and performance differ. Watch transitions several times in a row, because something that feels delightful once can become irritating on the tenth repetition. ## Getting started Pick two or three moments in your product where motion would genuinely help understanding, such as opening a detail view or confirming a payment. Design those well, document them as patterns, and build from there. ## Guidelines we use * Design motion alongside layout, not at the end. * Give every movement a job: explain where, what or next. * Use shaders and texture sparingly. * Define motion tokens and respect reduced-motion settings. ## One mark, many jobs: designing the Vamo checkmark - Link: https://s9studio.com/insights/vamo-checkmark/ - Published: 2026-09-16T09:00:00+01:00 - Author: sumitkafre Vamo exists to help workers stop paying to use their own money. Many of the people it serves have spent years losing part of every paycheck to check-cashing fees, money orders and expensive transfers. The brand had to earn their trust quickly, feel warmer than a traditional bank, and look confident without making promises the product could not keep. We built the identity around a single, simple idea: a checkmark. Here is why, and how one mark now does many different jobs. ## The brief behind the mark Financial brands tend to fall into two camps. Some look serious and institutional, which can feel distant to people who have been poorly served by banks. Others look playful and casual, which can undermine trust when people are deciding where their wages should go. Vamo needed to sit between the two: dependable and human at the same time. The audience also shaped the brief. Vamo is built for workers in industries such as logistics, cleaning, landscaping and security, many of them Latino. The identity had to be understood instantly, without relying on clever wordplay or culturally specific references. ## Why a checkmark A checkmark is one of the most universally understood symbols. It means complete, approved, correct. That is exactly how getting paid directly should feel: no waiting, no fees, no line at a check-cashing counter. The mark expresses the outcome of the product rather than the mechanics of banking. We drew the checkmark as a folded ribbon in Vamo greens, moving from Bright Green to Dark Green. The fold gives it depth and a sense of motion, so it reads as progress rather than a static tick on a form. Paired with the lowercase “vamo” wordmark, it feels approachable and modern. The name helps too. “Vamo” carries the energy of “let’s go”, and the forward motion of the checkmark reinforces it without needing any explanation. > The idea stays the same while the expression changes. ## Variants for every surface A logo that only works large is not finished. The Vamo mark comes in several arrangements: the full horizontal logo with the wordmark, a stacked version for square spaces, and the checkmark on its own for app icons, favicons and small placements. Each variant was tested at the size it will actually appear. The standalone checkmark, for example, has to stay recognisable at the size of an app icon on a crowded home screen. The ribbon fold is simplified at small sizes so it does not turn into visual noise. We also tested the mark on the brand’s backgrounds: white, Air Green, Vamo Dark Blue and photography. A mark that relies on one perfect background breaks the first time a campaign needs something different. ## Colour that carries meaning Green is an obvious choice for money, which is exactly why it needed care. Vamo’s Bright Green (#95D904) is vivid and optimistic rather than the darker greens used by many banks. It is paired with Vamo Dark Blue (#1E2F59), which brings seriousness and contrast. In the wider system, green is reserved for action and positive outcomes. Keeping the mark’s colour connected to that meaning means every green button and every checkmark across the product reinforces the same idea. ## Room for campaigns A strong, simple mark gives campaigns something to build on. One example is the checkmark minted on a gold coin. The image shows value kept rather than value spent, which is the heart of the Vamo story. The coin works because the core idea stays fixed while the expression changes. The checkmark is still the hero; the material and context tell a new part of the story. That balance lets the brand stay recognisable while it adapts to different messages and channels. ## How the mark was developed We explored several directions before settling on the checkmark, including abstract monograms and symbols based on movement and connection. Each was tested against the same questions. Would the audience understand it instantly? Would it work as an app icon? Could it carry the brand’s optimism without feeling childish? The checkmark answered all three most clearly. From there, the work was about refinement: the angle of the stroke, the depth of the fold, the balance between the mark and the wordmark, and how the gradient behaves at very small sizes. ## Guidelines that protect the mark A mark is only as strong as how consistently it is used. The guidelines define clear space around the logo, minimum sizes for each variant, approved colour combinations, and what not to do, such as stretching the mark, recolouring it outside the palette or placing it on busy backgrounds without contrast. These rules can feel restrictive, but they are what allow many different people, from internal teams to partners and employers, to use the brand without diluting it. ## What we would do again Start from the promise of the product, not from a visual trend. Choose a symbol your audience already understands. Design for the smallest size first. And document the meaning behind colours and shapes, so that everyone who uses the brand later keeps that meaning intact. ## Lessons from the mark * Choose a symbol that carries the promise of the product. * Design variants for the smallest sizes, not just the largest. * Test the mark on every background the brand will use. * Keep the core idea fixed and let campaigns vary the expression.