Loupe Colors

Aroa Gil Bo

Overview

We have some already defined colors ready to be used, which you can use in the canvas or as variables in your code.

Primary Color

The primary color is the color displayed most frequently across your app’s screens and components. It for has an active variant which is used for hovers, active states or accents.

#0055FF #0055FF - primary

#98E7FF #98E7FF- primaryActive


Secondary Color

The secondary color provides more ways to accent and distinguish your product. It has an active variant which is used for hovers, active states or accents.

#FF7744 #FF7744- secondary

#FFC6A8 #FFC6A8 - secondaryActive


Destructive color

The destructive color indicates errors in components, such as invalid text in a text field or actions that might cause a big change.

#A61A14 #A61A14 - destructive

#D4504C #D4504C - destructiveActive


Disabled

The disabled color indicates disabled states.

#C9C7C5 #C9C7C5 - disabled


Background / Surface Colors

Background colors affect surfaces of components, such as cards, sheets, and menus. They can also appear behind content (.e.g behind scrollable content)

#E7FFF7 #E7FFF7- backgroundPrimary

#FFF9DA #FFF9DA - backgroundSecondary

#F3F2F2 #F3F2F2 - backgroundGeneral


“On” Colors

“On” colors are primarily applied to text, iconography, and strokes and are used on top of other colors.

#000000 #000000 - onLight

#8A8A8A #8A8A8A - gray1

#BBBBBB #BBBBBB - gray2

#F3F2F2 #F3F2F2 - gray3

#FFFFFF #FFFFFF - onDark


Alternative colours

Alternative colors can be used to establish themes that distinguish different sections.

#FF0055 #FF0055- alternative1

#AA00FF #AA00FF - alternative2

#00D5FF #00D5FF - alternative3

#2B00FF #2B00FF - alternative4

How to use Shared Colors in Framer?

How to use them in Framer Canvas?

Watch a quick 5 min video here or check out the documentation.

How to use them in Code overrides?

import  { Override }  from  "framer"

import  { colors }  from  "@framer/aroagb.loupe-colors/code/canvas"

export  function  Primary():  Override  {
    return  {
        whileHover:  { background:  colors.primaryActive  },
    }
}

How to use them in a Code Component?

import  { Frame }  from  "framer"

import  { colors }  from  "@framer/aroagb.loupe-colors/code/canvas"

export function Component() {
    return <Frame background={colors.backgroundPrimary}/>
}

Info

  • Version: 1.8.0
  • Updated: about 1 month ago
  • License: MIT

Share

By using our website, you agree to the use of cookies as described in our  Privacy Policy —
I Agree