Design manual

Everything you need to make Torpio pages look like Torpio. One CSS file, plain HTML classes, no build step.

Getting started

Add one line to the <head> of your page:

<link rel="stylesheet" href="https://torp.io/torpio.css">

All classes are short and readable. All design values are CSS variables that start with --t-. You can override them in your own styles.

Principles

Logo

The logo is torp + io. The “io” means input/output and is drawn as a bar and a ring, like 1 and 0. It always has its own colour, --t-io.

On light — logo.svg

On dark — logo-white.svg

Icon / favicon — mark.svg

• Keep clear space around the logo equal to the height of the “o”, at minimum.
• Minimum height: 20px on screen. Use the icon when space is smaller.
• Do not stretch, rotate, recolour or add effects to the logo.
• Use logo.svg on light backgrounds and logo-white.svg on dark backgrounds.

Animation. On the home page the “io” switches on: the “i” grows, its dot pops in, and the “o” draws itself. To use it, put the logo SVG inline (copy it from /index.html) and add class="logo-animated". It is turned off for people who prefer reduced motion.

See the logo concepts we explored →

Colors

Deep blue is the brand color. Use it for actions and highlights. Use neutrals for everything else.

Brand

Neutrals & status

Typography

We use the system font of the device. It is fast and needs no downloads.

<h1>Heading 1</h1>
<p class="lead">Lead text</p>
<p class="muted">Muted text</p>

Spacing

Spacing uses a 4px scale. Use the variables, not raw numbers.

Layout

<section class="section">
  <div class="container">
    <div class="grid">
      <div class="card">…</div>
      <div class="card">…</div>
    </div>
  </div>
</section>

Buttons

Use one primary button per view. Use secondary or ghost for other actions.

<button class="btn">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-danger">Danger</button>
<a class="btn btn-lg" href="#">Link as button</a>

Cards

<div class="card">…</div>
<div class="card card-raised">…</div>

Tables

Wrap tables in .table-wrap so they scroll on small screens. Use .num for numbers.

<div class="table-wrap">
  <table class="table table-striped table-hover">
    <thead><tr><th>Project</th><th class="num">Hours</th></tr></thead>
    <tbody><tr><td>Platform setup</td><td class="num">120</td></tr></tbody>
  </table>
</div>

Forms

<div class="field">
  <label class="label" for="name">Name</label>
  <input class="input" id="name">
  <span class="hint">Help text</span>
</div>
<select class="select">…</select>
<textarea class="textarea"></textarea>
<label class="check"><input type="checkbox"> Label</label>
<!-- Add .is-invalid to an input to show an error -->

Alerts & badges

<div class="alert alert-success">…</div>
<span class="badge badge-warning">Waiting</span>

Status

A status pill shows availability. Add .status-busy when you are booked.

<p class="status"><span class="status-dot"></span>Available for new projects</p>
<p class="status status-busy"><span class="status-dot"></span>Booked until March</p>

Terminal

A terminal window for showing commands and code. The home page adds a small script that types the text automatically.

$ torpio build
// turning input into output
✓ built in 0.42s

<div class="terminal">
  <div class="terminal-bar"><span></span><span></span><span></span></div>
  <pre class="terminal-body"><span class="prompt">$ torpio build</span>
<span class="comment">// a comment</span>
<span class="ok">✓ done</span><span class="cursor"></span></pre>
</div>