Try a search!

DuckDuckGo Style Guide

A guide to stylish elements for all developers.

About This Page


This is a largely technical document, outlining common elements, styles, and conventions designed for use on DuckDuckGo — either on the results page itself via instant answers, or on static pages just like this one.

Table of Contents

Buttons


Buttons are attention-grabbing, and users will expect them to 'do' something, so don't let them down. Always link your buttons or fire a javascript function on click - don't just use these to fancy the place up!

Variations

Buttons come in a few different flavours. The default variety has a white-ish background. Be sure to use the correct variant based on where you'll be displaying your buttons:

Default Alternate Wire Inline

Critical Primary Primary(Alt) Secondary
<span class="btn">Default</span>
<span class="btn btn--alt">Alternate</span>
<span class="btn btn--wire">Wire</span>
<span class="btn btn--inline">Inline</span>
<span class="btn btn--critical">Critical</span>
<span class="btn btn--primary">Primary</span>
<span class="btn btn--primary--alt">Primary(Alt)</span>
<span class="btn btn--secondary">Secondary</span>

Grouping

Buttons can be squished together to give a 'tabbed' appearance. This can be accomplished in two different ways - either by wrapping the buttons with a .btn-grp element, or by applying the .btn--grp class to each item. (The latter could allow you to re-order the buttons if needed.)

Tab 1 Tab 2 Tab 3
Tab 4 Tab 5 Tab 6
<div class="btn-grp">
	<span class="btn">Tab 1</span>
	<span class="btn">Tab 2</span>
	<span class="btn">Tab 3</span>
</div>

<span class="btn  btn--grp  btn--grp--fakefirst">Tab 4</span>
<span class="btn  btn--grp  btn--grp--first  pull-left">Tab 5</span>
<span class="btn  btn--grp  btn--grp--last">Tab 6</span>

Icons


Icons are a great way to visualize controls and simplify labels. We have a built-in icon font that you can use by applying the .ddgsi class to any element. The available icons are:

.ddgsi-alert

.ddgsi-arrow-down

.ddgsi-arrow-left

.ddgsi-arrow-right

.ddgsi-arrow-top

.ddgsi-arrow-up

.ddgsi-check

.ddgsi-check-sign

.ddgsi-circle

.ddgsi-clock

.ddgsi-close

.ddgsi-close-bold

.ddgsi-cloudsave

.ddgsi-comment

.ddgsi-cry

.ddgsi-down

.ddgsi-download

.ddgsi-eye

.ddgsi-football

.ddgsi-grid

.ddgsi-heart

.ddgsi-home

.ddgsi-info

.ddgsi-left

.ddgsi-left-big

.ddgsi-left-sign

.ddgsi-less-sign

.ddgsi-loupe

.ddgsi-marker

.ddgsi-menu

.ddgsi-minus

.ddgsi-more

.ddgsi-more-sign

.ddgsi-move

.ddgsi-music

.ddgsi-news

.ddgsi-next

.ddgsi-pause

.ddgsi-play

.ddgsi-plus

.ddgsi-prev

.ddgsi-region

.ddgsi-right

.ddgsi-right-big

.ddgsi-right-sign

.ddgsi-star

.ddgsi-swap

.ddgsi-t-down

.ddgsi-t-left

.ddgsi-t-right

.ddgsi-t-up

.ddgsi-up

.ddgsi-upload

.ddgsi-uploaded

.ddgsi-user

.ddgsi-users

Alerts & Messages


Useful to draw interest on content-heavy pages.

This is a default message.
This is an info message.
This is a help message.
This is a warning message.
<div class="msg">This is a default message.</div>
<div class="msg  msg--info">This is an info message.</div>
<div class="msg  msg--help">This is a help message.</div>
<div class="msg  msg--warning">This is a warning message.</div>

Text & Colors


Text Sizes

The vast majority of DuckDuckGo has been rebuilt using em units in order to better accommodate user settings. As a result, virtually all element sizing can be adjusted simply by changing the font size.

We have a built-in double-stranded "t-shirt sizing" scale that will allow you to quickly adjust the text size of any element. Use the .t- prefix to scale up or down from the base size, or use the .h- prefix to choose header sizes.

XXXXL
XXXL
XXL
XL
L
M
S
XS
XXS
XXXS
XXL Heading
XL Heading
L Heading
M Heading
S Heading
XS Heading
Big Button
<div class="t-xxxxl">XXXXL</div>
<div class="t-xxxl">XXXL</div>
<div class="t-xxl">XXL</div>
<div class="t-xl">XL</div>
<div class="t-l">L</div>
<div class="t-m">M</div>
<div class="t-s">S</div>
<div class="t-xs">XS</div>
<div class="t-xxs">XXS</div>
<div class="t-xxxs">XXXS</div>

