ServicesWorkInspirationBlogAbouthello@optimaflow.id
← All components

Timeline

free

Timeline 05

Luxury serif process timeline — numbered 01–04 rows with italic accent headings, warm accent bar, letterspaced meta on off-white.

Preview

The Atelier Method

into being

Four deliberate movements, from raw material to the object in your hands. No shortcuts, no season chasing — only the slow craft that earns a place in a life well kept.

  • 01

    Sourcing

    We choose the material — first

    Full-grain hides from two tanneries in Tuscany, linen spun near Lille. We buy small, inspect by hand, and reject far more than we keep.

  • 02

    Design

    We draw, then we wait — deliberately

    Every silhouette rests for a season before it is made. If it still feels essential three months on, only then does it earn a pattern.

  • 03

    Making

    One maker — from cut to final stitch

    No assembly line. A single artisan carries each piece the whole way through, signing the inside seam when it is done. Roughly nine hours of work.

  • 04

    Delivery & Care

    It arrives — and we stay with it

    Wrapped in unbleached cotton, sent with a lifetime repair pledge. Return it in a decade for reconditioning — the patina, we leave to you.

Copy the code

paste-ready → Designer
<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="process_component">
  <div class="process_inner">
    <div class="process_header">
      <p class="process_eyebrow">The Atelier Method</p>
      <h2 class="process_title">
        <span class="process_title_accent"> into being</span>
      </h2>
      <p class="process_lede">Four deliberate movements, from raw material to the object in your hands. No shortcuts, no season chasing — only the slow craft that earns a place in a life well kept.</p>
    </div>
    <ul class="process_list">
      <li class="process_row">
        <p class="process_num">01</p>
        <div class="process_bar"></div>
        <div class="process_body">
          <p class="process_stage">Sourcing</p>
          <h3 class="process_heading">We choose the material — first</h3>
          <p class="process_desc">Full-grain hides from two tanneries in Tuscany, linen spun near Lille. We buy small, inspect by hand, and reject far more than we keep.</p>
        </div>
      </li>
      <li class="process_row">
        <p class="process_num">02</p>
        <div class="process_bar"></div>
        <div class="process_body">
          <p class="process_stage">Design</p>
          <h3 class="process_heading">We draw, then we wait — deliberately</h3>
          <p class="process_desc">Every silhouette rests for a season before it is made. If it still feels essential three months on, only then does it earn a pattern.</p>
        </div>
      </li>
      <li class="process_row">
        <p class="process_num">03</p>
        <div class="process_bar"></div>
        <div class="process_body">
          <p class="process_stage">Making</p>
          <h3 class="process_heading">One maker — from cut to final stitch</h3>
          <p class="process_desc">No assembly line. A single artisan carries each piece the whole way through, signing the inside seam when it is done. Roughly nine hours of work.</p>
        </div>
      </li>
      <li class="process_row">
        <p class="process_num">04</p>
        <div class="process_bar"></div>
        <div class="process_body">
          <p class="process_stage">Delivery & Care</p>
          <h3 class="process_heading">It arrives — and we stay with it</h3>
          <p class="process_desc">Wrapped in unbleached cotton, sent with a lifetime repair pledge. Return it in a decade for reconditioning — the patina, we leave to you.</p>
        </div>
      </li>
    </ul>
  </div>
</section>

<style>
.process_component {
  background-color:#faf8f4;
  width:100%;
  padding:140px 6vw;
  box-sizing:border-box;
  font-family:Georgia,'Times New Roman',serif;
}

.process_inner {
  max-width:1080px;
  margin:0 auto;
}

.process_header {
  max-width:640px;
  margin-bottom:96px;
}

.process_eyebrow {
  font-family:Georgia,serif;
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:#a67c52;
  margin:0 0 28px 0;
}

.process_title {
  font-family:Georgia,'Times New Roman',serif;
  color:#1a1712;
  font-size:clamp(38px,5vw,64px);
  line-height:1.08;
  font-weight:400;
  margin:0;
}

.process_title_accent {
  font-style:italic;
  color:#a67c52;
}

.process_lede {
  font-family:Georgia,serif;
  color:#6b6459;
  font-size:17px;
  line-height:1.7;
  margin:28px 0 0 0;
}

.process_list {
  list-style:none;
  padding:0;
  margin:0;
}

.process_row {
  display:grid;
  grid-template-columns:120px 4px 1fr;
  gap:40px;
  padding:52px 0;
  border-top:1px solid #e4ddd0;
  align-items:start;
}

.process_num {
  font-family:Georgia,serif;
  color:#a67c52;
  font-size:52px;
  line-height:1;
  font-weight:400;
  margin:0;
}

.process_bar {
  width:4px;
  min-height:64px;
  height:100%;
  background-color:#a67c52;
}

.process_body {
  max-width:560px;
}

.process_stage {
  font-family:Georgia,serif;
  font-size:11px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:#a67c52;
  margin:0 0 14px 0;
}

.process_heading {
  font-family:Georgia,'Times New Roman',serif;
  color:#1a1712;
  font-size:26px;
  line-height:1.2;
  font-weight:400;
  margin:0;
}

.process_desc {
  font-family:Georgia,serif;
  color:#6b6459;
  font-size:16px;
  line-height:1.7;
  margin:16px 0 0 0;
}
</style>

One email unlocks copying across the whole library — that's the only ask.

Want the whole site built for you?

Book a free call