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
Buttons:
  • 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
Tooltips
  • 10px radius 2px thick
  • Fill #3e578b
  • Font: bold 11pt white
  • 50% white stroke
Menus
  • Stroke: 33% black
  • Drop shadow: 33% black, 4px blur, 2px offset.
  • Highlight color DCE4FA
Sliders:
  • 5px tall, Rounded corners
  • Stroke 1px #8F8F8F
Scroll bars:
  • Background: f0f0f0
  • Thumb: same as active button, even in depressed state
Menus

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


Cursors


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