<div class="h-xxl">XXL Heading</div>
<div class="h-xl">XL Heading</div>
<div class="h-l">L Heading</div>
<div class="h-m">M Heading</div>
<div class="h-s">S Heading</div>
<div class="h-xs">XS Heading</div>

<span class="t-double btn  btn--alt  btn--fill">Big Button</span>

In addition to the above scales, we've also implimented a 'precision' scale that should give you the appropriate scalable units according to a 'pixel' scale. (Actually implimented using rem units though, to maintain accessibility and functionality with our text size settings.) Simply use a prefix of .tx-- and then your desired pixel size.

25px
21px
19px
17px
16px
15px
14px
13px
12px
11px
<div class="tx--25">25px</div>
<div class="tx--21">21px</div>
<div class="tx--19">19px</div>
<div class="tx--17">17px</div>
<div class="tx--16">16px</div>
<div class="tx--15">15px</div>
<div class="tx--14">14px</div>
<div class="tx--13">13px</div>
<div class="tx--12">12px</div>
<div class="tx--11">11px</div>

Text Colors

As a general rule (for the moment) we want to keep the results page largely monochrome. That said, some variety in text shading is often necessary. To save you time and keep our page looking good across all themes, please stick to these styling classes when adjusting text colors in your instant answers:

Primary Text

Primary dark color.
Alternate dark color.

Secondary Text

Primary light color.
Alternate light color.

Feel free to apply these classes to spans, divs, or any other text element. This is just an example.

<h3 class="text--primary">Primary Text</h3>
<div class="tx-clr--dk">Primary dark color.</div>
<div class="tx-clr--dk2">Alternate dark color.</div>

<h3 class="text--secondary">Secondary Text</h3>
<div class="tx-clr--lt">Primary light color.</div>
<div class="tx-clr--lt2">Alternate light color.</div>

Color Palette

Occasionally you may need to use these colors directly as either a background or as text. We have classes for those as well!

.bg-clr--white
.tx-clr--white
.bg-clr--white
.tx-clr--white
.bg-clr--silver-light
.tx-clr--silver-light
.bg-clr--silver-light
.tx-clr--silver-light
.bg-clr--silver
.tx-clr--silver
.bg-clr--silver
.tx-clr--silver
.bg-clr--silver-dark
.tx-clr--silver-dark
.bg-clr--silver-dark
.tx-clr--silver-dark
.bg-clr--platinum-light
.tx-clr--platinum-light
.bg-clr--platinum-light
.tx-clr--platinum-light
.bg-clr--platinum
.tx-clr--platinum
.bg-clr--platinum
.tx-clr--platinum
.bg-clr--platinum-dark
.tx-clr--platinum-dark
.bg-clr--platinum-dark
.tx-clr--platinum-dark
.bg-clr--platinum-darker
.tx-clr--platinum-darker
.bg-clr--platinum-darker
.tx-clr--platinum-darker
.bg-clr--grey-light
.tx-clr--grey-light
.bg-clr--grey-light
.tx-clr--grey-light
.bg-clr--grey
.tx-clr--grey
.bg-clr--grey
.tx-clr--grey
.bg-clr--grey-dark
.tx-clr--grey-dark
.bg-clr--grey-dark
.tx-clr--grey-dark
.bg-clr--slate-light
.tx-clr--slate-light
.bg-clr--slate-light
.tx-clr--slate-light
.bg-clr--slate
.tx-clr--slate
.bg-clr--slate
.tx-clr--slate
.bg-clr--red-light
.tx-clr--red-light
.bg-clr--red-light
.tx-clr--red-light
.bg-clr--red
.tx-clr--red
.bg-clr--red
.tx-clr--red
.bg-clr--red-dark
.tx-clr--red-dark
.bg-clr--red-dark
.tx-clr--red-dark
.bg-clr--blue-light
.tx-clr--blue-light
.bg-clr--blue-light
.tx-clr--blue-light
.bg-clr--blue
.tx-clr--blue
.bg-clr--blue
.tx-clr--blue
.bg-clr--blue-dark
.tx-clr--blue-dark
.bg-clr--blue-dark
.tx-clr--blue-dark
.bg-clr--green
.tx-clr--green
.bg-clr--green
.tx-clr--green
.bg-clr--gold
.tx-clr--gold
.bg-clr--gold
.tx-clr--gold
.bg-clr--purple
.tx-clr--purple
.bg-clr--purple
.tx-clr--purple

Forms


Forms are mostly for internal use, and primarially for gathering feedback or accepting newsletter subscriptions.

Newsletter Form

One field with a big button. Checkmarks optional.



Feedback Form

