Aggie Blue and Aggie Gold

Aggie Blue
$brand--primary
#022851
Aggie Gold
$brand--secondary
#FFBF00

UC Davis Blue Tints

Custom mix. Straight tints of the blue will not work; please use only the color values below.

Aggie Blue
$brand--primary
#022851
Aggie Blue 90%
$brand--primary-90
#14447A
Aggie Blue 80%
$brand--primary-80
#13639E
Aggie Blue 70%
$brand--primary-70
#73ABDD
Aggie Blue 60%
$brand--primary-60
#B0D0ED
Aggie Blue 50%
$brand--primary-50
#CCE0F3
Aggie Blue 40%
$brand--primary-40
#DBEAF7
Aggie Blue 30%
$brand--primary-30
#EBF3FA
Aggie Blue 20%
$brand--primary-20
#F7FAFD

UC Davis Gold Tints

Aggie Gold
$brand--secondary
#FFBF00
Aggie Gold 90%
$brand--secondary-90
#FFC519
Aggie Gold 80%
$brand--secondary-80
#FFD24C
Aggie Gold 70%
$brand--secondary-70
#FFDF80
Aggie Gold 60%
$brand--secondary-60
#FFECB2
Aggie Gold 50%
$brand--secondary-50
#FDE9AC
Aggie Gold 40%
$brand--secondary-40
#FFF4D2
Aggie Gold 30%
$brand--secondary-30
#FFF9E6
Aggie Gold 20%
$brand--secondary-20
#FFFBED

Black Tints

Black
$black
#000000
Black 90%
$ucd-black-90
#191919
Black 80%
$ucd-black-80
#333333
Black 70%
$ucd-black-70
#4C4C4C
Black 60%
$ucd-black-60
#666666
Black 50%
$ucd-black-50
#7F7F7F
Black 40%
$ucd-black-40
#999999
Black 30%
$ucd-black-30
#B2B2B2
Black 20%
$ucd-black-20
#CCCCCC
Black 10%
$ucd-black-10
#E5E5E5
White
$white
#FFFFFF

Secondary Colors

For best results in multicolored publications, restrict secondary color choices to a maximum of two or three beyond UC Davis gold or blue. In fact, UC Davis blue, UC Davis gold and black for text are sufficient for effective publication design that unmistakably communicates UC Davis’ identity.

The colors below offer great secondary color flexibility while providing a reasonably limited palette. Please do not introduce other secondary colors into UC Davis publications.

Use secondary colors only as accents, never as dominant colors or backgrounds.

Rec Pool
$rec-pool
#6FCFEB
Tahoe
$tahoe
#00B2E3
Gunrock
$gunrock
#0047BA
Bodega
$bodega
#003A5D
Rain
$rain
#03F9E6
Arboretum
$arboretum
#00C4B3
Putah Creek
$putah-creek
#008EAA
Delta
$delta
#00524C
Farmer’s Market
$farmers-market
#AADA91
Sage
$sage
#6CCA98
Quad
$quad
#3DAE2B
Redwood
$redwood
#266041
Golden State
$golden-state
#FFFF3B
Sunflower
$sunflower
#FFDC00
Poppy
$poppy
#F18A00
California
$california
#8A532F
Rose
$rose
#FF8189
Strawberry
$strawberry
#F93549
Double Decker
$double-decker
#C10230
Merlot
$merlot
#79242F
Thiebaud Icing
$thiebaud-icing
#F095CD
Redbud
$redbud
#C6007E
Pinot
$pinot
#76236C
Cabernet
$cabernet
#481268

Primary font: "proxima-nova", system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

Primary font italic: "proxima-nova", system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

Primary font bold: "proxima-nova", system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

Primary font extra bold: "proxima-nova", system-ui, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

Secondary font: "Ryman Eco", Georgia "Times New Roman", Times, serif;

Secondary font italic: "Ryman Eco", Georgia "Times New Roman", Times, serif;

Secondary font bold: "Ryman Eco", Georgia "Times New Roman", Times, serif;

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

Disabled Primary Button

Disabled Alternative Button

Large Alternative Button

Small Alternative Button

Round Alternative Button

Block Alternative Button

Alternative 2 Button

Disabled Alternative 2 Button

Large Alternative 2 Button

Small Alternative 2 Button

Round Alternative 2 Button

Block Alternative 2 Button

Alternative 3 Button

Disabled Alternative 3 Button

Large Alternative 3 Button

Small Alternative 3 Button

Round Alternative 3 Button

Block Alternative 3 Button

Invert Button

Disabled Invert Button

Text Input *

Password

Web Address

Email Address

Search

Number Input *

Textarea

Error Input

Valid

Select

Basic

Content

Stacked

Content

Basic - Flipped

Content

Stacked

Content

Basic - 3 columns

Content

Basic - Left Split

First region will go above content in mobile.

Content

Basic - Right Split

First region will go above content in mobile.

Content

Edge to Edge

Content

With Gutter

Content

With Narrow Gutter

Content

Container

Content

With Gutter

Content

With Narrow Gutter

Content

Narrow Container

Content

With Gutter

Content

With Narrow Gutter

Content

