Editing Aqua (user interface) (section)

== Design elements ==
Aqua uses blue, white, and gray as the principal colors throughout its style. Window toolbars, window backgrounds, buttons, menus and other interface elements are all found in either of these colors. For instance, toolbars and sidebars are often grey or metal-colored, window backgrounds and popup menus are white and buttons (in older systems also scrollbar handles) are accented with a bright blue. In versions of {{Nowrap|OS X}} prior to OS X Yosemite, most controls have a "glass" or "gel" effect applied to them. [[David Pogue]] described this effect as "lickable globs of [[Toothpaste#Modern toothpaste|Crest Berrylicious Toothpaste Gel]]".<ref name="toothpaste">{{cite book
  |last = Pogue|first = David|author-link = David Pogue|title = Macs for Dummies|publisher = Hungry Minds|year = 2000|page = 340|isbn = 0-7645-0703-6|edition = 7th}}</ref>

macOS has few native customization options to change the overall look of the system. Users can choose a graphite appearance instead of the default blue one. When using the graphite appearance, controls have a [[slate]]-like, grey-blue or grey color, including the primary window controls which are red, yellow and green with the default appearance. The appearance option was added at the behest of developers and users who found the blue appearance garish or unprofessional.{{Citation needed|date = December 2015}} {{Nowrap|OS X}} Yosemite added a dark mode that darkens the predominantly white menubar and [[Dock (macOS)|Dock]]. Users can also freely choose a highlight color for text and file selection.

=== Interface elements ===
{{More citations needed section|date=May 2021}}
==== Windows ====
Historically, Aqua had two window designs: the default Aqua windows and "brushed metal" windows. Aqua windows typically have a metal-like or gray titlebar with three buttons on the left side (for closing, minimizing and zooming or entering fullscreen mode). Visually, these buttons used to be placed on top, but later appeared 'sunken' into the window. Aqua windows have almost no frame or outside border, instead [[drop shadow]]s are used to separate and distinguish active from inactive windows. The aesthetic of the window backgrounds changed from pin-striped to white backgrounds. Brushed-metal windows had a thick frame with a metallic texture or dark-gray background and sunken buttons and inner frames. They had the additional property of being draggable at every point of the frame instead of just the titlebar and toolbar. Apple recommended brushed-metal windows for applications that mimic real-world devices (such as [[iTunes]]) or are used to interface with such devices (such as [[iSync]]),<ref>{{Cite web|url = http://www.idemployee.id.tue.nl/g.w.m.rauterberg//lecturenotes/APPLE-Guidelines-2005.pdf|title = Apple Human Interface Guidelines|date = December 6, 2005|access-date = December 7, 2015}}</ref> but was criticised by designers for not following its own guidelines or applying it inconsistently (it was also used in Safari or Finder).<ref>{{Cite web|url = http://daringfireball.net/2004/10/brushedmetal|title = Brushed Metal and the HIG|date = October 16, 2004|access-date = December 7, 2015|website = Daring Fireball|last = Gruber|first = John|author-link = John Gruber}}</ref> Brushed-metal windows have been largely phased out since Leopard and become visually indistinctive from Aqua windows.<ref name=":0" />

In addition to titlebars, windows can also have toolbars with separate buttons. Up to Leopard, toolbars were visually separated from the titlebar and had the same background as the window frame or were pin-striped.<ref name=":1" /> Leopard introduced a unified style that extended the metal-like background of the titlebar to the toolbar, making it appear as one whole.<ref name=":0" /> Optionally, a separator could be placed between the titlebar and the toolbar to mimic the previous style. OS X Yosemite brought a compacter version of the toolbar that fused the titlebar and toolbar together, made it shorter and removed the window title (for example, in Safari 8 and later).<ref name=":2"/>

Drawers are accessory [[sidebar (computing)|sidebar]] views that can slide out from any edge of a window except the top edge. They can be resized perpendicular to their window edge but follow the window's size in the other direction. Drawers were once frequently used to display controls and information that did not need to be always visible, but Apple now recommends against their use.<ref>{{cite web|url=https://developer.apple.com/library/mac/documentation/userexperience/conceptual/applehiguidelines/Windows/Windows.html|title=OS X Human Interface Guidelines|quote=Drawers are rarely used in modern Mac apps. As much as possible, redesign your UI to avoid using drawers; if you're creating a new app, avoid adding a drawer to the design.}}</ref>

Sheets are [[dialog boxes]] that are [[Modal window|modal]] to a specific window. When opened, they are thrust towards the user like a sheet of paper, hence the name. They are partially transparent and focus attention on the content of the sheet. The parent window's controls are disabled until the sheet is dismissed, but the user is able to continue work in other windows (including those in the same application) while the sheet is open.

