📂
Design
  • Design and Interaction System
  • Designing for MR
    • Introduction - Design for MR
    • Content Placement in Mixed Reality
    • User's State of Experience
  • Visual Design
    • Introduction - Visual Design
    • User Interfaces in Mixed Reality
    • Scale, Depth & Size
    • Theme System
      • Color System
      • Typography
      • Shape System
      • Transition System
    • Components of Tesseract Mixed Reality Design
      • Typography
      • Button
      • Progress Indicator
      • Radio Button
      • Check Box
      • Keyboard
      • Toggle Button (Switch)
      • Video View
      • Voice UX
      • Canvas
      • Image View
      • Text View
      • Slider
      • Scroll View
      • Dialog Box
      • Dropdown
      • Pointer
      • Input Field
      • Search Bar
      • Tool Tip
  • Interaction Design
    • Introduction - Interaction Design
    • Multimodal Interactions
    • Voice
    • JioGlass Controller
    • Navigation System
      • States
      • Transitions
Powered by GitBook
On this page
  • Color
  • Typography
  • Shape
  • Transition
  1. Visual Design

Theme System

PreviousScale, Depth & SizeNextColor System

Last updated 3 years ago

Themes help to customize our design to match the look and feel of our brand with built-in guidance for customizing colors, typography and shapes.

Color

This color system is a structured approach to applying color to an UI. Global color styles have semantic names and defined usage in components – primary, secondary (brand colors), surface, background, and error.

Every color has a complementary color for elements placed “on” top of it to promote consistency and accessible contrast.

Typography

Important attributes of Typography, such as the typeface, font weight, and letter case, can be modified to match your brand and design.

Shape

Shape can help direct attention or identify components, communicate their state, and express your brand.

These global styles provide the user to quickly change the shape of similar-sized components in one go.

Transition

Transitions can help guide the user attention from one point to another through an animation. It gives intelligent feedback based on the user's behavior, keeps the UI feeling alive, and guides the user to navigation through your app.