Introduction

The styleguide is a UI/UX bible for for designers and developers. We use it to maintain modular front-end code and visual consistency across the web app.

How to use?

  • Use the existed patterns
  • If the existed patterns do not solve the design problem, there are two options:
    1. Alter a pre-existing pattern to solve the problem, and implement that change across all of Roblox via a change to the styleguide.
    2. Build a new pattern, and integrate it into the canon of Roblox’s UI patterns for future use.
Example

Buttons

Width

Play, Buy Robux, Upgrade

Example






Call to Action Buttons

Action button

Example


Growth Buttons

Play, Buy Robux, Upgrade

https://confluence.roblox.com/display/MOBAPP/Growth+Buttons

Example


Secondary Action Buttons

Trade, See all, Create New

Example


Control + Configure Buttons

Edit, Share, Save, Cancel

Example


Alert Buttons

Trade, See all, Create New

Example


Icon Buttons

Example
Play button
Purchase game button

Buy Buttons

Used in game datails page for purchase game pass

Example


Toggle

Usage: listen "toggleBtnClick" event to get toggle status and element id

Example

Cards

Game Store Cards

Background color for items is $gray-4

Example
  • PItem 150 x 150
    Fit Around 18 Letters
    999,999,999
  • Item 150 x 150
    Fit Around 18 Letters
    999,999,999
  • Item 150 x 150
    Fit Around 18 Letters
    Free
    Owned
  • Item 150 x 150
    Fit Around 18 Letters
    Free
    Owned
  • Placeholder 150 x 150
    Add Pass

Extra Large Game Tile

480x270(Desktop), 294x166(Mobile)

Example

Extra Large Game Tile

50% 0

Extra Large Game Tile With Instant Play

With Play button (hover)

Example

Extra Large Game Tile

20% 3,000

Game Cards 150x150

150x150 is used for games page

Example

Game Cards 126x126

126x126 is used for game detail page

Example

Extra Large Item Tile

480x270(Desktop), 294x166(Mobile)

Example

Extra Large Item Tile

5000

Feature Item Cards

Feature Cards/List view in Mobile

Feature Item Card: catalog page, also list view at moblie size

Example

Item Cards - 7 recommend items

7 per each row for recommend items
Example

Item Cards - 6 recommend items

6 per each row for inventory/favorite tab content
Example

Avatar Headshot Cards

  • avatar-headshot-sm: chat, leadboard/running game at game details page
  • avatar-group: chat group/party
  • avatar-headshot-md: feed at home page, comment
  • avatar-headshot-lg: home avatar, profile avatar
Example

Avatar Card without box shadow

It is used when avatar without link to profile page

Example

Avatar FullBody

Avatar FullBody
Example

Avatar Cards

  • line 1: a.ka/you're friend/mutual friend/following/online/offline
  • line 2: currently doing (Playing/Creating/Website)
Example

Carousels

There are three types of carousels: carousel for game details page, slider shows for profile page and scrolling carousel for games page. The first two carousels exist in _carousel.scss

Group and Game

Example

  • Group Name

    Group Description

    • Members

      1,000,000

    • Rank

      99,999

  • Group Name

    Group Description

    • Members
      1,000,000
    • Rank
      99,999
Example
open quote close quote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porttitor lorem a nisl gravida, in vestibulum arcu scelerisque. Donec feugiat magna sed dapibus molestie.

- hahamonkey5

profile-picture
open quote close quote

Praesent sagittis consequat ex non scelerisque. Aenean et suscipit lacus. Pellentesque pharetra lacus eu magna iaculis. Quisque fermentum purus lorem.

- beckham

profile-picture
open quote close quote

Integer at quam sed magna ultricies finibus non in urna. Pellentesque a turpis erat. Vestibulum faucibus arcu in lobortis porttitor. Suspendisse nec felis vel ipsum.

- curry

profile-picture

Colors

Gray

Example
Gray 1 #191919
Gray 2 #757575
Gray 3 #B8B8B8
Gray 4 #E3E3E3
Gray 5 #F2F2F2
background #F5F5F5
White #fff

Blue

Example
Blue Primary #00A2FF
Blue Hover #32B5FF
Blue Pressed #0074BD
Blue Disabled #99DAFF

Green

Example
Green Primary #02B757
Green Hover #3FC679
Green Pressed #108237
Green Disabled #A3E2BD

Red

Example
Red Primary #E2231A
Red Negative #D86868
Red Hover #AC1E2D
Red Pressed #E27676

Orange

Example
Orange Warning #F68802
Orange Favorite #F6B702

Shadow

Example
Shadow Primary rgba(25,25,25,0.3)
Shadow Hover rgba(25,25,25,0.75)

Themes

