Search

Getting Started

Welcome

Introduction

key benefits

Use cases

Symbols vs other tools

Sign-up & create a project

Configure & install

General workflow

Navigating Symbols

Ways of coding

Configure platform

Security

Tools & topics

Shortcuts

Collaborate & share

Responsive

Editor

Testing tools

Documentation tools

Style guide

Dev version

Publish

Version control

Account settings

Design System

How to configure & use design system

Workflow tips

Colours

Themes

Typography

Unit

Sequence

Font

Media Queries

Animation

Timing

Spacing

Shape

Icon

Responsive

Grids

Timings

Cases

Pages

Library

Platform: Create & use pages

Developer: Create & use pages

Components

Symbols library

Library

Platform: Create & use components

Developer: Create & use components

Component examples: Atoms

Functions

Library

Create & use functions

API

Overview

Element

Properties

Properties library

State

Files

Library

Create & use files

Dependencies

Create & use dependencies

Secrets

Create & use secrets

External

Local by CLI / VS Code

Github

Export project

Domain

Support

Contact Us

FAQ

Troubleshoot

Video tutorials

Submit Feedback

Terms of use

Privacy Policy

On this page

Colours

Learn how to create & use colours with the design system page.

Learn how to create & use colours with the design system page.

Learn how to create & use colours with the design system page.

Overview tutorial on using colours in design system

On this page

On this page

The colours design system page houses all the colours, themes, shadows, gradients and global themes, such as light & dark modes. Use it to both automate and reference colour related changes across your UIkit, to maintain branding consistency across your web project.

The most common use cases for Symbols are:

  • Build UIkits / design systems: components, pages style guide, functions etc.

  • Building web applications: SaaS products, internal tools & integrations, customer portals, etc.

  • Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

These use cases are distinct, yet they share many similarities and overlapping requirements. Enhancements in one area often directly benefit others. Symbols leverages this commonality, providing a unified visual platform and a single source of truth for all.

Learn more about each use cases by following the above links.


The most common use cases for Symbols are:

  • Build UIkits / design systems: components, pages style guide, functions etc.

  • Building web applications: SaaS products, internal tools & integrations, customer portals, etc.

  • Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

These use cases are distinct, yet they share many similarities and overlapping requirements. Enhancements in one area often directly benefit others. Symbols leverages this commonality, providing a unified visual platform and a single source of truth for all.

Learn more about each use cases by following the above links.


How to use Colours

1) Click + to add Colour

2) Reference token name in your code


Add all the colours that you plan on using for your UIkit in the DS colours page, and reference the token names in your code as seen in the below examples.


Tip! Apply general changes to any component that references the same token

The most common use cases for Symbols are:

  • Build UIkits / design systems: components, pages style guide, functions etc.

  • Building web applications: SaaS products, internal tools & integrations, customer portals, etc.

  • Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

These use cases are distinct, yet they share many similarities and overlapping requirements. Enhancements in one area often directly benefit others. Symbols leverages this commonality, providing a unified visual platform and a single source of truth for all.

Learn more about each use cases by following the above links.


The most common use cases for Symbols are:

  • Build UIkits / design systems: components, pages style guide, functions etc.

  • Building web applications: SaaS products, internal tools & integrations, customer portals, etc.

  • Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

These use cases are distinct, yet they share many similarities and overlapping requirements. Enhancements in one area often directly benefit others. Symbols leverages this commonality, providing a unified visual platform and a single source of truth for all.

Learn more about each use cases by following the above links.


Code example in design system:


Platform

The most common use cases for Symbols are:

  • Build UIkits / design systems: components, pages style guide, functions etc.

  • Building web applications: SaaS products, internal tools & integrations, customer portals, etc.

  • Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

These use cases are distinct, yet they share many similarities and overlapping requirements. Enhancements in one area often directly benefit others. Symbols leverages this commonality, providing a unified visual platform and a single source of truth for all.

Learn more about each use cases by following the above links.


The most common use cases for Symbols are:

  • Build UIkits / design systems: components, pages style guide, functions etc.

  • Building web applications: SaaS products, internal tools & integrations, customer portals, etc.

  • Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

These use cases are distinct, yet they share many similarities and overlapping requirements. Enhancements in one area often directly benefit others. Symbols leverages this commonality, providing a unified visual platform and a single source of truth for all.

Learn more about each use cases by following the above links.


