Learn Design System

Colors

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}`
  }
}