Example
Black 70%
Black 30%
Obsidian #18191B
Carbon #1F2123
Slate #232527
White 10%
White 30%
White 70%
Flint #393B3D
Pumice #BDBEBE
Graphite #656668
Ash #E3E5E8
Alabaster #EFF2F5
Smoke #7B7C7D
Green #23D776
Red #F74B52

Container

Section

Section is used for solid content in one container, like friends in home page, about in profile page

Example

header title

See All
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Container List

Example

Container list is used for list of cards, like games in home page

header title

See All

Single

Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Double

Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Stacked

Example
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Container-empty

Empty container, individual window with default message

Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Section Content off

Inside page content, no content return, place holder for new users

Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet.

Form Control

Basic form

Example

Validation states

Example

Username: 3-20 characters, no spaces

Please check email format

Example

Search with dropdown

Example

Number Input

Example

Slider

Example

Angular Slider

For the new angular slider please visit this page.

Radio

Example

Radio pills

Example

Checkbox

Example

File Upload

This example is using the fileUpload widget in CoreUI

  1. Add FileUpload and SystemFeedback static content components to your page
  2. Add fileUpload and systemFeedback modules to your page
  3. Add system-feedback component to the top of your page
  4. Create fileUploadInfo object and pass in as a component binding to file-upload component

You can set the following properties on fileUploadInfo

  1. allowedFileTypes: An array of allowed file type extensions (ex. ['.png', '.jpg', '.bmp']). Default accepts all file types
  2. previewSrc: The source of the image preview, usually a thumbnail url

Access the following properties on fileUploadInfo

  1. file: The file that has been selected
  2. fileSelected: Whether or not a file has been selected

Example
Example: Full Screen

Iconography

  1. add class active to turn on the icon hover and active status
  2. add class inactive to turn off the icon

Generic

Example
Example

Common Regular

Example

Common Small

Example

Games

Example

Social

Example

Abuse Report

Example

Branded

Example

BC

Example

Labels

Example

Negative

Example

Placeholder

Example

Placeholde Game thumbnails

Example

Thumbnail Validation Status

Example

Icon Size

Define and generate icons : icon-variant($type, $name, $index, $size: 28x28, $hasHover: false, $numberOfGrid: 1)

Update exsiting icon size/hover status : get-icon($type, $index, $size: 28x28, $hasHover: false)

Dynamic Size
  • icon-robux

Icon Labels

Define an icon label:

  • To get correct size of icon: get-label-icon($type, $name, $index, $size, $hasHover)
  • To get correct text: get-label-text($background-color, $padding, $font-size, $border-radius)

Example
  • Sale
  • New

facebook

Example
Example
Example

Status Icons

Example

Social Media Icons

Example

Spot Icons

Example

Action Icons

Example

Loading

Default (css class)

Example

Small (css class)

Example

  1. Add 'data-toggle="dropdown"' in the trigger element and 'data-toggle="dropdown-menu"' in the menu list
  2. Review /js/reference/widget.js as usage reference

Example
Example with multiple dropdowns

Using ui bootstrap dropdown

Example

Native Selection

It is used for mobile browser by taking native browser behavior at phone/tablet

Example

Popover

Popover jQuery

Need to insert data-toggle as popover in the element attribute; For proper cross-browser and cross-platform behavior, recommend to use the a tag and include a tabindex attribute.

Example

Popover AngularJS

How to use?

  1. popover-class: Custom class to be applied to the popover.
  2. popover-append-to-body: Should the popover be appended to '$body' instead of the parent element? (default: false)
  3. popover-placement: default: top
  4. popover-trigger: default: click
  5. For more details how to config popover: More details

Example - Default Configuration
Example - Popover-trigger to focus and template

Hover Popover AngularJS

Extended from the previous popover angularjs library, add hover-popover directive to trigger popover on hover as open, leave from trigger element is close

  1. How to set up?
    1. In component module definition, inject ui.bootstrap
    2. In trigger directive, add hover-popover
    3. Turn off default trigger: popover-trigger=" 'none' "
    4. Add manual trigger: popover-is-open="hoverPopoverParams.isOpen"
    5. Setup hover-popover-params in controller. In the demo, it will be hoverPopoverDemoController.js
      1. hoverPopoverSelector is to define what range the mouse can stay once popover is open. When mouse leaves the selected area, popover will be closed. In the demo, it selects sg-hover-popver which means the whole example section will be mouse moving area.
      2. triggerSelector is to define which element will be the trigger point to open popover
  2. hoverPopoverDirective.js is main definition for hover popover
    1. "HoverPopover.EnableClose" event is to listen any special case to ask hover popover close in any customize condition
  3. Developers need to define its own icon and context, in the demo, it is only reference.

Example

Modal

Please view this page for modal implementation.

Notification

Highlight

Highlight new or unread items

Example
3
47
99+

Site Wide Banner

Example
Come join us at twitch.tv/roblox for the next level!

