• UCLA Blue
  $brand--primary
  #2774ae
• Darker Blue
  $brand--primary-darker
  #005587
• Darkest Blue
  $brand--primary-darkest
  #003b5c
• Lighter Blue
  $brand--primary-lighter
  #8bb8e8
• Lightest Blue
  $brand--primary-lightest
  #c3d7ee
• UCLA Gold
  $brand--secondary
  #ffd100
• White
  $white
  #ffffff
• Gray
  $gray
  #e5e5e5
• Black
  $black
  #000000

Grayscale

• $gray-80
  #333333
• $gray-60
  #666666
• $gray-40
  #999999
• $gray-10
  #e5e5e5

Denotive Colors

• Success Green
  $brand--success
  #007339
• Warning Orange
  $brand--warning
  #f57f17
• Error Red
  $brand--danger
  #d60000
• Primary Alert Blue
  $brand--info
  #8bb8e8
• Secondary Alert Gray
  $brand--gray
  #999

Interactive Colors

on light background

• Default State
  $state-color
  #00598c
• Hover State
  $state-color-hover
  #0079bf
• Active State
  $state-color-active
  #003b5c
• Focus State
  $state-color-focus
  #0079bf
• Disabled State
  $state-color-disabled
  #757575
• Visited State
  $state-color-visited
  #5223b0

on dark background

• Default State Dark
  $state-color--invert
  #ffd100
• Hover State
  $state-color-hover--invert
  #ffe500
• Active State
  $state-color-active--invert
  #ffbf0f
• Focus State
  $state-color-focus--invert
  #ffe500
• Disabled State
  $state-color-disabled--invert
  #e5e5e5
• Visited State
  $state-color-visited--invert
  #ffffff

Primary font: Helvetica, Arial, "Segoe UI", "Roboto", sans-serif;

Primary font italic: Helvetica, Arial, "Segoe UI", "Roboto", sans-serif;

Primary font bold: Helvetica, Arial, "Segoe UI", "Roboto", sans-serif;

Monospace font: Menlo, Monaco, Consolas, "Courier New", monospace

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

.heading--primary

.heading--secondary

.heading--bar

.heading--highlight

.heading--ribbon-branding - this is a longer text string to see it wrap below.

.heading--ribbon-highlight - this is a longer text string to see it wrap below.

This is a lead copy paragraph.

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

— Someone Famous in Source Title

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough

Superscript^®

Subscript for things like H₂O

This small text is small for for fine print, legal, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variable element, such as x = y

  	
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~ 

• This is a list item in an unordered list
• An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
• Lists can be nested inside of each other
  • This is a nested list item, that contains a nested list
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is another nested list item in an unordered list
• This is the last list item

1. This is a list item in an ordered list
2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
3. Lists can be nested inside of each other
   1. This is a nested list item, that contains a nested list
      1. This is a nested list item
      2. This is another nested list item in an unordered list
   2. This is another nested list item in an ordered list
4. This is the last list item

Definition List

A number of connected items or names written or printed consecutively, typically one below the other.

This is a term.

This is the definition of that term, which both live in a dl.

Here is another term.

And it gets a definition too, which is this line.

Here is term that shares a definition with the term below.

And it gets a definition too, which is this line.

And it gets a another definition, which is this line.

And it gets a another definition, which is this line.

And it gets a another definition, which is this line.

Here is another term.

And it gets a definition too, which is this line.

• This is a list item in an unordered list
• An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
• Lists can be nested inside of each other
  • This is a nested list item, that contains a nested list
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is another nested list item in an unordered list
• This is the last list item

• First Item
• Second Item
• This is the last list item

1. List Item Upper Roman
2. List Item Upper Roman
3. List Item Upper Roman
   1. List Item Upper Alpha
   2. List Item Upper Alpha
   3. List Item Upper Alpha
4. List Item Upper Roman
5. List Item Upper Roman
6. List Item Upper Roman
   1. List Item Lower Alpha
   2. List Item Lower Alpha
   3. List Item Lower Alpha
7. List Item Upper Roman
8. List Item Upper Roman
9. List Item Upper Roman

• List Link Title
• Another List Link Title
• Example of a list link with a super duper long title that rolls over to at least a second line.

• This is an Internal Link
• This is an External Link
• This is a Link to a Download

• Download File
• Download File
• Download File

• How far away is the Sun?
• Really Far.
• Can you be more clear?
• No, this is why school is important.
• How close is the Sun?
• That's basically the same question as above.

• This is a list item in an unordered list
• An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
• Lists can be nested inside of each other
  • This is a nested list item, that contains a nested list
    • This is a nested list item
    • This is another nested list item in an unordered list
  • This is another nested list item in an unordered list
• This is a list item in an unordered list
• This is a list item in an unordered list
• This is the last list item

1. This is a list item in an ordered list
2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
3. Lists can be nested inside of each other
   1. This is a nested list item, that contains a nested list
      1. This is a nested list item
      2. This is another nested list item in an unordered list
   2. This is another nested list item in an ordered list
4. This is a list item in an ordered list
5. This is a list item in an ordered list
6. This is the last list item

Primary Button

Disabled Button

Secondary Button

Disabled Button

Tertiary Button

Disabled Button

Primary Button

Secondary Button

Tertiary Button

Primary Button

Secondary Button

Tertiary Button

Primary Button

Secondary Button

Tertiary Button

Primary Button

Secondary Button

Tertiary Button

Read the Pattern Info for documentation.

See Pattern Info for more classes and documentation.