Revel
GitHub
GitHub
  • Overview

    • Getting started
    • FAQ
    • Release notes
  • Foundations

    • Meet the standard
    • Accessibility
    • Internationalization
    • Information hierarchy
    • Speed
  • Design

    • Visual principles
    • Colors
    • Space
    • Icons
    • Typography
  • Design tokens
  • Style helpers
  • Content

    • Express your ideas
    • Actionable language
    • Inclusive and accessible language
    • Alternative text
    • Grammar and mechanics
      • Basics
      • Capitalization
      • Dates and units of measurement
      • Punctuation
  • Components

    • Alert
    • Avatar
    • Badge
    • Button
    • Button group
    • Checkbox
    • Date Input
      • dates
      • datetimes
      • ranges
    • Field group
    • File upload
    • Flex
    • Grid
    • Icon
    • Image
    • Input
    • Loader
    • Modal
    • Month picker
    • Pagination
    • Popper
    • Radio
    • Repeater
    • Select
    • Tabs
    • Tile
    • Toast
    • Toggle
  • Directives

    • Click outside
    • Tooltip

Visual principles

The basic visual principles to guide us build great experiences.

Colors v2

Communicate the meaning and tone of our experiences by using our brand colors.

Icons v1

Simple, modern, and friendly visual helpers to guide our merchants to complete any task.

Space v1

Set of rules for how we measure, size, and space our UI elements.

Typography v1

The foundational component to communicate and organize our information hierarchy.

Edit this page
Last Updated: 7/23/25, 9:31 AM
Contributors: Cesar Level, John Hannagan, Weetbix, Giorgi Kakhoshvili
Next
Colors