Date and Time
Standard format:
MMM, DD, YYYY, HH:MM AM/PM
- Timezones should be in parentheses after the label name
Timestamps with label
Timestamps with no label
Timestamps in a Table
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
Use ellipses in the Upload button.
Use ellipses when something is in progress
Don’t use ellipses for menu options
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.
Placeholder Text
Try to limit the amount of placeholder text you use for input fields.
Always have placeholder text for search and combobox fields.
- Form Field
- Empty
- Instructional
- Formatting
- Example
- Read-Only
- No Value
Links
Make links as descriptive as possible
Never use the word here as the link
Opt for inline links
Use learn more links if there are multiple reasons for a state
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