The Chromium Projects

Except as otherwise noted, the content of this page is licensed under a Creative Commons Attribution 2.5 license, and examples are licensed under the BSD License.

The Chromium OS designs and code are preliminary. Expect them to evolve.
Chromium OS‎ > ‎User Experience‎ > ‎

UI Elements

UI under development. Designs are subject to change.

Form Controls

The base UI elements in Chrome OS are styled after the default form controls. Any CSS changes are applied to this base, rather than causing a dramatic change from a native widget to a CSS one.

Default button style is a simple white to gray gradient.

Base attributes
  • Stroke 1px #8F8F8F
  • Corner radius 3px
  • Disabled:
    • Stroke: B7B7B7
    • Text: 50% black
  • Focused:
    • Stroke 2px #507ad5
  • Gradient: #ffffff (0.0) to #ffffff (0.5) to #d8d8d8 (1.0) - these are (stops)
  • Drop Shadow: #ffffff (0, -1) no blur
  • Pressed:
    • Gradient: #959595 (0.0) to #e3e3e3 (1.0)
Text Field:
  • Gradient: #c5c5c5 (0) to #ffffff (0.2) to #ffffff (1.0)
  • Selected text highlight: #DCE4FA
  • 10px radius 2px thick
  • Fill #3e578b
  • Font: bold 11pt white
  • 50% white stroke
  • Stroke: 33% black
  • Drop shadow: 33% black, 4px blur, 2px offset.
  • Highlight color DCE4FA
  • 5px tall, Rounded corners
  • Stroke 1px #8F8F8F
Scroll bars:
  • Background: f0f0f0
  • Thumb: same as active button, even in depressed state

Menus use the same gradient with a stronger drop shadow.
When possible, they are displayed attached to their source.

Scroll Bars

Scroll bar options:
  • Transient scroll indicators
  • Wave-style scroll widgets
  • Rollover scroll bars (when you press screen edge
  • Standard scroll bar
  • Reflective scroll bar


Future directions:
  • Resolution Independent cursors
  • Black with white outline (for contrast)
  • Movement in Z space when clicking
  • Pulse emitted when you shake