STEP 1
Outline your entire design system. Fetch and automate changes.
Configure your design system from scratch or from a design file (e.g Figma), including colour tokens, themes, icons, fonts and more. Reference these tokens in your code to streamline the project’s design to development, with reduced lines of code.
No-code tools and menus make it easy to configure and maintain your design system
Switch between editor, docs and code view
Real-time changes made to both the dev version of your web project and UI kit
Auto generated and configurable type scale for both typography & spacing
Reference your design system tokens and reduce lines of code
STEP 2
Organise and filter components by tags and categories
Preview and interact with components before adding them to project
Easily discover components by search (coming soon)
Favourite your most popular components
Zoom in and out of library to see more or less components in the same space
STEP 3
Build anything from landing pages to saas applications
Access 500+ 100% customisable Symbols components
Use built in code editor or CLI with VS Code
Real-time preview as you make changes
Collaborate with other developers and designers
Multi-branding functionality out of the box
Automate branding changes including colours, themes, spacing and more
Preview in different global themes including light & dark modes
Switch between projects to see design system changes
Explore how future design changes will impact your UI kit
STEP 5
Store & review files and functions. Reuse whenever you need.
Name your files and functions to reference as reduced lines of code
Inspect and preview code & files
STEP 6
Test your entire project, from pages down to the individual components. Confirm all is functioning and looks as intended.
Responsive device & sizes, with individual or all device comparisons and freeform
Breakpoints
Global themes including light & dark mode
Left to right accessibility
STEP 7
Use the platform as design system documentation
Avoid the hassle of creating and maintaining your style guide, as the platform will handle this for you as you make changes to your project.
FINAL STEP
Changes made instantly to dev version
Revert to previous changes with version history (coming soon)
Supercharge your tech stack. Retain full control.
Empower your existing tech stack with flexible and powerful ways of integrating it with Symbols.
ROADMAP
LIFETIME DEALS
Forever Free
For hobbies and side projects
$0
1 editor
Unlimited projects
1 workspace
Unlimited view users
Open-source
Design System
500+ Symbols components
(and growing)
Brandbook and preview
Real Time collaboration
99.99% uptime
Developers documentation
CLI tool
Help center
Community chat
Startup
Perfect for startups that want unlimited editor users
$100
/ $49 pm
Including Forever Free plan
1 project
Unlimited editor users
Premium components
Pages
Functions
CMS (coming soon)
Secrets
NPM & js Deliver packages (soon)
Version history (soon)
Development and production environment
Syncing to local project
Two-way syncing to local project (soon)
Custom domain (soon)
.symbo.ls subdomain (soon)
Export in HTML, React, jQuery (soon)
Figma integration (planned)
Cloudflare hosting
Custom integrations (soon)
5gb file storage per project
100k monthly website visitors
60 minutes call with our team
Priority support
Agency
Perfect for agencies that want unlimited projects
$100
/ $49 pm
Including Forever Free plan
Unlimited projects
1 editor user
Premium components
Pages
Functions
CMS (coming soon)
Secrets
NPM & js Deliver packages (soon)
Version history (soon)
Development and production environment
Syncing to local project
Two-way syncing to local project (soon)
Custom domain (soon)
.symbo.ls subdomain (soon)
Export in HTML, React, jQuery (soon)
Figma integration (planned)
Cloudflare hosting
Custom integrations (soon)
5gb file storage per project
100k monthly website visitors
60 minutes call with our team
Priority support
FAQ