Learn Design System

  • Introduction
  • Inputs
  • Utils

Fundamentals

General

Inputs

Layout

Navigation

Modals

The Learn Design System package includes a set of Shared Colors.

ColorCode
Primaryrgba(0, 86, 254, 1)
Secondaryrgba(3, 175, 232, 1)
Accentrgba(255, 67, 102, 1)
Warnrgba(255, 171, 87, 1)
Lightrgba(255, 255, 255, 1)
Neutralrgba(217, 217, 237, 1)
Darkrgba(59, 59, 104, 1)
Darkerrgba(19, 19, 22, 1)
Borderrgba(203, 203, 220, 1)
Activergba(23, 23, 39, 0.2)
Shadowrgba(37, 37, 45, 0.09)
Glowrgba(255, 255, 255, 0.68)

Canvas

On the Framer X canvas, you can select from these colors in the color selector under the Shared Colors dropdown.

Code

In your component code or overrides, you can access the package's colors by importing them as shown below.

// Overrides
import { Override } from "framer"
import { colors } from '@framer/steveruizok.education/code/'

export function ColorExample: Override {
  return {
    background: colors.Primary,
    border: `1px solid ${colors.Border}`
  }
}