Typography

Regional font families

Regional sites use the following font families. These are defined in the regional delta stylesheets.

ChinaArial and Lato
JapanArial and Lato
Korea'Nanum Gothic' for homepage, header and footer

Headings

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available, for when you want to match the font styling of a heading but still want your text to be displayed inline.

All headings use Google's Nunito Sans font family.

  • H1 element

  • H2 element

  • H3 element

  • H4 element

  • H5 element
  • H6 element
<h1>h1 element</h1> or <p class="h1">h1. class</p>
<h2>h2 element</h2> or <p class="h2">h2. class</p>
<h3>h3 element</h3> or <p class="h3">h3. class</p>
<h4>h4 element</h4> or <p class="h4">h4. class</p>
<h5>h5 element</h5> or <p class="h5">h5. class</p>
<h6>h6 element</h6> or <p class="h6">h6. class</p>

Create lighter, secondary text in any heading with a generic <small> tag or the .small class.

h1. BaseCamp heading Secondary text


h2. BaseCamp heading Secondary text


h3. BaseCamp heading Secondary text


h4. BaseCamp heading Secondary text


h5. BaseCamp heading Secondary text

h6. BaseCamp heading Secondary text
<h1>h1. BaseCamp heading <small>Secondary text</small></h1>
<h2>h2. BaseCamp heading <small>Secondary text</small></h2>
<h3>h3. BaseCamp heading <small>Secondary text</small></h3>
<h4>h4. BaseCamp heading <small>Secondary text</small></h4>
<h5>h5. BaseCamp heading <small>Secondary text</small></h5>
<h6>h6. BaseCamp heading <small>Secondary text</small></h6>

Body copy

BaseCamp's global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition, <p> (paragraphs) receive a bottom margin of 10px and a top margin of 5px.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

Lead body copy

Make a paragraph stand out by adding .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

Emphasis

Make use of HTML's default emphasis tags with lightweight styles.

Small text

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. Heading elements receive their own font-size for nested <small> elements.

You may alternatively use an inline element with .small in place of any <small>.

This line of text is meant to be treated as fine print.

<p class="small">This line of text is meant to be treated as fine print.</p>

Large text

For enlarging inline or blocks of text, use the <large> tag to set text at 115% the size of the parent.

You may alternatively use an inline element with .large in place of any <large>.

This line of text is increased to 115% of parent element.

<p class="large">This line of text is increased to 115% of parent element.</p>

      <p><large>This line of text is increased to 115% of parent element.</large></p>

Bold

For emphasizing a snippet of text with a heavier font-weight.

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

Italics

For emphasizing a snippet of text with italics.

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

Alternate elements

Feel free to use <b> and <i> in HTML5. <b> is meant to highlight words or phrases without conveying additional importance while <i> is mostly for voice, technical terms, etc.

Alignment classes

Easily realign text to components with text alignment classes.

  • Left aligned text
  • Center aligned text
  • Right aligned text
  • Justified text will align to the right side, which is different than let aligned text which has aragged right display.
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>

Lists

Unordered

A list of items with the default style list.

  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
      • Lorem ipsum dolor sit amet
      • Consectetur adipiscing elit
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
<ul>
  <li>...</li>
</ul>

Unordered with boxes class

A list of items with boxes as the list style.

  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
      • Phasellus iaculis neque
      • Purus sodales ultricies
        • Lorem ipsum dolor sit amet
        • Consectetur adipiscing elit
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
<ul class="boxes">
  <li>...</li>
</ul>

Ordered

A list of items in which the order does explicitly matter.

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
    1. Integer molestie lorem at massa
    2. Facilisis in pretium nisl aliquet
      1. Integer molestie lorem at massa
      2. Facilisis in pretium nisl aliquet
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
<ol>
  <li>...</li>
</ol>

Inline

Place all list items on a single line with display: inline-block; and some light padding.

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
<ul class="list-inline"><li>...</li></ul>

Definition

A list of terms with their associated descriptions.

Definition lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio.
Gravida
Donec id elit non mi porta at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl><dt>...</dt><dd>...</dd></dl>

Definition Horizontal

Make terms and descriptions in <dl> line up side-by-side. Starts off stacked like default <dl>s, but when the navbar expands, so do these.

Definition lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio.
Gravida
Donec id elit non mi porta at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
<dl class="dl-horizontal"><dt>...</dt><dd>...</dd></dl>

Auto-truncating

Horizontal description lists will truncate terms that are too long to fit in the left column with text-overflow. In narrower viewports, they will change to the default stacked layout.

Main Color Palette

Grayscale

  • .nxp-gray-xxxlight#f6f7f8
  • .nxp-gray-xxlight#e5eaed
  • .nxp-gray-xlight#d6dce0
  • .nxp-gray-light#bfc8cf
  • .nxp-gray#98a8b4
  • .nxp-gray-dark#64798a
  • .nxp-gray-xdark#4e616e
  • .nxp-gray-xxdark#333f48
  • .nxp-gray-xxxdark#20272d

