Template Blocks

Icons

We reduce to the max.
A free opensource gallery from Phosphor Icons, adapted to the Energyology System.

Invisible

Heart

Home App

Light Mode

Dark Mode

Settings

Arrow Up Right

Arrow Up Left

All the Icons are in the Download Area

Icons Download Area

Buttons

Primary and Secondary

Container 900px. Label 18px, padding 16px on 40px, minimum width 200px. Buttons sit left on the body text axis.

Primary and Secondary

Container 768px. Size and spacing identical to desktop.

Primary and Secondary

Container fluid. Buttons go full width, label drops to 16px, padding to 14px on 24px.

Rules

Primary Outline in the signal colour. One per screen or per message. On hover it fills with Kline Blue in both modes and the label turns off white.
Secondary Outline in the text colour. It fills with the text colour on hover and the label takes the background colour.
Shape No corner radius anywhere. Both buttons keep an identical box height.
Hover Guarded behind a pointer query, so touch devices never get a stuck hover state.
Focus Visible outline on keyboard focus only, 2px with 3px offset. Never removed.
Ripple Web only, on pointer and on keyboard activation. It has no meaning in mail.
Label Names the action. It never wraps, and never carries a full stop.
Scope All styles are namespaced under the container id. Nothing leaks into the host page.
Source of truth Custom properties on the container carry both modes. Never fork this file into two colour variants.

Colour Tokens

Token	Light	Dark
Background	#FAFAFA	#141414
Text	#141414	#FAFAFA
Signal, primary outline	#002FA7	#6B93FF
Signal fill on hover	#002FA7	#002FA7
Label on fill	#FAFAFA	#FAFAFA
Ripple, primary	#141414	#FAFAFA
Ripple, secondary	#FAFAFA	#141414

Geometry

Token	Desktop and Tablet	Mobile
Label size	18px	16px
Label weight, web	400	400
Label weight, mail	700	700
Padding	16px on 40px	14px on 24px
Minimum width	200px	full width
Border	1px	1px
Corner radius	0	0
Gap between buttons	32px	32px

Production CSS, web only

.rib-btn {
  position: relative;
  overflow: hidden;
  background: transparent;
  padding: 16px 40px;
  min-width: 200px;
  font-family: 'Geist', Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.014em;
  font-weight: 400;
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rib-btn .rib-label { position: relative; z-index: 2; pointer-events: none; }
.rib-btn .rib-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ribRipple 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.3s ease;
}
@keyframes ribRipple { to { transform: scale(3.5); } }

.rib-btn-primary { border: 1px solid #002FA7; color: #002FA7; }
.rib-btn-primary .rib-ripple { background-color: #141414; }
.rib-btn-primary:focus-visible { outline: 2px solid #002FA7; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .rib-btn-primary:hover { background: #002FA7; border-color: #002FA7; color: #FAFAFA; }
}
.rib-btn-primary.is-pressed .rib-label { color: #FAFAFA; }

.rib-btn-secondary { border: 1px solid #141414; color: #141414; }
.rib-btn-secondary .rib-ripple { background-color: #FAFAFA; }
.rib-btn-secondary:focus-visible { outline: 2px solid #141414; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .rib-btn-secondary:hover { background: #141414; border-color: #141414; color: #FAFAFA; }
}
.rib-btn-secondary.is-pressed .rib-label { color: #141414; }

@media (max-width: 767px) {
  .rib-btn { width: 100%; font-size: 16px; padding: 14px 24px; }
}

.rib-btn {
  position: relative;
  overflow: hidden;
  background: transparent;
  padding: 16px 40px;
  min-width: 200px;
  font-family: 'Geist', Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.014em;
  font-weight: 400;
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rib-btn .rib-label { position: relative; z-index: 2; pointer-events: none; }
.rib-btn .rib-ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ribRipple 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.3s ease;
}
@keyframes ribRipple { to { transform: scale(3.5); } }

.rib-btn-primary { border: 1px solid #6B93FF; color: #6B93FF; }
.rib-btn-primary .rib-ripple { background-color: #FAFAFA; }
.rib-btn-primary:focus-visible { outline: 2px solid #6B93FF; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .rib-btn-primary:hover { background: #002FA7; border-color: #002FA7; color: #FAFAFA; }
}
.rib-btn-primary.is-pressed .rib-label { color: #141414; }

.rib-btn-secondary { border: 1px solid #FAFAFA; color: #FAFAFA; }
.rib-btn-secondary .rib-ripple { background-color: #141414; }
.rib-btn-secondary:focus-visible { outline: 2px solid #FAFAFA; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .rib-btn-secondary:hover { background: #FAFAFA; border-color: #FAFAFA; color: #141414; }
}
.rib-btn-secondary.is-pressed .rib-label { color: #FAFAFA; }

@media (max-width: 767px) {
  .rib-btn { width: 100%; font-size: 16px; padding: 14px 24px; }
}

Production HTML, mail

Mail carries no button element, no hover, no focus ring and no ripple. The mail button is a table with a bordered cell and a block level link. The label runs bold, because Arial has no reliable medium weight.

<table role="presentation" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" style="border:1px solid #002FA7; background-color:#FAFAFA;">
      <a href="{{action_url}}" style="display:inline-block; min-width:200px; padding:16px 40px; font-family:Arial,Helvetica,sans-serif; font-size:18px; line-height:24px; font-weight:bold; color:#002FA7; text-decoration:none;">Primary Action</a>
    </td>
  </tr>
</table>

<table role="presentation" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" style="border:1px solid #141414; background-color:#FAFAFA;">
      <a href="{{secondary_url}}" style="display:inline-block; min-width:200px; padding:16px 40px; font-family:Arial,Helvetica,sans-serif; font-size:18px; line-height:24px; font-weight:bold; color:#141414; text-decoration:none;">Secondary Action</a>
    </td>
  </tr>
</table>

<table role="presentation" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" style="border:1px solid #6B93FF; background-color:#141414;">
      <a href="{{action_url}}" style="display:inline-block; min-width:200px; padding:16px 40px; font-family:Arial,Helvetica,sans-serif; font-size:18px; line-height:24px; font-weight:bold; color:#6B93FF; text-decoration:none;">Primary Action</a>
    </td>
  </tr>
</table>

<table role="presentation" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td align="center" style="border:1px solid #FAFAFA; background-color:#141414;">
      <a href="{{secondary_url}}" style="display:inline-block; min-width:200px; padding:16px 40px; font-family:Arial,Helvetica,sans-serif; font-size:18px; line-height:24px; font-weight:bold; color:#FAFAFA; text-decoration:none;">Secondary Action</a>
    </td>
  </tr>
</table>