Date and Time
Standard format:
MMM, DD, YYYY, HH:MM AM/PM
- Timezones should be in parentheses after the label name
Time Duration
Unit | Abbreviation |
---|---|
millisecond | ms |
second | sec, secs |
minute | min, mins |
hour | hr, hrs |
day | day, days |
One unit of time | Two units of time | 3+ units of time |
---|---|---|
1 day | 4 hr 24 min | 00:00:00 [HH:MM:SS] |
2 days | 3 min 19 sec |
Amounts
Unit | Abbreviation | Example |
---|---|---|
thousand | None (default) K (if space is limited) | 12,000 12K (12,000) |
million | M | 1.2M (1,200,000) |
billion | B | 2.4B (2,400,000,000) |
Numbers and Decimals
✅ | ❌ | |
---|---|---|
Use numerals instead of writing out numbers | 0 errors 3 errors | Zero errors three errors |
Use max 2 decimal places when applicable, else use whole | 42% 42.08% | 42.30310% |
Ellipses (…)
✅
❌
Use ellipses for truncated text. Depending on the context, decide between beginning, middle, or end truncation
This is a really long long…This is a really long…long name…This is a really long long name
Labels, Tooltips, and Required Fields
Labels are represented in gray without a colon to reduce visual noise.
Always represent required fields with a red asterisk after the label name and colon
Tooltips should follow the required asterisk.
![](https://i0.wp.com/commadot.com/wp-content/uploads/2021/05/form.png?resize=728%2C103&ssl=1)
Placeholder Text
Try to limit the amount of placeholder text you use for input fields.
Always have placeholder text for search and combobox fields.
Links
Make links as descriptive as possible
![](https://i0.wp.com/commadot.com/wp-content/uploads/2021/06/image-20201111-224722.png?resize=834%2C184&ssl=1)
![](https://i0.wp.com/commadot.com/wp-content/uploads/2021/06/image-20201111-224719.png?resize=834%2C184&ssl=1)
Never use the word here as the link
![](https://i0.wp.com/commadot.com/wp-content/uploads/2021/06/Links-inline-no.png?resize=692%2C160&ssl=1)
Opt for inline links
![](https://i0.wp.com/commadot.com/wp-content/uploads/2021/06/image-20201111-230129.png?resize=692%2C160&ssl=1)
Use learn more links if there are multiple reasons for a state
![](https://i0.wp.com/commadot.com/wp-content/uploads/2021/06/image.png?resize=1024%2C217&ssl=1)
Treasure Data Portfolio
- Information architecture. Complete redo of the UI.
- Access control security structure
- Segmentation UI
- Figma design system
- Journey building UI
- Data Model UI
- Workflow Editor
- Illustrations for empty states
- Schema template for advanced database management
- Advanced Tree Search
- Microcopy design guide