NXP Orange

  • .nxp-orange-xxxlight#fef7ec
  • .nxp-orange-xxlight#fcebcf
  • .nxp-orange-xlight#fbd89d
  • .nxp-orange-light#fdc058
  • .nxp-orange#f59b00
  • .nxp-orange-dark#c9830b
  • .nxp-orange-xdark#9b6406
  • .nxp-orange-xxdark#593a06
  • .nxp-orange-xxxdark#392401

NXP Blue

  • .nxp-blue-xxxlight#f3f7fc
  • .nxp-blue-xxlight#deecf7
  • .nxp-blue-xlight#c6def1
  • .nxp-blue-light#a6cdeb
  • .nxp-blue#6faddf
  • .nxp-blue-dark#4295d7
  • .nxp-blue-xdark#2074b6
  • .nxp-blue-xxdark#0e4e81
  • .nxp-blue-xxxdark#042b49

NXP Green

  • .nxp-green-xxxlight#f6f7e3
  • .nxp-green-xxlight#f2f5c9
  • .nxp-green-xlight#e6ec93
  • .nxp-green-light#dae35f
  • .nxp-green#c1cd23
  • .nxp-green-dark#9da904
  • .nxp-green-xdark#6b7302
  • .nxp-green-xxdark#3d4101
  • .nxp-green-xxxdark#262900

Text Color

There are several classes defined to change the color of the text when needed. These are as follows:

.nxp-orange-text For Orange Text

.nxp-black-text For Black Text

.nxp-blue-text For Blue Text

.nxp-white-text For White Text

.nxp-gray-text For Grey Text

.nxp-gray-light-text For Grey Light Text

.nxp-green-text For Green Text

Background Colors

Primary Background

Here is a primary background with a link.

Tables

Basic example

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<table class="table">...</table>

Striped rows

Use .table-striped to add zebra-striping to any table row within the <tbody>.

Cross-browser compatibility

Striped tables are styled via the :nth-child CSS selector, which is not available in Internet Explorer 8.

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
<table class="table table-striped">...</table>

Bordered table

Add .table-bordered for borders on all sides of the table and cells.

#First NameLast NameUsername
1MarkOtto@mdo
MarkOtto@TwBaseCamp
2JacobThornton@fat
3Larry the Bird@twitter
<table class="table table-bordered">...</table>

Centered table

Add .table-centered for all text to be centered.

#First NameLast NameUsername
1MarkOtto@mdo
2MarkOtto@TwBaseCamp
2JacobThornton@fat
3LarryThe Bird@twitter
<table class="table table-centered">...</table>

Table Head Light

Add .table-head-light for the table header to have a white background color and thicker bottom border.

#First NameLast NameUsername
1MarkOtto@mdo
2MarkOtto@TwBaseCamp
2JacobThornton@fat
3LarryThe Bird@twitter
<table class="table-head-light">...</table>

Table Head Light Grey background

Add .table-head-light for the table header to have a white background color and thicker bottom border.

#First NameLast NameUsername
1MarkOtto@mdo
2MarkOtto@TwBaseCamp
2JacobThornton@fat
3LarryThe Bird@twitter
<table class="table-head-light">...</table>

Hover rows

Add .table-hover to enable a hover state on table rows within a <tbody>.

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table class="table table-hover">...</table>

Condensed table

Add .table-condensed to make tables more compact by cutting cell top and bottom padding in half and removing bottom margin from p elements.

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter
<table class="table table-condensed">...</table>

Combined table classes

You can combine table classes to change the the table style. For example, the table below combines .table-head-light, table-striped, and table-bordered.

#First NameLast NameUsername
1MarkOtto@mdo
2MarkOtto@TwBaseCamp
2JacobThornton@fat
3LarryThe Bird@twitter
<table class="table table-head-light table-striped table-bordered">...</table>

Responsive tables

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally up to small devices (under 768px). When viewing on anything larger than 768px wide, you will not see any difference in these tables.

#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
#Table headingTable headingTable headingTable headingTable headingTable heading
1Table cellTable cellTable cellTable cellTable cellTable cell
2Table cellTable cellTable cellTable cellTable cellTable cell
3Table cellTable cellTable cellTable cellTable cellTable cell
<div class="table-responsive"><table class="table">...</table></div>

Forms

Basic example

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements with .form-control are set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.

Example block-level help text here.

<form role="form">
<div class="form-group">
  <label for="exampleInputEmail1">Email address</label>
  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
  <label for="exampleInputPassword1">Password</label>
  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
  <label for="exampleInputFile">File input</label>
  <input type="file" id="exampleInputFile">
  <p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
  <label>
    <input type="checkbox"> Check me out
  </label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>

Don't mix form groups with input groups

Do not mix form groups directly with input groups. Instead, nest the input group inside of the form group.

Inline form

Add .form-inline to your <form> for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.

Requires custom widths

Inputs, selects, and textareas are 100% wide by default in BaseCamp. To use the inline form, you'll have to set a width on the form controls used within.

Always add labels

Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only class.

<form class="form-inline" role="form">
<div class="form-group">
  <label class="sr-only" for="exampleInputEmail2">Email address</label>
  <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
  <label class="sr-only" for="exampleInputPassword2">Password</label>
  <input type="