Intro

GovStyle LA / Style LA

Take part in a unique opportunity to help unify and improve the design and usability of City of LA websites and apps. The City’s Web Team has been working on a proposed Style Guide to be used as the go-to style resource for all site and app development. Not only is this Style Guide supposed to help streamline development, but it should provide great-looking style that can be used by all City Departments while ensuring responsiveness and accessibility. View the Style Guide at http://contact.lacity.org/style/.

Please turn on Annotations to view Instructions ( Found under the eye icon in the top right )

Colors

Vibrant Colors

  • Orange
    x x x o
    Aa Bb Cc Dd
    #CC4E10
  • ClassicBlue
    x x o o
    Aa Bb Cc Dd
    #014982
  • LightBlue
    o o x x
    Aa Bb Cc Dd
    #40C4FF
  • Magenta
    x x x o
    Aa Bb Cc Dd
    #D9007C
  • Red
    x x x o
    Aa Bb Cc Dd
    #CC1414
  • LightGreen
    o o x x
    Aa Bb Cc Dd
    #6ECC00
  • Yellow
    o o x x
    Aa Bb Cc Dd
    #FFE600

Classic Colors

  • Orange
    x x x o
    Aa Bb Cc Dd
    #CC4E10
  • ClassicBlue
    x x o o
    Aa Bb Cc Dd
    #014982
  • Teal
    x x x o
    Aa Bb Cc Dd
    #00758C
  • RichViolet
    x x o o
    Aa Bb Cc Dd
    #54277B
  • Burgundy
    x x o o
    Aa Bb Cc Dd
    #800D20
  • RichGreen
    x x o o
    Aa Bb Cc Dd
    #326E1E
  • ClassicGold
    o o x x
    Aa Bb Cc Dd
    #F9B000

Shades

  • Black(87%)
    x x o o
    Aa Bb Cc Dd
    #212121
  • DarkGrey(72%)
    x x o o
    Aa Bb Cc Dd
    #474747
  • LightGrey(12%)
    o o x x
    Aa Bb Cc Dd
    #E0E0E0
  • White
    o o x x
    Aa Bb Cc Dd
    #FFFFFF

Fonts

Primary font: 'Varela', sans-serif;

Primary font italic: 'Varela', sans-serif;

Primary font bold: 'Varela', sans-serif;

Secondary font: 'Droid Sans', sans-serif;

Secondary font italic: 'Droid Sans', sans-serif;

Secondary font bold: 'Droid Sans', sans-serif;

Animations

Fade: Duration: 0.6s Easing: ease-out (Hover to see effect)
Movement: Duration: 1s Easing: ease-in-out; (Hover to see effect)

Visibility

This text is hidden on smaller screens

This text is only visible on smaller screens

This text is hidden on medium screens only

This text is only visible on medium screens

This text is hidden on large screens

This text is only visible on large screens