==== Menus ====
[[File:Leopard Menu Bar Icons.jpg|thumb|The menu bar in Leopard]]
Menus are backed with a slightly translucent solid gray, and when menu items are highlighted they appear blue. In [[Application software|application]] menus, which run in a single bar across the top of the [[Computer monitor|screen]], keyboard shortcuts appear to the right-hand side of the menu whilst the actual menu item is on the left. In Yosemite, the menus are much more translucent and have a blur effect.

Drop down menus for use in windows themselves are also available in several varieties. The standard "pop up" menu is white with a blue end cap with opposing arrows, whilst 'pull down' menus only have one downward facing arrow in the end cap. 'Pull down' menus are available in four different Aqua varieties, most of which have fallen into disuse in later macOS releases.

==== Text boxes and fields ====
Text boxes are black on white text with a sunken effect border. In addition to regular square text boxes, rounded search text boxes are available . For more extensive text requirements, there is also a multi-line text field. A combined text box and pull down menu is available, which allows the user to type in a value in addition to choosing from a menu. There is also a combination textbox and picker control, which allows the user to type in a date and time or edit it with directional buttons. [[Mac OS X Tiger|Mac OS X 10.4]] introduced a new interface element that allows the user to drag non-editable 'tokens' to a text box, between which text can be typed. Whitespace before and after the tokens is [[trim (programming)|trim]]med.

==== Push buttons ====
Standard push buttons with rounded corners are available in two varieties: white and blue. A blue button is the default action, and in OS releases prior to Yosemite, would appear to pulse to prompt the user to carry out that action. The action of a blue button can usually also be invoked with the [[return key]]. White buttons are usually associated with all other actions.

Also available are rounded bevel buttons, designed to hold an icon; standard square buttons; glass square buttons and round buttons. In addition, circular, purple [[online help]] buttons are available which display help relative to the current task when clicked. [[Disclosure widget|Disclosure triangles]], although technically buttons, allow views of controls to be shown and hidden to preserve space.

==== Checkboxes and radio buttons ====
In macOS, empty check boxes are small, white rounded rectangles. When they are checked, they turn blue and a [[checkmark]] is present. They are essentially buttons which can be toggled on or off. Radio buttons are similar in appearance and behaviour except that they are circular and contain a dot instead of a check. Radio buttons are classed into groups of which only one can  be activated at a time.

In Yosemite, a short animation was added to show the checkbox or radio button filling in.

==== Tables and lists ====
Tables and lists can be broadly categorised in three ways: A standard multi-columnar table with space to enter values or place other interface elements such as buttons; An outline view that can contain disclosure triangles to show and hide sets of data; and a [[Miller columns]] view akin to the column view in the [[Finder (software)|Finder]]. All table views can use alternating blue and white row backgrounds.

==== Progress indicators ====
Two main types of loading/saving progress indicator are available: a progress bar or a monochromatic spinning wheel (not the [[spinning pinwheel]]). The progress bar itself is available in two varieties: indeterminate, which simply shows diagonal blue and white stripes in animation with no measure of progress; or determinate, which shows a blue pulsing bar against a white background proportional to the percentage of a task completed. The spinning wheel indicator, also found in the Mac OS X startup screen since version 10.2, is simply a series of 12 increasingly darker grey lines arranged circularly, like the side view of a [[spoke]]d wheel rotating clockwise. Many other interfaces have adopted this device, including the [[Firefox]] and [[Camino (web browser)|Camino]] web browsers and many [[Web 2.0]]-influenced web sites.

In Yosemite, the progress bar was changed to a thin, light gray. The "indeterminate" variation kept the pulses, but slower and spaced out. A progress indicator now appears during boot, replacing the spinning wheel indicator found in earlier versions.

==== Miscellaneous ====
Sliders are available in three types: one with tick marks and a triangular scrubber, one with a round scrubber and no tick marks and a circular slider which can be rotated. All are available horizontally or vertically. The circular slider is simply a gray dot on a white circle which can be rotated to set values.

macOS has a standard control for picking colors which appears as a regular square button with a color sample in the middle. When clicked, it shows the standard macOS [[palette window|color palette]].

Tabs in macOS are nearly identical to push buttons, with the unselected tab(s) being white and the selected tab being blue. Image "wells" are also available: a small, sunken container into which image files can be dropped. When the well contains an image, it can display a thumbnail representation of the file's contents.