Nested Container

Content - this should be flush

Nested Narrow Container

Content - this should be flush

Nested Gutter

Content

Nested Narrow Gutter

Content

Full Width (breakout of container)

Content

With Gutter

Content

With Narrow Gutter

Content

1 Column

Content

Full Width

This will break out of a container to fill the screen Edge-to-Edge

Content

Overflow

This will break out of a container slightly

Content

Shrink

Decrease the width size so it is smaller than the outside content.

Content

2 Columns

First

Second

2 Columns - 33/67

First

Second

2 Columns - 67/33

First

Second

2 Columns - 25/75

First

Second

2 Columns - 75/25

First

Second

3 Columns

First

Second

Third

3 Columns - 25/50/25

First

Second

Third

3 Columns - 25/25/50

First

Second

Third

3 Columns - 50/25/25

First

Second

Third

4 Columns

First

Second

Third

Fourth

2 Columns Sibling Grid

test

First

Second

3 Columns Sibling Grid

First

Second

Third

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

This is a list item in an ordered list
An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
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
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.

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

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

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

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

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.

First Item
Second Item
This is the last list item

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

This is a list item in an ordered list
An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
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
This is the last list item

Item 1
1. Item 2
  1. Item 3
    1. Item 4
      1. Item 5

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.

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10

Lazy Loaded Background

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Shown as missing the first region, but still rendering the bottom 3 correct due to named regions.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4

Table Heading 1	Table Heading 2	Table Heading 3	Table Heading 4
Table Footer 1	Table Footer 2	Table Footer 3	Table Footer 4
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4
Table Cell 1	Table Cell 2	Table Cell 3	Table Cell 4

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5

Heading Level 6

Linked Heading Level 1

Linked Heading Level 2

Linked Heading Level 3

Linked Heading Level 4

Linked Heading Level 5

Linked Heading Level 6

.heading--primary

.heading--secondary

.heading--auxiliary

.heading--highlight

.heading--underline

Heading .heading--weighted

Heading .heading--weighted-underline

.heading--center-underline

.heading--invert

.heading--invert-box

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.

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, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

This is what inline code looks like.

This is sample output from a computer program

The variable element, such as x = y

The mark element indicates a highlight

Here are other "highlight" mark elements Info Success Warning Danger

2 weeks ago

  	
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 { | } ~

Your search returned 5 results.

.u-align--left Align an element to the left in larger screen sizes.

.u-align--center Align an element to the center.

.u-align--right Align an element to the right in larger screen sizes.

Responsive Media Alignment

.u-align--left This will remain floated until there is not enough room for text.

.u-align--right This stacked early when the image no longer allows room for text on the side.

.u-bg--opaque is used on this section to force a white background.

.u-bg--transparent is overriding the inline red background color.

.u-error

.u-warning

.u-success

.u-info

Read the Pattern Info for documentation.

Margin Spacers

.u-space-mx adds a margin-left and margin-right.

.u-space-my adds a margin-top and margin-bottom.

.u-space-ml adds a margin-left.

.u-space-ml--small is half the space.

.u-space-ml--medium is one and a half the space.

.u-space-ml--large is double the space.

.u-space-ml--huge is 4x the space.

.u-space-ml--vast is 8x the space.

.u-space-ml--flush - override to make flush.

Padding Spacers

.u-space-px adds a padding-left and padding-right.

.u-space-py adds a padding-top and padding-bottom.

.u-space-pl adds a padding-left.

.u-space-pl--small is half the space.

.u-space-pl--medium is one and a half the space.

.u-space-pl--large is double the space.

.u-space-pl--huge is 4x the space.

.u-space-pl--vast is 8x the space.

.u-space-pl--flush - override to make flush.

Remove default vertical margin collapsing

.u-space--no-margin-collapse Margins no longer collapse.

Be aware that this can cause problems due to changing the display type.

.u-width--half

.u-width--one-third

.u-width--two-thirds

See Pattern Info for more classes and documentation.

.u-block

.u-inline-block

.u-inline

Aggie Blue and Aggie Gold

UC Davis Blue Tints

UC Davis Gold Tints

Black Tints

Secondary Colors

Basic

Stacked

Basic - Flipped

Stacked

Basic - 3 columns

Basic - Left Split

Basic - Right Split

Edge to Edge

With Gutter

With Narrow Gutter

Container

With Gutter

With Narrow Gutter

Narrow Container

With Gutter

With Narrow Gutter

Nested Container

Nested Narrow Container

Nested Gutter

Nested Narrow Gutter

Full Width (breakout of container)

With Gutter

With Narrow Gutter

1 Column

Full Width

Overflow

Shrink

2 Columns

2 Columns - 33/67

2 Columns - 67/33

2 Columns - 25/75

2 Columns - 75/25

3 Columns

3 Columns - 25/50/25

3 Columns - 25/25/50

3 Columns - 50/25/25

4 Columns

2 Columns Sibling Grid

3 Columns Sibling Grid

Table Heading 3

Table Footer 3

Table Cell 3

Table Heading 3

Table Footer 3

Table Cell 3

Table Heading 3

Table Cell 3

Table Heading 3