@atlr-dsgn/rhythm v0.2.1

Rhythm© Color System

Rhythm® Color System

Developed by AtelierDesign®– for use with Stitches and Radix-UI Components.

Installation

yarn add @atlr-dsgn/rhythm

or

npm install @atlr-dsgn/rhythm

Usage

Import Rhythm® into your project.

import { colors } from '@atlr-dsgn/rhythm'

Then use the system as tokens.

import { styled } from '@stitches/react';

const Background = styled('div', {
    backgroundColor: '$razz5',
    color: '$ghost12'
});

Example Component

import React from 'react';
import { Text } from 'atelier.design';


export const RhythmExample = () => {
  return (
    <>
      <Text css={{ color: '$moon9' }}>
        Hi, from Rhythm® Color
      </Text>
    </>
  )
};

The Colours

R = $raspberry or $razz

H = $heaven

Y = $yllw, $yello, or $yellow

T = $tango

H = $heliotrope or $helio

M = $mauve

C = $capri

Copyright © 2022 Atelier Design Yield®

MIT License