FloatGrids Documentation
  • 🌍Go to floatgrids.com
  • 💬Get support on Discord
  • GETTING STARTED
    • Installation
    • Overview
    • Figma file
    • Demo
    • XR UI design guidelines
    • Tutorials
  • Features
    • Customization Overview
    • Color Palette
    • Typography
    • Corners
    • UI Components
    • Icons
    • Logo
    • UX Resources
  • UI Components
    • Overview
    • Alert
    • Badges
    • Button
    • Card
    • Checkbox
    • Contextual Menu
    • Divider
    • Dropdown
    • Empty State
    • Keyboard and keypad (WIP)
    • List
    • Navigation
    • Modal
    • Panel
    • Profile Image
    • Progress
    • Radio Group
    • Slider
    • Text Field
    • Table
    • Tooltip
    • Toggle
  • Views
    • Onboarding View
    • Gallery View
    • Sidebar view
    • Settings View
    • Navbar Panel
  • Layouts
    • Layouts
Powered by GitBook
On this page
  • FloatGrids color palette
  • Tokens
  • Tokens in Figma and Unity
  • Base colors
  • How to create your own base colors

Was this helpful?

  1. Features

Color Palette

Token based color palette in both Figma and Unity.

PreviousCustomization OverviewNextTypography

Last updated 1 year ago

Was this helpful?

FloatGrids uses a token-based color palette so every token has a base color as a parent. You can find this color palette under the same nomenclature in both Figma and Unity.

FloatGrids color palette

Tokens

Tokens in Figma and Unity

Color palette in Unity
Color palette in Figma

Base colors

How to create your own base colors

Reduce saturation for good contrast

Colors tend to be brigther in VR than they are in desktop or mobile devices. If your Primary color (500) looks too bright in Unity, in the link provided above, go to Edit/Saturation/All Shades and reduce the saturation. Make some tests in Unity to see the actual result

Get a 10 color range color palette .

here
Generated color palette
In the Edit page, reduce the saturation if the Primary was too shine