Voit Docs
  • Read Me
  • Introduction
    • Get Started
  • Design Language
    • Philosophy
  • Accessing The Design System
    • Using Variables
  • Structure Overview
  • Accessibility & Inclusivity
  • Guidelines
    • Design tokens
  • Components
    • Overview
    • Accordion
    • Aspect Ratio
    • Badge
    • Breadcrumb
    • Button
    • Tab Button
    • Tile Button
    • Card (Header, Footer)
    • Checkbox
    • ComboBox
    • Digit Entry
    • Dimming Overlay
    • File Drop
    • Index Bar
    • Info Label
    • Inline Message
    • Link
    • List Item
    • List Tree
    • Page Control
    • Pagination
    • Popover
    • Progress Bar
    • Progress Indicator
    • Radio
    • Segmented Control
    • Select
    • Shortcut
    • Slider
    • Stepper
    • Switch
    • Tag
    • Text Area
    • Text field
    • Toast
    • Tooltip
    • Tool Bar
  • Legal
    • Terms & Conditions
    • Contact US
    • License Agreement
    • Feedback
Powered by GitBook
On this page
  • Core Elements
  • Adaptivity

Design Language

The VOIT design system is based on the concept that great design is invisible. It does not draw attention to itself; it just operates.

Our design language emphasizes clarity, efficiency, and purpose, resulting in experiences that let the user flow effortlessly. It creates a harmonious relationship between on-screen elements, guaranteeing clarity through legible, predictable UX and ensuring that the Ul supports content rather than competing with it.

Core Elements

  • Typography: We use a custom-designed font across VOIT. It's clean, legible, and adapts beautifully across device sizes and types.

  • Color: Our color palette is bold yet balanced. The Intelligent Color System ensures optimal contrast and harmony in any environment, automatically adjusting for accessibility.

  • Layout: VOIT's layout system is built on a flexible grid that adapts to different screen sizes and orientations. Our Predictive Layouts go a step further, anticipating user needs and adjusting in real-time.

  • Icons: VOIT icons are simple, recognizable, and consistent. They communicate function clearly without unnecessary ornamentation.

  • Motion: Motion in VOIT is purposeful. It guides attention, explains changes, and adds a sense of physicality to digital interactions.

Adaptivity

VOIT isn't just responsive; it's adaptive. It doesn't just resize; it reimagines layouts for different devices and contexts. An app built with VOIT feels native whether it's on a smartphone, tablet, or desktop. The VOIT design language isn't a set of rigid rules. It's a system of principles and tools that empower you to create experiences that are unmistakably innovative, yet uniquely your own.

PreviousGet StartedNextPhilosophy

Last updated 7 months ago