X
Cancel Send
<form class="frm  frm--vrt">
	<label class="frm__label">Form Field</label>
	<input type="text" class="frm__input" />
	<label class="frm__label">Form Field</label>
	<div class="frm__input--clearable">
		<input type="text" disabled="disabled" class="frm__input  frm__input--disabled" />
		<a class="frm__input__clear">X</a>
	</div>
	<label for="guide-textarea" class="frm__label">Text Box:</label>
	<textarea class="frm__text" placeholder="Enter your text" id="guide-textarea"></textarea>
	<div class="frm__buttons  pull-right">
		<span class="btn  btn--alt  frm__btn">Cancel</span>
		<input type="submit" class="btn  btn--primary  frm__btn" value="Send">
	</div>
</form>

Grids


It may occasionally be necessary to visualize pages or results by breaking things up into a grid. We've come up with an intuitive grid system to help with this:

Easy to Use

Careful consideration was given to the fact that these could see heavy use, so we wanted to make sure that the naming made sense and was easy to recall. The result is a hybrid system with simple fractions and multiples of ten:

.ninety
.ten
.eighty
.twenty
.seventy
.thirty
.sixty
.forty
.fifty
.fifty
.quarter
.threequarter(s)
.third
.twothird(s)
.half
.half

With or Without Wrappers

The grid system can be used with the correct "control" classes (.gw on a parent element, and .g on each grid item), or it can work without since the default behaviour for all defined grid sizes is to float: left;.

.half
.half
.g.half
.g.half
<div class="fix">
	<div class="guide-grid  half">.half</div>
	<div class="guide-grid  half">.half</div>
</div>
<div class="gw">
	<div class="g  half"><span class="guide-grid">.g.half</span></div>
	<div class="g  half"><span class="guide-grid">.g.half</span></div>
</div>

Responsiveness


We want all of our designs to look amazing across all platforms. Somtimes that means making small tweaks at different screen sizes, and sometimes it calls for major differences. We've made a wide variety of options available to you.

Horizontal Breakpoints

When relatively minor tweaks are needed, they're usually best handled with these built-in helpers. We've retained the "t-shirt sizing" methodology with our horizontal breakpoints as well, with sizes ranging from extra-small (--screen-xs) to extra-large (--screen-xl).

It should be noted that the 'default' styling essentally acts as an undeclared breakpoint somewhere betwen medium (--screen-m) and large (--screen-l). Doing it this way allows us to easily cater to browsers that don't support media queries without needing to support separate stylesheets or a myriad of edge-cases. The result of this is that the 'medium', 'small', and 'extra-small' breakpoints are "max-width" media queries, and the 'large' and 'extra-large' are "min-width".

Current Screen Size:
Default Large Extra-Large Medium Small Extra-Small
<span class="hd-lg">
	<span class="hide--screen-m  hide--screen-l">Default</span>
	<span class="hide  show--screen-l  hide--screen-xl">Large</span>
	<span class="hide  show--screen-xl">Extra-Large</span>
	<span class="hide  show--screen-m  hide--screen-s">Medium</span>
	<span class="hide  show--screen-s  hide--screen-xs">Small</span>
	<span class="hide  show--screen-xs">Extra-Small</span>
</span>

Responsive Grids

All grids auto-collapse at the "small" screen size as a convenience feature.

Six-column grids just don't work on mobile. That should be obvious. Achieving the best layout often means adjusting the column count for different screen sizes. Adjusting your grid on the fly is easy - use our grid names, and combine them with the responsive modifiers from the above example.

Four-Column Grid, Collapse to Halves
Or go crazy...
<div class="gw">
		<div class="g  quarter  half--screen-s"><span class="guide-grid"> </span></div>
		<div class="g  quarter  half--screen-s"><span class="guide-grid"> </span></div>
		<div class="g  quarter  half--screen-s"><span class="guide-grid"> </span></div>
		<div class="g  quarter  half--screen-s"><span class="guide-grid"> </span></div>
</div>

<div class="gw">
		<div class="g  ninety--screen-xl  eighty--screen-l  seventy  sixty--screen-m  fifty--screen-s  forty--screen-xs">
				<span class="guide-grid"> </span>
		</div>
		<div class="g  ten--screen-xl  twenty--screen-l  thirty  forty--screen-m  fifty--screen-s  sixty--screen-xs">
				<span class="guide-grid"> </span>
		</div>
</div>

Vertical Responsiveness

We are very sensitive to the use of vertical space on our results page. It becomes even more critical to conserve vertical pixels when on a small desktop screen. As a result, we apply the .use-opts class to the root document when on a vertically small screen. This allows developers to specify 'optional' areas of their instant answer that can be disabled or otherwise adjusted in order to conserve screen real-estate.

In addition to completely disabling elements, their positioning and text size could be adjusted as well.

.use-opts not applied
.opt--right .opt--left

Text size can also be adjusted.

Either up