{
  color: {
    oceanblue: '#123',
    cta: ['blue', 'white'], // color-on-light, color-on-dark
    warning: 'yellow'
    error: 'red',
    reference: '--oceanblue'

Copy code

{
  color: {
    oceanblue: '#123',
    cta: ['blue', 'white'], // color-on-light, color-on-dark
    warning: 'yellow'
    error: 'red',
    reference: '--oceanblue'

Copy code

{
  color: {
    oceanblue: '#123',
    cta: ['blue', 'white'], // color-on-light, color-on-dark
    warning: 'yellow'
    error: 'red',
    reference: '--oceanblue'

Copy code

DOMQL via CLI

The most common use cases for Symbols are:

  • Build UIkits / design systems: components, pages style guide, functions etc.

  • Building web applications: SaaS products, internal tools & integrations, customer portals, etc.

  • Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

These use cases are distinct, yet they share many similarities and overlapping requirements. Enhancements in one area often directly benefit others. Symbols leverages this commonality, providing a unified visual platform and a single source of truth for all.

Learn more about each use cases by following the above links.


The most common use cases for Symbols are:

  • Build UIkits / design systems: components, pages style guide, functions etc.

  • Building web applications: SaaS products, internal tools & integrations, customer portals, etc.

  • Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

These use cases are distinct, yet they share many similarities and overlapping requirements. Enhancements in one area often directly benefit others. Symbols leverages this commonality, providing a unified visual platform and a single source of truth for all.

Learn more about each use cases by following the above links.


import { init } from 'smbls'

init({
  color: {
    oceanblue: '#123',
    cta: ['blue', 'white'], // color-on-light, color-on-dark
    warning: 'yellow'
    error: 'red',
    reference: '--oceanblue'

Copy code

import { init } from 'smbls'

init({
  color: {
    oceanblue: '#123',
    cta: ['blue', 'white'], // color-on-light, color-on-dark
    warning: 'yellow'
    error: 'red',
    reference: '--oceanblue'

Copy code

import { init } from 'smbls'

init({
  color: {
    oceanblue: '#123',
    cta: ['blue', 'white'], // color-on-light, color-on-dark
    warning: 'yellow'
    error: 'red',
    reference: '--oceanblue'

Copy code

Code example in component:


Platform

The most common use cases for Symbols are:

  • Build UIkits / design systems: components, pages style guide, functions etc.

  • Building web applications: SaaS products, internal tools & integrations, customer portals, etc.

  • Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

These use cases are distinct, yet they share many similarities and overlapping requirements. Enhancements in one area often directly benefit others. Symbols leverages this commonality, providing a unified visual platform and a single source of truth for all.

Learn more about each use cases by following the above links.


The most common use cases for Symbols are:

  • Build UIkits / design systems: components, pages style guide, functions etc.

  • Building web applications: SaaS products, internal tools & integrations, customer portals, etc.

  • Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

These use cases are distinct, yet they share many similarities and overlapping requirements. Enhancements in one area often directly benefit others. Symbols leverages this commonality, providing a unified visual platform and a single source of truth for all.

Learn more about each use cases by following the above links.


{
  props: { background: 'cta'

Copy code

{
  props: { background: 'cta'

Copy code

{
  props: { background: 'cta'

Copy code

DOMQL via CLI

The most common use cases for Symbols are:

  • Build UIkits / design systems: components, pages style guide, functions etc.

  • Building web applications: SaaS products, internal tools & integrations, customer portals, etc.

  • Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

These use cases are distinct, yet they share many similarities and overlapping requirements. Enhancements in one area often directly benefit others. Symbols leverages this commonality, providing a unified visual platform and a single source of truth for all.

Learn more about each use cases by following the above links.


The most common use cases for Symbols are:

  • Build UIkits / design systems: components, pages style guide, functions etc.

  • Building web applications: SaaS products, internal tools & integrations, customer portals, etc.

  • Building websites: landing pages, personal portfolios, blogs, marketing websites, online stores

These use cases are distinct, yet they share many similarities and overlapping requirements. Enhancements in one area often directly benefit others. Symbols leverages this commonality, providing a unified visual platform and a single source of truth for all.

Learn more about each use cases by following the above links.


const ButtonCTA = {
  props: { background: 'cta'

Copy code

const ButtonCTA = {
  props: { background: 'cta'

Copy code

const ButtonCTA = {
  props: { background: 'cta'

Copy code

If you have any questions or need assistance, please don't hesitate to contact our support team at support@symbols.app

If you have any questions or need assistance, please don't hesitate to contact our support team at support@symbols.app

If you have any questions or need assistance, please don't hesitate to contact our support team at support@symbols.app