bicycle brand

the source of truth for bicycle's visual language. everything here flows into bicycle.css — one file, one link, everything consistent.

typography

cormorant garamond. the only typeface. weight and size do all the work.

h1 — a bicycle for the mind

h2 — open something and bike becomes it

h3 — the studio is already set up

h4 — your work is yours

body — your designs live in figma. your thoughts in notion. your conversations in slack. bike is your creative home. everything you make lives here.

text-s — used for captions, labels, and supporting context throughout the interface.

text-xs — metadata, timestamps, secondary labels.

color

semantic tokens from rene.css. no hardcoded hex values. the system adapts to light and dark.

primary

secondary

tertiary

accent

text-primary — the main voice

text-secondary — supporting, context, captions

text-tertiary — metadata, disabled, quiet

spacing

five steps. xs s m l xl. used for padding, gap, and margin. consistent across every surface.

xs — tight groupings, icon labels

s — compact elements, tag clusters

m — default gap between related items

l — section breathing room

xl — page-level padding, section separation

layout

max-width 1140px, centered, padding-xl on all sides. sections stack vertically with gap-xl. columns split with flex-1.

the standard section pattern

<div class="column padding-xl width-full gap-xl" style="max-width:var(--bicycle-max-width)">
  <h3 class="text-center">heading</h3>
  <div class="row gap-column-xl">
    <div class="flex-1 column"><p>left column</p></div>
    <div class="flex-1 column"><p>right column</p></div>
  </div>
</div>

icons

inline svg with rene icon sizes. always use use href="#name" with icons.js loaded.

xs

s

m

l

usage

one line replaces the font import, rene link, and body style.

before

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap">
<link rel="stylesheet" href="https://renecss.org/rene.css">
<body style="font-family: 'Cormorant Garamond', serif;">

after

<link rel="stylesheet" href="https://bicycle.bicycle.computer/brand/bicycle.css">