colorpaper

this c o l o r p a p e r is intended for under, the rnbw team, users, partners, and contributors. its purpose is to provide a comprehensive understanding of the products and services we offer and the activities involved in bringing them to market and effectively reaching our target audience. this is an endless, never-ending process of adjustment and refinement, and so is this document.

note from eden

i enjoy thinking, writing, visualizing, and coding. i am a designer, but i don't mind what people call me. i just focus on doing what i love - creating unique brands and products. as part of my work, i have also built some tools. tools tools tools.

these tools don't just help us make things. they also push the whole tech world to try new things and improve how humans make things, in a never-ending cycle of getting better.

tools are fascinating. we shape them, and then they shape us. there’s something meta in them that i’ve been drawn to since childhood: things that create, musical instruments, modular things, legos. design tools are a crucial element in our everyday lives.

these thoughts and experiences led me down the rabbit hole to the history of software development and design tools.

from xerox's desktop publishing to adobe's pdf and photoshop, and figma's pioneering user interface design, design tools have shaped how we create and collaborate. these tools have guided us through an evolution, leading us to this collaborative design era.

even though we have advanced design tools, many are still built for old print media tasks, not for today's digital screens. this mismatch slows down work because it requires extra steps to turn designs into working digital products.

this problem opens a big chance for us to think differently about how we make and use design tools. by solving this, we can make design and development faster and more connected, which helps everyone create better products quickly.

tim berners-lee, who created the world wide web, mentioned that the first web browser was also an editor. however, it was too early, and it couldn't turn it into a design tool. instead, we needed to write code to make it work. now, things have changed. the limitation is gone. today, browsers can easily be used as design tools—if we want to!

here lies a golden opportunity. we can reinvent how we approach design and software development, allowing us to harness the full potential of both disciplines.

ai's capabilities are set to revolutionize the creation process by essentially automating coding tasks. this shift brings design to the forefront while the development role evolves. this freedom from grunt work lets us focus on the bigger picture. we can focus more on design, driving creation that is faster, smarter, and more efficient than ever.

rnbw.dev

rnbw is a tool designed to make web design and development easier and more effective by integrating design directly with live coding. It is simple enough for anyone, flexible enough for anything, and open enough for anyone to use it anyhow. built with the latest web technologies and ai, rnbw works directly on your local files and doesn’t require complex setups.