Message Banner

Example
No Private Server Instances Found

System Feedback

Example

Pagination

Pagination Angular

  1. Use cursor pagination directive and pass in a valid cursor object

Example

Status

Message Status

  • Usage : Chat, Private message
  • Mixin name : message-status($className)
  • Note:
    1. read/unread color will override exist font color style, e.g. text-link
    2. unread status has secondary color, e.g timestamp

Example
  • Read Message timestamp
  • UnRead Message timestamp
Friends has read messages
Friends has unread message

Scroll Bar

Scroll Bar jQuery

Usage
  1. Include jQuery and jquery.mCustomScrollbar.concat.min.js
  2. Include jquery.mCustomScrollbar.css
  3. Add data-toggle="scrollbar" to the wanted element, in the widget.js, "$('[data-toggle="scrollbar"]').mCustomScrollbar" will build the custom scrollbar
  4. Review /js/Reference/widget.js as usage reference

Example
  • oLEFTo

Table

Example
Item Detail Note
Lorem Ipsum Mauris augue nisl, pharetra vel faucibus vestibulum, pharetra a lorem. Quisque in neque dui. Fusce vitae sem egestas
Lorem Ipsum Mauris augue nisl, pharetra vel faucibus vestibulum, pharetra a lorem. Quisque in neque dui. Fusce vitae sem egestas
Lorem Ipsum Mauris augue nisl, pharetra vel faucibus vestibulum, pharetra a lorem. Quisque in neque dui. Fusce vitae sem egestas
Lorem Ipsum Mauris augue nisl, pharetra vel faucibus vestibulum, pharetra a lorem. Quisque in neque dui. Fusce vitae sem egestas
Lorem Ipsum Mauris augue nisl, pharetra vel faucibus vestibulum, pharetra a lorem. Quisque in neque dui. Fusce vitae sem egestas

Tabs

Horizontal Tabs jQuery

Example
This is Text content;
This is Card content;
This is Split content;
This is List content;

Vertical Tabs jQuery

This example only has vertical tab style

Example
This is heads content;
This is faces content;
This is gear content;
This is hats content;
This is T-Shirts content;
This is shirts content;
This is pants content;

Vertical Menu

This example only has vertical tab style

Example

Image and Thumbnail

Game Icon/Item

1:1

Example
game/item card 50 x 50
game/item card 150 x 150
game/item card 420 x 420

Avatar

Headshot

Example
Avatar Headshot 48 x 48
Avatar Headshot 60 x 60
Avatar Headshot 150 x 150

Full body

Example
Avatar Full body 100 x 100
Avatar Full body 352 x 352

Game Thumbnail

Example
Game Thumbnail 640 x 360

Placeholder

Game Icon Placeholder

Example

Asset Icon Placeholder

Example

Avatar Headshot Icon Placeholder

Example

Avatar Fullbody Icon Placeholder

Example

Tooltip

Tooltip jQuery

Need to insert data-toggle as tooltip in the element attribute

Example

Typing

Typing

Example

Typography

HCo Gotham SSm | Check new Reference Page

Transition table

Example

Page Header

Username/Group Name Header/Game Detail Header

Section and Form Header

Content Title within Container

Popup Header

Body

Transition table

Example
Default Text, Card Title, Dropdown Menu: Work at a Pizza Place
Card Description (Single line): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis leo ac orci ornare sagittis.

Card Description (Multiple lines): Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vulputate facilisis consectetur. Nunc lacinia leo a velit porta, in vulputate velit viverra. Fusce pretium mattis orci sed facilisis. Suspendisse vitae ultricies quam. Praesent euismod nisl tempor velit consectetur, eget scelerisque dolor fermentum.

12px/400/gray1
10px/400/gray1
Bold
Keep spaces and line-breaks, with 'Source Sans Pro' font and 0 margin:Lorem     ipsum     dolor sit amet, consectetur adipiscing elit. Praesent vulputate facilisis consectetur. Nunc lacinia leo a velit porta, in vulputate velit viverra. Fusce pretium mattis orci sed facilisis. Suspendisse vitae ultricies quam. Praesent euismod nisl tempor velit consectetur, eget scelerisque dolor fermentum.

More Specific Use Case

Transition table

  • text-robux-lg, text-subject = Header 1
  • text-name, text-link, text-link-secondary, text-lead, text-warning, text-footer-nav(Privacy), text-label = Header 2
  • text-footer-nav(except Privacy) = SubHeader 2
  • text-description, text-favorite, text-robux, text-roblox = Body
  • text-pastname, text-report-ads, text-report, text-error = Caption Header
  • text-secondary, text-date-hint, ad-identification-text, text-tooltips = Caption Body
  • text-footer = Footer
