Figma foundation

Color styles

Brand, grey and state colour ramps as Figma variables, with light and dark modes. The same names as the CSS and Tailwind tokens.

Open in Figma

FreeBrand rampGrey rampState colours

Color styles in FigmaEvery variant and state is in the free Figma Lite file and the full library. Open it in Figma to inspect the layers, properties and tokens.

Open in Figma

All components

TypographyDisplay and text scalesFree Shadows and effectsxs to 2xl elevationFree Grids and spacingDesktop, tablet and mobileFree

ALL COMPONENTS

Browse by category

Every component and style in the library, in one place.

Foundation6 styles

Icons4 stylesProColor stylesBrand, grey and state rampsFreeTypographyDisplay and text scalesFreeShadows and effectsxs to 2xl elevationFreeGrids and spacingDesktop, tablet and mobileFreeDesign annotationsSpecs, pins and redlinesPro

Base components12 components

Buttons6 variants · 5 sizesFreeButton groups4 variantsFreeBadges5 variantsFreeTags3 variantsFreeInputs8 variantsFreeDropdowns6 variantsProCheckboxes4 variantsFreeRadio groups4 variantsFreeToggles3 variantsFreeAvatars6 variantsFreeTooltips4 variantsProProgress indicators5 variantsPro

Start with the free Lite file

Build your next screen with Gridnivo

Every component, in Figma today and React soon. Same tokens, same names, one license.

Buy now

Preview in Figma

Color styles

Related components

Browse by category

Build your next screen with Gridnivo