being open source, rnbw invites users to contribute to its evolution, making it a community-driven tool. this approach not only enhances the tool's capabilities but also fosters a strong sense of community among its users.

  • rnbw.design - an educational guide for users, developers, and the rnbw product team - it’s the actual product design of rnbw, designed in rnbw.
  • rene.css - rené is a design system for styling clean, simple, lightweight interfaces. it's easy enough to quickly "get it.” no weird stuff. it is both a library and a framework. as a library, it offers ready-to-use elements and styles. as a framework, it gives a consistent and customizable structure for building and styling your apps. it is the ultimate common ground for designers and developers.
  • rfrncs.design- a comprehensive repository that includes csv files containing detailed data on html elements, attributes, css selectors and more. (https://github.com/rnbwdev/rfrncs)
  • raincons- 12x12 icons designed for clean, minimal, and info-rich interfaces. by the rnbw team.
  • svg-icon.js / github - web component for svg icons. works without or with any web framework and for any purpose. optimized for smooth design and development workflow (built by the rnbw team for rnbw).

concepts

at rnbw, no detail is too small. to truly excel, we need to be significantly better, not just a little bit better. we value every minute detail because they all contribute to creating something exceptional. we dedicate extra time to perfecting things that may only be noticed by a few, but we know that it's the sum of all these tiny details that ultimately make a big difference.

  • files
    • zero-latency browser-desktop files synchronization
    • save / autosave
  • elements
    • zero-latency design-code synchronization
    • drag and drop
    • settings
      • styles
  • styles
  • design
    • zero-latency design-code synchronization
    • live preview
    • multiple selection
    • multi-level navigation
    • drag and drop
    • text editing
  • code
    • zero-latency design-code synchronization
    • contextual highlighting
  • command menus
    • jumpstart [J]
      • search
      • open
      • recent
      • help
      • settings
    • add something [A]
      • add files
      • add elements
      • ai-powered
    • do something [W]
      • control files
      • control elements
      • ai-powered
    • ask something [CMD]+[?] - ai powered
  • history management system - the history management system in rnbw tracks specific events. it allows users to return to previous states or come back to the current state after visiting a previous one. this helps in navigating changes or updates within the system effectively.
  • api-first approach - enables custom actions, extensions, and integration with other tools and services. enables ai-context.

wait but why

brand story - people think rainbow is just half circle, but the truth is a rainbow is a full circle. surprising, right? when we usually see a rainbow, it's from the ground and our horizon limits our view to just a half-circle or arc. but if you ever get a chance to see a rainbow from an airplane, or from a high mountain, you'll see it's a complete circle. this is due to the raindrops scattering light in every direction, and it's only our perspective on the ground that limits our view.

like a rainbow, the whole world of design and development often goes unseen. we get tangled up in tiny details, forgetting the big picture.

design and development are two sides of the same coin, not separate worlds. but for so long, we've treated them as if they were. here's the big secret - design is the practice of creation, and development is the process of realization, bringing those creations to life.

with rnbw, we're highlighting this hidden truth. we're showing the whole rainbow, not just half. by bringing together design and development, we're making creating for the web easier, more natural, and more effective.

welcome to the age of full-circle creation.

welcome to rnbw.
brand bible - a detailed overview of branding strategy and brand identity assets
rnbw.company - corporate website

it’s a business problem

imagine you're launching a company with a groundbreaking app idea that solves a real-world issue. traditionally, the design and development stages are distinct—designers map out the interface, then developers interpret these designs into code. this separation often leads to miscommunication and inefficiencies, impacting user experience and squandering resources.

rnbw doesn't just bridge the gap - it eliminates it by merging design and code into a unified workflow. in rnbw, design is code and code is design. this seamless integration accelerates the development process by allowing changes to be visualized and implemented in real time. the result is a dynamic, collaborative environment where modifications on the design front instantly reflect in the code and vice versa.

this approach not only streamlines production but also enhances collaboration among team members, ensuring that the final product faithfully represents the initial vision without the typical losses in translation.

the original sin

today's design tools claim to offer a "single source of truth" for a product's design system. however, it raises the question of where the actual truth lies. is it in the designs created using these tools? or does it lie in the code used by developers to build the application? or, perhaps, do the tools that bridge design and code represent a third, separate truth?

most of today's design tools are built on a wrong idea: that design and development live in separate, imaginary worlds. but if design lives in too many different worlds, none of which are the actual code running on people's devices, it can never reach a 'single source of truth.

some people believe that website builders can help solve the problem of building a website, but in reality, they are just tools for building websites and not for designing them. these builders are suitable for creating simple websites, but not for web applications that require a more flexible and advanced user interface to handle their complexity. unfortunately, website builders are not capable of providing such advanced user interfaces.

here we are still struggling with the same old issue, searching for a single source of truth. since no tools effectively support this, it ultimately depends on personal communication.

source of truth

with rnbw, we no longer need a 'single source of truth.' sounds meh? let me explain. in this world, design doesn't just exist - it thrives right in the heart of production.

no more juggling multiple mediums trying to match design with code. in this world, designers feel right at home in a straightforward design environment. but there's a twist. they're not just sketching pictures – they're shaping the actual thing!

and while they do that, code is being cooked up in the background and blended into the development. magic, isn't it?

what’s the secret sauce? a refreshingly simple design experience that is also a development environment. designers own their designs and have the power to shape the live product.

updates happen in the blink of an eye. no more waiting for developers. design is instant.

product teams no longer need to trade off product quality. they can deliver an exceptional user experience. everyone involved in the product cycle can see, touch, and interact with the product in real-time, visually, and in context.

i design. therefore, i code

designers today are changing. they're becoming swiss army knives, masters of many trades, and the market loves it—the demand for these designer-developer hybrids has spiked.

there's a massive low and no code category expected to grow, changing the entire software development space as the barrier to becoming a developer is very low thanks to ai and automation.

industry giants like facebook, google, and airbnb recognize the power of design and design systems. they're hiring top talent and developing internal tools to keep these systems strong and effective.

but what about the others? big enterprise companies are pouring time and money into trying to keep up. picture teams spread across the globe, facing talent shortages, isolated offices, and tricky time zones. enforcing consistent design systems is a challenge.

then there are the small fries - freelancers, code-savvy designers, design-savvy coders, lean startups, and fast-growing young companies. they don't have the resources to focus on design systems. these systems, if they exist at all, are often half-baked, leading to problems down the line.

Here's an expanded and more engaging version of the "The Web is Now Amazing" section, providing more details about each advancement, especially focusing on the widespread adoption of web components:

the web is now amazing

the web continues to evolve rapidly, driven by significant advancements in web standards and technologies. here’s a closer look at some of the most impactful updates, enabling something like rnbw.

  1. css updates - modern css features like css grid and subgrid have revolutionized web design, allowing developers to create more complex and responsive layouts that maintain consistency across different browsers. these tools help in building layouts that adapt to various screen sizes and devices effortlessly (mdn web docs).
  2. interop 2023 - this initiative aims to enhance how well web features work across different browsers. by focusing on interoperability, interop 2023 helps ensure that users have a uniform experience no matter their choice of browser, reducing the headaches for developers when testing across platforms (mdn web docs).
  3. html and dom api enhancements: ongoing improvements to html and dom apis have made web pages more interactive and dynamic. these enhancements allow developers to implement advanced functions and effects, enriching the user interaction without compromising performance.
  4. web components - web components represent a major leap in creating reusable and maintainable design systems and web applications. these encapsulated elements can be used across different projects and websites, significantly speeding up development times and reducing errors. their adoption has become a standard practice among both large corporations and small startups, underlining their effectiveness in modern web development.
  5. performance improvements - advances in browser technology and coding standards have led to faster web pages that are more efficient to run. these improvements not only enhance user satisfaction by providing quicker interactions but also contribute to better seo as page speed is a critical factor in search engine rankings.
  6. progressive web apps (pwas) - pwas use modern web capabilities to deliver app-like experiences to users. they can work offline, receive push notifications, and access device hardware, which positions them as a powerful alternative to traditional mobile apps. this technology enhances the user experience dramatically by making web applications behave more like native apps.
  7. the file system access api - a significant web standard implemented in chrome that enhances the capabilities of web applications to interact with files locally on a user's device. this api allows web apps to read or save changes directly to files and folders on the user’s device, once the user has granted permission. this is particularly useful for desktop applications which can benefit from native-like file handling capabilities.

design-as-code

"what's the secret sauce?" - it’s design-as-code. it's a unique design approach that's built into a design tool, powered by code from the ground up, which uses a two-way design-code engine. this approach eliminates the need for handoff and traditional design platforms. with a perfect blend of simplicity, flexibility, and openness, it’s a game-changing solution for design professionals.

fast, zero latency, two-way design<>code synchronization. this means that you can make changes on one side and see the result immediately on the other side without any delay or interruption. speed is crucial in this process, whether you are loading a page, adding or modifying elements, or making an api call. our goal is to boost performance and reduce response times, always striving to enhance speed and prioritize user convenience over our ease of development.

simple enough for anyone

our goal is to make it easy and fun for designers and anyone to use our product, so we keep the barrier to entry low.

  • create instantly. edit as if you’re in a design tool you’re familiar with.
  • beyond exceptional user onboarding experience, the most accessible guide and documentation are available. the guide, documentation, and design are the same thing.
  • user input is achieved through command menus, prompts, keyboard shortcuts, and straightforward gestures, ensuring a smooth workflow.
  • you’re editing the live thing. there’s no “going from design to production”. the design is already in production.

flexible enough for anything

create whatever is possible with code. the ceiling is endless.

  • create anything - websites, apps, and design systems using popular libraries or your code.
  • files, files, files. it’s html, css, js. go wild.
  • local-first. open any plain html/css/js and start editing it. there’s no cloud. no need for the fastest computer, no need for an internet connection.
  • work with your tools. enjoy the power of git.
  • scale to any needs.
  • modular, built-to-fracture, and connected with anything. users can contribute to the development and/or customize the platform for their needs.

open enough to use anyhow

  • for everyone, everywhere.
  • free to use. you own the files.
  • design with instant html/css/js. the world is in your hands. forever.
    • sustainability and longevity - it’s the good ol’ web.
  • api-first approach - enables integration with other tools and services.
  • integrated with anything. use anyhow. really

who is it for

  1. design teams in enterprise and hyper-growth saas environments - product designers, front-end developers, project managers, and vps - deal with complex scaling design systems, expanding teams, and continuously evolving design practices, often in global and remote settings.
  2. agencies, freelancers.
  3. students, and educational institutions.

here is a comparison list of various tools, each of which is given specific focus.

Who

For

Simple

Flexible

Open

rnbw 🌈

Developers

Designers

People

Code

AI

Design

Text

● ●

● ● ●

VSCode

Developers

Code

Git

Extensions

● ●

● ● ●

Figma

Designers

People

Text

Vector

Design

○ ○

○ ○ ○

Webflow

Designers

People

Design

○ ○

○ ○ ○

Notion

People

Text

Extensions

AI

○ ○

● ● ●

use cases

design systems

a company needs to keep the same design across many web apps. with rnbw, designers make web components in the tool, setting styles, behaviors, and interactions. these components turn into live code right away, which developers can use without having to change or rewrite them. a big company has a complex design system that often needs updates. rnbw helps by letting designers edit and design directly in the system, where changes turn into code and get documented right away.

  • consistency - keeps the look and function the same across all digital products.
  • efficiency - cuts down on the back-and-forth usually needed between designers and developers, making the production cycle faster.
  • scalability - makes updates and changes easy, and they automatically reach all apps using these components.
  • empowerment - gives designers more control and lets them make changes without waiting for development, letting them have more say in the product.
  • compliance - makes sure all parts meet the newest standards and practices, as updates are quickly shared.
  • centralization - keeps all design parts in one place, making it easy to manage and update.

collaboration

think about a fast startup where designers and developers need to work together. by embracing files as the source of truth, rnbw enables both designers and developers to see and change the same things.

  • transparency - both teams see changes right away, helping them understand each other's work better.
  • agility - teams can quickly make changes based on feedback, shortening the time from idea to use.
  • accuracy - lets both teams work in the code environment. when the design is the final product, there’s no need to make sure the final product matches the design.

ai-assisted design

a design team needs to make a complex user interface that changes based on how users behave. using rnbw's ai features, designers can put in user scenarios, and the system will suggest and make design changes on its own.

  • innovation - uses ai to find new solutions and options.
  • speed - makes designing faster by doing routine tasks on its own.
  • personalization - makes the user experience better by changing designs to meet different user needs well.

get started

integrating rnbw into your workflow is straightforward, and here's how you can begin:

technical requirements

to ensure a smooth integration and optimal performance of rnbw, please make sure you meet the following technical requirements:

  • compatible operating system (os): windows 10, macos catalina, or later, and modern linux distributions.
  • recommended browser: latest versions of chrome or edge.
  • minimum ram: 4gb (8gb recommended for best performance).
  • sufficient storage space for installation and project files.

if you have any technical issues or need support, our dedicated team and community are always ready to assist you.

join the community

being part of the rnbw community opens up a wealth of knowledge and collaborative opportunities. you can get involved by:

  • forums - join discussions, share your experiences, and connect with other users at rnbwdev/forums.
  • social media: follow us on twitter, linkedin, and instagram for the latest updates and insights.

participate in the conversation

your input is invaluable to us as we continuously improve rnbw. participate in ongoing discussions about the future of web design and development by:

  • feedback sessions: provide your feedback on new features and improvements.
  • beta testing: join our beta testing program to get early access to new tools and features.

we encourage you to download rnbw, connect with our vibrant community, and start shaping the future of the web today! your journey with rnbw is just beginning, and we can't wait to see what you'll create.