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

Dates and units of measure

Date

Where possible, use the full name for each month. If you don't have enough space, use 3-letter abbreviations.

DoDon't
  • Tuesday, November 21, 2022
  • November 21, 2022
  • Nov 21, 2022
  • Tues, November 21
  • November 21, 21
  • 11/21/15

Avoid using ordinal indicators

DoDon't
  • Tuesday, November 21, 2022
  • November 22, 2022
  • November 23, 2022
  • Tuesday, November 21st, 2022
  • November 22nd, 2022
  • November 23rd, 2022

Time

When time must be formatted manually, follow these guidelines:

  • Use the 12-hour clock, followed by am or pm.
  • Include a space after the last number. For example, “Your package will arrive at 12:35 pm.”
  • To show a time range, use an en dash (-) and include the am/pm after both times. Example: 3:00 pm–4:00 pm.
  • If indicating both the date and time, separate them with the word “at” instead of a comma. Example: November 23rd, 2022 at 3:00 pm.

Currency

When including currency with a price, place the currency sign after the amount. If a currency has no symbol, use the same format but do not add a symbol.

Examples
$10,000 USD
€10,000 EUR

Numbers

When using numbers, avoid spelling the number.

DoDon't
5 notificationsFive notifications
You have 2 new items in your cartYou have two new items in your cart

Where possible, truncate numbers and avoid using commas.

DoDon't
4K4,000
10K10,000
121K121,000
1.2M1,200,000
1B1,000,000,000

Number ranges

Use an en-dash (-) without a space on either side for number ranges.

Examples
1-5 items
$10.00–$19.99
1994–2004

Use “to” instead of an en dash if a number range is preceded by “from” in a phrase. Use “and” if a range is preceded by “between.”

Examples
Active from September 10 to September 28
A delivery is scheduled from 10:00 am to 2:00 pm on Monday, July 18.
1994–2004
Edit this page
Last Updated: 7/6/23, 6:53 AM
Contributors: noon-dawg, Cesar Level, John Hannagan, Weetbix
Prev
Capitalization
Next
Punctuation