=== Typefaces ===
Apple used [[Lucida Grande]] as the system typeface from the first release Cheetah to Mavericks. Occasionally, Apple also used [[Helvetica]] and [[Helvetica Neue]], such as in applications like [[Mail (Apple)|Mail]] and [[iPhoto]]. The system typeface was changed to Helvetica Neue in Yosemite and changed again in El Capitan into Apple's own [[San Francisco (2014 typeface)|San Francisco]] typeface. macOS makes use of system-wide typeface [[Spatial anti-aliasing|anti-aliasing]] to make edges appear smoother and preserve the distinct shapes of typefaces, sometimes at the cost of sharpness and clarity.

=== Animations ===
[[File:Dashboard Ripple.png|thumb|A widget being added to the [[Dashboard (Mac OS)|Dashboard]] in Mac OS X 10.4. Shown here is the ripple effect.]]
Aqua makes heavy use of [[animation]]. Examples include:
* Dock [[icons (computing)|icons]] bounce up and down as their corresponding applications are launched.
* Dock icons also bounce up and down, in a different rhythm, when a background application requires the user's attention.
* Dock icons can increase in size when approached by the cursor. This feature (called "magnification") is optional.
* When minimized, windows are "sucked" into the Dock using the "Genie effect" or "Scale effect." Both of the effects are customizable by the user. The former makes a window turn into a curvy shape so it looks like reverse animation of a genie exiting a lamp, and the latter scales down the window until it is small enough to be in the Dock. By pressing the [[shift key]], both effects can be seen in [[slow motion]]. These keystrokes can also be applied to other Aqua effects such as [[Apple Dashboard (software)|Dashboard]], [[Mission Control (macOS)|Mission Control]] and [[Apple Front Row|Front Row]]. Holding Control as well as Shift makes the minimize effect take twice as long as just holding Shift. Holding just Control also slows down the animation slightly. There is another undocumented dock effect called "Suck" which can be enabled by hand editing a configuration file or using a Terminal command;<ref name="osxdaily2007">{{cite web|url=http://osxdaily.com/2007/04/12/change-the-minimize-effect-in-mac-os-x/|title=Change the Minimize Effect in Mac OS X via Defaults Command|date=April 12, 2007}}</ref> this appears to be the same effect that accompanies the removal of widgets from the Dashboard.
* When a folder on the [[Desktop metaphor|desktop]] is opened or closed, the corresponding Finder window appears to come from, or disappear into, the folder icon rather than just appearing from nowhere. This effect was present in the [[Classic Mac OS]] Finder as ZoomRects, but had disappeared from early Mac OS X developer releases.
* Sheets are "posted" out of window title bars. Sheets appear to be pieces of paper being thrust toward the user, or slide out like paper from a tray.
* Dashboard widgets appear to fly onto the screen. Dashboard widgets appear with a "ripple" effect, as if being dropped onto the surface of a [[pond]]. When removed, widgets are sucked into the close button as if being drawn into a vacuum. This effect can be applied on windows being minimized to the Dock.<ref name="osxdaily2007"/> Starting from Mac OS X 10.7 Lion, the default Dashboard configuration differs from that of previous versions (it takes its own space in Mission Control), causing the rippling effect to be removed. However, the user can re-invoke the original Dashboard (along with the ripple effect) in System Preferences.
* The contents of a [[Stacks (Mac OS)|stack]] will appear to spring out from behind the icon when clicked.
* In the [[Mac OS X Public Beta]], docked items dragged onto the desktop simply disappeared, apparently 'dropping' onto the desktop. This behaviour was changed with [[Mac OS X 10.0]]; from this release onward, items dragged off the dock would 'disappear' in a cartoon-like puff of smoke, an effect which Apple later used in various places (such as Safari's Bookmarks Bar and iPhoto's tag removal). A similar effect was used in Apple's [[Newton OS]]. In OS X 10.10 Yosemite, this effect is no longer present; the item simply disappears, however can still be seen on the boot picker of Intel-based Mac computers when a boot device (such as a external hard-drive) is disconnected from the computer.
* Starting from Mac OS X 10.7 Lion, windows which contain a document or website open with an animation similar to [[Windows Aero]]. A similar zoom effect can be seen when opening files from the desktop, or within a [[Finder (software)|Finder]] window. This also applies to the entire desktop when a user logs in.
*When fast user switching is used, Apple's "Cube" effect is used to transfer between desktops and/or the login window. 

Many of these effects can be turned off by the user or are only available on supported hardware.

=== Underlying technology ===
Aqua is powered by the [[display server#Quartz Compositor|display server]] [[Quartz Compositor]].