Example
Item description, my feed, commentary: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vulputate facilisis consectetur. Nunc lacinia leo a velit porta, in vulputate velit viverra. Fusce pretium mattis orci sed facilisis. Suspendisse vitae ultricies quam. Praesent euismod nisl tempor velit consectetur, eget scelerisque dolor fermentum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vulputate facilisis consectetur. Nunc lacinia leo a velit porta, in vulputate velit viverra. Fusce pretium mattis orci sed facilisis. Suspendisse vitae ultricies quam. Secondary Text Link praesent euismod nisl tempor velit consectetur, eget scelerisque dolor fermentum.

Card Secondary Text: 1,028 Playing
Past Usernames
Popup Header, Tab, Statistic Text: Purchase Item / 9,999 / 10k / 10k+ / 999k
Text Label, Form Label: Description
Expires on 9/25/2020
Error Message: Username cannot be longer than 20 characters
Date and Time, Hint Text
Footer Nav
Footer Text
Currency Robux: 99,999
Favorite: 99,999
Tooltips
Currency: Robux on Detail page
message subject
Advertisment
roblox

Long Text Treatment

Single Line

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Multiple line

using mixin: get-multi-lines($className, $lineHeight, $lineCount, $bgColor)

Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis rutrum ex, laoreet malesuada risus. Donec tempor aliquam eros, vel vehicula diam pretium in.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis rutrum ex, laoreet malesuada risus. Donec tempor aliquam eros, vel vehicula diam pretium in. Etiam hendrerit, dui quis suscipit auctor, ipsum ante aliquet magna, ut volutpat libero diam nec nisi. Nam sodales sapien at iaculis tincidunt. In bibendum non eros sit amet consectetur. Aenean facilisis erat tortor, hendrerit feugiat turpis egestas id. Vestibulum fermentum quam vitae pellentesque malesuada. Integer at dictum est. Suspendisse sit amet tincidunt ante. Morbi euismod neque sit amet lectus lobortis hendrerit. Phasellus at mauris id ex ultrices lacinia. Fusce pretium, orci eget lobortis faucibus, turpis dui ultrices est, sit amet eleifend lorem ipsum et nisi. Praesent in urna a tortor posuere mollis sed quis tellus.

Multiple lines with Toggle button

Truncate file if the file have more than 5 lines.

Read more as link text

Include "para-overflow-page-loading" class in your paragraph. (It's being hidden by JS)
Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis rutrum ex, laoreet malesuada risus. Donec tempor aliquam eros, vel vehicula diam pretium in. Etiam hendrerit, dui quis suscipit auctor, ipsum ante aliquet magna, ut volutpat libero diam nec nisi. Nam sodales sapien at iaculis tincidunt. In bibendum non eros sit amet consectetur. Aenean facilisis erat tortor, hendrerit feugiat turpis egestas id. Vestibulum fermentum quam vitae pellentesque malesuada. Integer at dictum est. Suspendisse sit amet tincidunt ante. Morbi euismod neque sit amet lectus lobortis hendrerit. Phasellus at mauris id ex ultrices lacinia. Fusce pretium, orci eget lobortis faucibus, turpis dui ultrices est, sit amet eleifend lorem ipsum et nisi. Praesent in urna a tortor posuere mollis sed quis tellus. Read More

Read more for item and game pass description (text link on desktop, button on mobile)

Include "content-overflow-page-loading" class in your paragraph. (It's being hidden by JS)
Example

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis rutrum ex, laoreet malesuada risus. Donec tempor aliquam eros, vel vehicula diam pretium in. Etiam hendrerit, dui quis suscipit auctor, ipsum ante aliquet magna, ut volutpat libero diam nec nisi. Nam sodales sapien at iaculis tincidunt. In bibendum non eros sit amet consectetur. Aenean facilisis erat tortor, hendrerit feugiat turpis egestas id. Vestibulum fermentum quam vitae pellentesque malesuada. Integer at dictum est. Suspendisse sit amet tincidunt ante. Morbi euismod neque sit amet lectus lobortis hendrerit. Phasellus at mauris id ex ultrices lacinia. Fusce pretium, orci eget lobortis faucibus, turpis dui ultrices est, sit amet eleifend lorem ipsum et nisi. Praesent in urna a tortor posuere mollis sed quis tellus. Read More

Dynamic Ellipsis

Example
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis rutrum ex, laoreet malesuada risus. Donec tempor aliquam eros, vel vehicula diam pretium in. Etiam hendrerit, dui quis suscipit auctor
Jan 29, 2018
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quis rutrum ex, laoreet malesuada risus. Donec tempor aliquam eros, vel vehicula diam pretium in. Etiam hendrerit, dui quis suscipit auctor
11:40am

Display Utilities

Cursor

Mouse hover on the html element will be pointer

Example
Cursor hover

Invisible

Give html element visibility: hidden

Example
Where are you?