Benton Sans is the font used in all product UI
$primaryFontFamily: "Benton Sans", "benton sans", $helvetica, sans-serif;
Creates px units for font-size based on a preset typographic scale.
We use a 3:4 (Perfect Fourth) Scale with 18px and 15px as base units. You can find a chart of this scale here http://modularscale.com/scale/?px1=18&px2=15&ra1=1.333&ra2=0.
font-size: fontSize(4); // Outputs 28pxfont-size: fontSize(0); // Outputs 16pxfont-size: fontSize(-2); // Outputs 12px<span style="font-size: [modifier class]">The world's most important industry.</span>We use Benton Sans and Condensed in several weights:
thin: 100, light: 300, normal: 400, semibold: 600, and bold: 700, extra bold: 800.
<h3 style="font-weight: [modifier class]">Benton Sans ([modifier class])</h3>We aren't strict about when to use header tags and when just to use spans with the
font-size set manually.
Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.
Mauris iaculis porttitor posuere. Praesent.<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<p>Etiam at <b>risus</b> et justo dignissim congue. <a href="#">Donec congue lacinia dui</a>, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus.</p>
<small>Mauris iaculis porttitor posuere. Praesent.</small>Nulla facilisi. Duis aliquet tegestas purus in blandit. Curabitur.
<p>Nulla facilisi. Duis aliquet t<span class="ui-highlight">egestas pur</span>us in blandit. Curabitur.</p>Sometimes you've just got to tell people more stuff about stuff.
There was a problem connecting to the OpenGov server We'll automatically try to connect you again in a few seconds.
There was a problem connecting to the OpenGov server We'll automatically try to connect you again in a few seconds.
<p class="ui-null [modifier class]">
<strong>There was a problem connecting to the OpenGov server</strong>
We'll automatically try to <a href="#">connect</a> you again in a few seconds.
</p>Use when there's no data, or otherwise nothing to show on a page or component.
By default, the null message will be centered and offset pleasantly from the
top of the component. If you need the message to be centered on the page
vertically and horizontally, add .align-center.
There was a problem connecting to the OpenGov server We'll automatically try to connect you again in a few seconds.
There was a problem connecting to the OpenGov server We'll automatically try to connect you again in a few seconds.
<p class="ui-null [modifier class]">
<strong>There was a problem connecting to the OpenGov server</strong>
We'll automatically try to <a href="#">connect</a> you again in a few seconds.
</p>More label-y, less badge-y.
<span class="comp-label [modifier class]">Component Label</span>