or down...

Either subtly...

or in less than subtle ways.

Answer Structure


There are many useful built-in templates that you are welcome to use when putting together an instant answer. Sometimes though, you need to color a bit outside the lines. This is an overview of some of the primary structural classes that you can build from.

.zci

This is the main wrapper for all instant answers. It is pre-generated for you and should require no additional styling. It is hidden by default, and only displayed with the .is-active class.

<div class="zci"></div>

.cw and .zci__main

.cw is a global width controller. .zci__main indicates the primary answer area, and applies the correct left padding to maintain the page's 'gutter' layout. Certain full-width answer types (such as maps) may exclude these classes.

<div class="zci">
	<div class="cw">
		<div class="zci__main"></div>
	</div>
</div>

.zci__aux

This is a secondary (auxiliary) section, generally aligned on the right side of the screen. Home of the infobox.

<div class="zci">
	<div class="cw">
		<div class="zci__main"></div>
	</div>
	<div class="zci__aux"></div>
</div>

Headers & Content

Striking the correct balance can be tricky. We've done most of the hard stuff for you - just mix-and-match our built-in classes to display your content.

Header

Main Answer Content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.

HeaderNested Subheader

Main Answer Content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.

Header

Subheader
Main Answer Content - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
<div class="zci is-active">
	<h1 class="zci__header">Header</h1>
	<div class="zci__content">Main Answer Content</div>
	<div class="zci__links"><a href="#" class="zci__more-at">More at DuckDuckGo</a></div>
</div>
<div class="zci is-active">
	<h1 class="zci__header has-sub">Header<span class="zci__header__sub">Nested Subheader</span></h1>
	<div class="zci__content">Main Answer Content</div>
	<div class="zci__links"><a href="#" class="zci__more-at">More at DuckDuckGo</a></div>
</div>
<div class="zci is-active">
	<h1 class="zci__header">Header</h1>
	<div class="zci__subheader">Subheader</div>
	<div class="zci__content">Main Answer Content</div>
	<div class="zci__links"><a href="#" class="zci__more-at">More at DuckDuckGo</a></div>
</div>

Captions

Simple one-line answers can be very useful! Simply style your short answers with the .zci__caption class.

234 + 254 = 488
<div class="zci__caption">234 + 254 = 488</div>

Layouts


We've come up with a few great ways to display content that can be used in instant answers.

Info Layouts

Used for Wikipedia among many others, this layout should be used when the real focus is that informative block of text. It uses the base styles but has some extra wrapping to display images and responsive magic for mobile and small screens.

duck image

Text With Image Subtitle

Auto-cropped image with a header and subtitle. - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
duck image

Mobile Subtitle

Mobile layout with image and subtitle- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.
ddg

Framed Image

No subtitle, displaying 4 lines of content now. - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit.

Icon Layouts

Used to display a short snippet of text with a descriptive icon or badge.

tornado

Non-Standard Icon Style

No pre-set size.

canada

Small Icon

One line descriptive subtitle.

canada

Medium Icon, Large Title

One line descriptive subtitle.

canada

'Large' Icon, Large Title

Descriptive subtitle. Second Subtitle Item

Secondary subtitle.

Default content size is large, and so the text displayed here should be short.
Duck

Small Text Badge

Fits 3-4 characters.

Go

Medium Text Badge

2 Chars. Bounding size stays the same, text size changes.

2

Large Text Badge

1 Char. Bounding size stays the same, text size changes.

List Layouts

For display of simple lists, or tabular data via the record template.

List Data

  • List items accept custom templates
  • So that you can format your data as neccessary.
  • Sometimes that means...
    You might need to split it up.
  • You can use
    custom
    grid layouts!
  • The list layout is flexible, but limits to a maximum height.
  • Users will have an option to 'show more' if necessary.

Popouts


Large tooltips for displaying extra content blocks.

Popouts are intended to be triggered via user interaction, and should be positioned relative to the triggering control. They don't require any javascript positioning to accomplish this — they just need to specify size and direction via classnames, and to toggle the .is-showing class on interactions.

Popout Trigger

Working Examples

Trigger Large Popout Trigger Popout Trigger Small Popout

Care should be taken not to position a popout inside an element set to overflow: hidden; so that they don't appear to be clipped.

Popovers


Popovers are a way of isolating controls or content. They should be used with caution and careful consideration. They require javascript and specific markup in order to function correctly, but on static DDG pages those are easily handled via the 'popover' include.

Follow Us
About Us

DuckDuckGo is an Internet privacy company that empowers you to seamlessly take control of your personal information online, without any tradeoffs. With our roots as the search engine that doesn’t track you, we’ve expanded what we do to protect you no matter where the Internet takes you.

Learn more about our story

© DuckDuckGo. • Privacy, simplified.