Sections

<section>
  <div class="k-container k-layout text-center">
    <div class="mx-auto max-w-3xl">
      <!--<p class="mb-12 text-sm tracking-sm">A considered starting point</p>-->
      <h2 class="text-display-xl sm:text-display-4xl">
        Good ideas deserve<br />a clear expression.
      </h2>
      <p class="leading-base mx-auto mt-12 max-w-xl text-lg sm:text-xl">
        A shared language for brands, websites, and interfaces. Designed to bring the important
        things into focus.
      </p>
      <div class="mt-12 flex flex-wrap justify-center gap-4">
        <a class="k-button k-button-primary" href="/kern-base.css" download>Get Kern ↓</a>
        <a class="k-button" href="/typography/">Explore typography</a>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="k-container k-layout k-layout-text lg:grid-cols-2 lg:gap-x-24 items-start">
    <article>
      <h2 class="text-subhead-3xl">A consistent foundation.</h2>
      <p class="mt-6 text-base leading-lg">
        Shared typography, color, and spacing make everyday decisions easier. Each part belongs to
        the same visual language, from a short label to a complete page.
      </p>
      <p class="mt-4 text-base leading-lg">
        Consistency creates familiarity. Familiarity helps people find what matters and move through
        an experience with confidence.
      </p>
    </article>
    <article>
      <h2 class="text-subhead-3xl">Room for a distinct identity.</h2>
      <p class="mt-6 text-base leading-lg">
        A system should support expression without prescribing every detail. Content, imagery, and
        composition give each project its own character.
      </p>
      <p class="mt-4 text-base leading-lg">
        Start with the shared essentials, then adapt the parts that make the experience specific to
        its purpose.
      </p>
    </article>
  </div>
</section>

<section>
  <div class="k-container">
    <h2 class="mb-12 max-w-xl text-subhead-4xl">From a clear idea to a coherent page.</h2>
    <div class="k-layout k-layout-text lg:grid-cols-2 lg:gap-x-24 items-start">
      <article class="border-t border-line pt-8">
        <p class="mb-6 text-sm">01</p>
        <h3 class="text-subhead-2xl">Begin with the purpose.</h3>
        <p class="mt-6 text-base leading-lg">
          Before choosing a layout, establish what the page needs to communicate. A clear purpose
          makes every following decision easier.
        </p>
        <p class="mt-4 text-base leading-lg">
          Use the opening section to introduce the central idea, then let the rest of the page
          develop it at a comfortable pace.
        </p>
      </article>
      <article class="border-t border-line pt-8">
        <p class="mb-6 text-sm">02</p>
        <h3 class="text-subhead-2xl">Build a clear sequence.</h3>
        <p class="mt-6 text-base leading-lg">
          Give each section one role. Introduce the idea, explain the value, support it with
          evidence, and make the next step easy to find.
        </p>
        <p class="mt-4 text-base leading-lg">
          A useful sequence can be short. Include only the sections that help the reader understand
          what matters.
        </p>
      </article>
      <article class="border-t border-line pt-8">
        <p class="mb-6 text-sm">03</p>
        <h3 class="text-subhead-2xl">Keep the rhythm familiar.</h3>
        <p class="mt-6 text-base leading-lg">
          Use consistent columns, gaps, and typographic roles to connect the different parts of a
          page. Repetition makes the structure easier to follow.
        </p>
        <p class="mt-4 text-base leading-lg">
          Let changes in scale signal changes in emphasis. The important moments should feel
          intentional.
        </p>
      </article>
      <article class="border-t border-line pt-8">
        <p class="mb-6 text-sm">04</p>
        <h3 class="text-subhead-2xl">Leave room to adapt.</h3>
        <p class="mt-6 text-base leading-lg">
          A good layout supports different lengths of text and different kinds of stories. Test the
          structure with the content it will actually hold.
        </p>
        <p class="mt-4 text-base leading-lg">
          Keep the foundations steady while allowing the message, tone, and composition to develop
          over time.
        </p>
      </article>
    </div>
  </div>
</section>

<section>
  <div class="k-container">
    <h2 class="mb-12 text-subhead-4xl">Principles that guide the work.</h2>
    <div class="k-layout lg:grid-cols-3 k-layout-text lg:gap-x-20">
      <article>
        <h3 class="text-subhead-xl">Start with the message.</h3>
        <p class="mt-4 text-base leading-lg">
          Understand what needs to be communicated before deciding how it should look. Let the
          content establish the hierarchy.
        </p>
      </article>
      <article>
        <h3 class="text-subhead-xl">Make every detail useful.</h3>
        <p class="mt-4 text-base leading-lg">
          Use type, space, and contrast to help people read and act. A detail earns its place by
          making the experience clearer.
        </p>
      </article>
      <article>
        <h3 class="text-subhead-xl">Build for continuity.</h3>
        <p class="mt-4 text-base leading-lg">
          Think beyond a single page. Choose patterns that remain coherent as new content, formats,
          and requirements emerge.
        </p>
      </article>
    </div>
  </div>
</section>

<section>
  <div class="k-container">
    <h2 class="mb-12 max-w-xl text-subhead-4xl">Considered from every angle.</h2>
    <div class="k-layout md:grid-cols-2 xl:grid-cols-4 k-layout-text">
      <article>
        <h3 class="text-subhead-xl">A recognizable voice.</h3>
        <p class="mt-4 text-base leading-lg">
          Typography gives the work its character. Keep the choices focused and let the message
          lead.
        </p>
      </article>
      <article>
        <h3 class="text-subhead-xl">Space for the idea.</h3>
        <p class="mt-4 text-base leading-lg">
          A generous rhythm gives each thought room without separating it from the next.
        </p>
      </article>
      <article>
        <h3 class="text-subhead-xl">Details that connect.</h3>
        <p class="mt-4 text-base leading-lg">
          Repeat the small decisions that help a page feel familiar, from links to section headings.
        </p>
      </article>
      <article>
        <h3 class="text-subhead-xl">Room to develop.</h3>
        <p class="mt-4 text-base leading-lg">
          Start with a dependable structure, then adapt it as the content and the project grow.
        </p>
      </article>
    </div>
  </div>
</section>

<section>
  <div class="k-container">
    <div class="mb-12 max-w-xl">
      <h2 class="text-subhead-4xl">A few essentials. A shared language.</h2>
      <p class="mt-6 text-lg leading-lg">Six connected parts, each with a simple purpose.</p>
    </div>
    <div
      class="k-layout sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 k-layout-text lg:gap-x-20 xl:gap-x-16"
    >
      <article>
        <h3 class="text-lg font-medium">Type</h3>
        <p class="mt-4 text-sm leading-lg">A clear hierarchy, from a label to a headline.</p>
      </article>
      <article>
        <h3 class="text-lg font-medium">Color</h3>
        <p class="mt-4 text-sm leading-lg">A quiet palette with purposeful contrast.</p>
      </article>
      <article>
        <h3 class="text-lg font-medium">Space</h3>
        <p class="mt-4 text-sm leading-lg">A shared rhythm across every page.</p>
      </article>
      <article>
        <h3 class="text-lg font-medium">Layout</h3>
        <p class="mt-4 text-sm leading-lg">Flexible columns that follow the content.</p>
      </article>
      <article>
        <h3 class="text-lg font-medium">Voice</h3>
        <p class="mt-4 text-sm leading-lg">Simple words with a distinct point of view.</p>
      </article>
      <article>
        <h3 class="text-lg font-medium">Detail</h3>
        <p class="mt-4 text-sm leading-lg">Familiar patterns, carefully considered.</p>
      </article>
    </div>
  </div>
</section>

<section>
  <div class="k-container k-layout k-layout-text lg:grid-cols-2 lg:gap-x-24 items-start">
    <div>
      <p class="text-sm">The approach</p>
      <h2 class="mt-4 text-subhead-3xl">Clarity comes first.</h2>
    </div>
    <div>
      <p class="text-subhead-3xl sm:text-subhead-4xl">
        A good system makes the everyday decisions easier, so there is more room for the ideas that
        matter.
      </p>
      <p class="mt-6 max-w-2xl text-base leading-lg">
        Start with the content. Establish a clear hierarchy. Use space to connect related ideas and
        separate different ones. Keep enough flexibility for each project to find its own voice.
      </p>
    </div>
  </div>
</section>

<section>
  <div class="k-container k-layout k-layout-text lg:grid-cols-2 lg:gap-x-24 items-start">
    <h2 class="max-w-lg text-display-base sm:text-display-xl">
      A shared language.<br />A wider perspective.
    </h2>
    <div class="space-y-6 text-base leading-lg">
      <p>
        Kern begins with a few dependable essentials: typography that establishes hierarchy, colors
        that give content contrast, and spacing that creates a clear rhythm.
      </p>
      <p>
        Together, these decisions form a starting point for brands, websites, and interfaces. They
        make the familiar work easier while leaving room for different voices and new ways of
        presenting information.
      </p>
      <p>
        The aim is continuity without uniformity. Each experience can have its own character while
        sharing the same care for clarity and detail.
      </p>
      <a
        class="inline-block text-sm font-medium underline underline-offset-2 hover:decoration-2"
        href="/typography/"
        >Explore the foundations →</a
      >
    </div>
  </div>
</section>

<section>
  <div class="k-container k-layout k-layout-text lg:grid-cols-2 lg:gap-x-24 items-start">
    <h2 class="max-w-lg text-display-base sm:text-display-xl">
      Care in the details.<br />Clarity in the whole.
    </h2>
    <div>
      <p class="mb-12 text-lg leading-lg">
        A small set of principles keeps the work focused as the system grows.
      </p>
      <div class="k-cell-stack gap-12">
        <article>
          <h3 class="text-subhead-xl">Consider the whole experience.</h3>
          <p class="mt-4 text-base leading-lg">
            A strong identity carries through every interaction. Make the transitions between pages,
            formats, and states feel intentional.
          </p>
        </article>
        <article>
          <h3 class="text-subhead-xl">Make space for the content.</h3>
          <p class="mt-4 text-base leading-lg">
            Give important ideas room to breathe. Keep supporting details close enough to feel
            connected, and remove what distracts from the message.
          </p>
        </article>
        <article>
          <h3 class="text-subhead-xl">Refine through use.</h3>
          <p class="mt-4 text-base leading-lg">
            Try patterns with real content. Keep the decisions that improve the experience and
            revisit those that make it harder to understand.
          </p>
        </article>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="k-container">
    <h2 class="mb-12 text-subhead-4xl">From intent to expression.</h2>
    <div class="k-layout md:grid-cols-2 lg:grid-cols-4 k-layout-text">
      <article>
        <p class="mb-8 text-sm">01</p>
        <h3 class="text-subhead-xl">Understand</h3>
        <p class="mt-4 text-sm leading-lg">
          Start with the purpose, the audience, and the content.
        </p>
      </article>
      <article>
        <p class="mb-8 text-sm">02</p>
        <h3 class="text-subhead-xl">Arrange</h3>
        <p class="mt-4 text-sm leading-lg">
          Find the hierarchy that makes the message easiest to follow.
        </p>
      </article>
      <article>
        <p class="mb-8 text-sm">03</p>
        <h3 class="text-subhead-xl">Refine</h3>
        <p class="mt-4 text-sm leading-lg">
          Bring type, color, and space into a consistent rhythm.
        </p>
      </article>
      <article>
        <p class="mb-8 text-sm">04</p>
        <h3 class="text-subhead-xl">Extend</h3>
        <p class="mt-4 text-sm leading-lg">Carry the same principles into every new touchpoint.</p>
      </article>
    </div>
  </div>
</section>

<section>
  <div class="k-container">
    <h2 class="mb-12 text-center text-subhead-lg">Good ideas find good company.</h2>
    <ul
      class="k-layout grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 items-center text-center"
      role="list"
      aria-label="Sample customer wordmarks"
    >
      <li class="text-subhead-xl sm:text-subhead-2xl">Forma</li>
      <li class="text-subhead-xl sm:text-subhead-2xl">Northline</li>
      <li class="text-subhead-xl sm:text-subhead-2xl">Ordinary</li>
      <li class="text-subhead-xl sm:text-subhead-2xl">Fieldwork</li>
      <li class="text-subhead-xl sm:text-subhead-2xl">Common</li>
      <li class="text-subhead-xl sm:text-subhead-2xl">Outline</li>
    </ul>
    <p class="mt-8 text-center text-sm text-muted k-caption">
      Fictional wordmarks — replace with customer or partner logos.
    </p>
  </div>
</section>

<section>
  <div class="k-container">
    <div class="mb-12 max-w-xl">
      <h2 class="text-subhead-4xl">Small decisions. Lasting impact.</h2>
      <p class="mt-6 text-lg">A few meaningful numbers can tell a much bigger story.</p>
    </div>
    <dl class="k-layout lg:grid-cols-3 k-layout-text lg:gap-x-20">
      <div>
        <dt class="text-sm">Time returned to creative work</dt>
        <dd class="mt-4 text-display-xl sm:text-display-2xl">32%</dd>
        <dd class="mt-6 text-base leading-lg">
          Less time repeating decisions. More time exploring the right ones.
        </dd>
      </div>
      <div>
        <dt class="text-sm">Teams working from one system</dt>
        <dd class="mt-4 text-display-xl sm:text-display-2xl">120+</dd>
        <dd class="mt-6 text-base leading-lg">
          A shared starting point across disciplines, projects, and locations.
        </dd>
      </div>
      <div>
        <dt class="text-sm">From first idea to first page</dt>
        <dd class="mt-4 text-display-xl sm:text-display-2xl">2 days</dd>
        <dd class="mt-6 text-base leading-lg">
          A shorter path from a clear brief to something worth sharing.
        </dd>
      </div>
    </dl>
    <p class="mt-8 text-sm text-muted k-caption">
      Illustrative figures for this layout. Replace with verified results and sources.
    </p>
  </div>
</section>

<section>
  <div class="k-container">
    <div class="k-layout lg:grid-cols-12">
      <figure class="k-card k-card-lg flex flex-col justify-between gap-16 lg:col-span-8">
        <blockquote class="text-subhead-3xl sm:text-subhead-4xl">
          “The essentials feel settled. Every new page starts with a shared understanding of what
          good looks like.”
        </blockquote>
        <figcaption class="text-muted text-sm">
          <span class="font-semibold text-ink">Alex Morgan</span
          ><span class="mt-1 block">Design director · Sample Studio</span>
        </figcaption>
      </figure>
      <div class="k-cell-stack lg:col-span-4">
        <figure class="k-card">
          <blockquote class="text-subhead-xl">
            “Simple enough to learn. Flexible enough to make our own.”
          </blockquote>
          <figcaption class="mt-8 text-sm text-muted">
            <span class="font-semibold text-ink">Sam Lee</span> · Sample Studio
          </figcaption>
        </figure>
        <figure class="k-card">
          <blockquote class="text-subhead-xl">
            “A more consistent experience, from the first page to the last.”
          </blockquote>
          <figcaption class="mt-8 text-sm text-muted">
            <span class="font-semibold text-ink">Jordan Chen</span> · Sample Studio
          </figcaption>
        </figure>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="k-container k-layout k-layout-text lg:grid-cols-2 lg:gap-x-24 items-start">
    <div>
      <h2 class="max-w-lg text-display-base sm:text-display-xl">
        One language.<br />Many expressions.
      </h2>
      <p class="mt-6 max-w-md text-lg leading-base">
        From a first impression to a familiar interaction, a consistent system connects every part
        of the experience.
      </p>
      <a
        class="mt-8 inline-block text-sm font-medium underline underline-offset-2 hover:decoration-2"
        href="/typography/"
        >Explore the type system →</a
      >
    </div>
    <div class="k-card k-card-lg">
      <div class="flex min-h-48 items-center justify-center text-display-5xl" aria-hidden="true">
        Aa
      </div>
      <div
        class="mt-8 flex flex-wrap justify-between gap-4 border-t border-line-strong pt-6 text-sm"
      >
        <span>Inter</span><span>A voice at every scale</span>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="k-container k-layout k-layout-text lg:grid-cols-2 lg:gap-x-24 items-start">
    <div>
      <h2 class="max-w-lg text-display-base sm:text-display-xl">
        The essentials.<br />Already considered.
      </h2>
      <p class="mt-6 max-w-md text-lg leading-lg">
        A dependable base for teams that want to spend more time making and less time starting over.
      </p>
      <a class="k-link mt-8 text-sm" href="/typography/"
        >Explore the foundations
        <span class="inline-flex size-5 shrink-0 [&>svg]:size-full"
          ><!-- @license lucide-static v1.52.0 - ISC -->
          <svg
            aria-hidden="true"
            focusable="false"
            class="lucide lucide-arrow-right"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.75"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M5 12h14" />
            <path d="m12 5 7 7-7 7" />
          </svg> </span
      ></a>
    </div>
    <div class="k-card k-card-lg">
      <h3 class="text-subhead-xl">A clearer starting point</h3>
      <ul class="mt-8 grid gap-8" role="list">
        <li class="flex items-start gap-4">
          <span class="mt-0.5 inline-flex size-5 shrink-0 [&>svg]:size-full"
            ><!-- @license lucide-static v1.52.0 - ISC -->
            <svg
              aria-hidden="true"
              focusable="false"
              class="lucide lucide-check"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.75"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M20 6 9 17l-5-5" />
            </svg>
          </span>
          <div class="min-w-0">
            <h4 class="text-base font-medium">Typography with purpose</h4>
            <p class="mt-2 text-sm leading-lg">
              A useful scale for everyday interfaces and more expressive moments.
            </p>
          </div>
        </li>
        <li class="flex items-start gap-4">
          <span class="mt-0.5 inline-flex size-5 shrink-0 [&>svg]:size-full"
            ><!-- @license lucide-static v1.52.0 - ISC -->
            <svg
              aria-hidden="true"
              focusable="false"
              class="lucide lucide-check"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.75"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M20 6 9 17l-5-5" />
            </svg>
          </span>
          <div class="min-w-0">
            <h4 class="text-base font-medium">A palette that adapts</h4>
            <p class="mt-2 text-sm leading-lg">
              Shared color roles that remain consistent in light and dark.
            </p>
          </div>
        </li>
        <li class="flex items-start gap-4">
          <span class="mt-0.5 inline-flex size-5 shrink-0 [&>svg]:size-full"
            ><!-- @license lucide-static v1.52.0 - ISC -->
            <svg
              aria-hidden="true"
              focusable="false"
              class="lucide lucide-check"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.75"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M20 6 9 17l-5-5" />
            </svg>
          </span>
          <div class="min-w-0">
            <h4 class="text-base font-medium">Patterns that travel</h4>
            <p class="mt-2 text-sm leading-lg">
              Copy the HTML and bring the same familiar details into another project.
            </p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</section>

<section>
  <div class="k-container">
    <div class="mb-12 max-w-xl">
      <h2 class="text-subhead-4xl">The essentials, considered.</h2>
      <p class="mt-4">A small set of shared decisions that works across a whole experience.</p>
    </div>
    <div class="k-layout lg:grid-cols-3">
      <article class="k-card">
        <p class="mb-8 text-sm">01</p>
        <h3 class="text-subhead-xl">Typography</h3>
        <p class="mt-4 text-sm leading-lg">
          A clear hierarchy from the smallest label to the largest statement.
        </p>
      </article>
      <article class="k-card">
        <p class="mb-8 text-sm">02</p>
        <h3 class="text-subhead-xl">Color</h3>
        <p class="mt-4 text-sm leading-lg">
          Neutral surfaces and semantic roles that adapt to light and dark.
        </p>
      </article>
      <article class="k-card">
        <p class="mb-8 text-sm">03</p>
        <h3 class="text-subhead-xl">Space</h3>
        <p class="mt-4 text-sm leading-lg">A consistent rhythm that gives each idea enough room.</p>
      </article>
      <article class="k-card">
        <p class="mb-8 text-sm">04</p>
        <h3 class="text-subhead-xl">Structure</h3>
        <p class="mt-4 text-sm leading-lg">
          Flexible grids that respond to the content and the screen.
        </p>
      </article>
      <article class="k-card">
        <p class="mb-8 text-sm">05</p>
        <h3 class="text-subhead-xl">Details</h3>
        <p class="mt-4 text-sm leading-lg">
          Familiar controls with a shared shape and visual language.
        </p>
      </article>
      <article class="k-card">
        <p class="mb-8 text-sm">06</p>
        <h3 class="text-subhead-xl">Continuity</h3>
        <p class="mt-4 text-sm leading-lg">
          Reusable patterns that make the next page easier to create.
        </p>
      </article>
    </div>
  </div>
</section>

<section>
  <div class="k-container">
    <div class="mb-12 max-w-xl">
      <h2 class="text-subhead-4xl">Fits the way the work happens.</h2>
      <p class="mt-6 text-lg leading-lg">
        Connect the parts of a project through a small set of shared foundations.
      </p>
    </div>
    <ul class="k-layout sm:grid-cols-2 lg:grid-cols-4" role="list">
      <li class="k-card">
        <div class="mb-8 flex size-12 items-center justify-center rounded-control bg-canvas">
          <span class="inline-flex size-5 shrink-0 [&>svg]:size-full"
            ><!-- @license lucide-static v1.52.0 - ISC -->
            <svg
              aria-hidden="true"
              focusable="false"
              class="lucide lucide-sun"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.75"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <circle cx="12" cy="12" r="4" />
              <path d="M12 2v2" />
              <path d="M12 20v2" />
              <path d="m4.93 4.93 1.41 1.41" />
              <path d="m17.66 17.66 1.41 1.41" />
              <path d="M2 12h2" />
              <path d="M20 12h2" />
              <path d="m6.34 17.66-1.41 1.41" />
              <path d="m19.07 4.93-1.41 1.41" />
            </svg>
          </span>
        </div>
        <h3 class="text-subhead-xl">Design</h3>
        <p class="mt-4 text-sm leading-lg">
          Type and color that carry from a brand into an interface.
        </p>
        <a class="k-link mt-8 text-sm" href="/typography/"
          >Explore type<span class="inline-flex size-5 shrink-0 [&>svg]:size-full"
            ><!-- @license lucide-static v1.52.0 - ISC -->
            <svg
              aria-hidden="true"
              focusable="false"
              class="lucide lucide-arrow-right"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.75"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M5 12h14" />
              <path d="m12 5 7 7-7 7" />
            </svg> </span
        ></a>
      </li>
      <li class="k-card">
        <div class="mb-8 flex size-12 items-center justify-center rounded-control bg-canvas">
          <span class="inline-flex size-5 shrink-0 [&>svg]:size-full"
            ><!-- @license lucide-static v1.52.0 - ISC -->
            <svg
              aria-hidden="true"
              focusable="false"
              class="lucide lucide-monitor"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.75"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <rect width="20" height="14" x="2" y="3" rx="2" />
              <line x1="8" x2="16" y1="21" y2="21" />
              <line x1="12" x2="12" y1="17" y2="21" />
            </svg>
          </span>
        </div>
        <h3 class="text-subhead-xl">Development</h3>
        <p class="mt-4 text-sm leading-lg">
          HTML and CSS that work within an existing Tailwind project.
        </p>
        <a class="k-link mt-8 text-sm" href="/components/"
          >Browse components<span class="inline-flex size-5 shrink-0 [&>svg]:size-full"
            ><!-- @license lucide-static v1.52.0 - ISC -->
            <svg
              aria-hidden="true"
              focusable="false"
              class="lucide lucide-arrow-right"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.75"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M5 12h14" />
              <path d="m12 5 7 7-7 7" />
            </svg> </span
        ></a>
      </li>
      <li class="k-card">
        <div class="mb-8 flex size-12 items-center justify-center rounded-control bg-canvas">
          <span class="inline-flex size-5 shrink-0 [&>svg]:size-full"
            ><!-- @license lucide-static v1.52.0 - ISC -->
            <svg
              aria-hidden="true"
              focusable="false"
              class="lucide lucide-inbox"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.75"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <polyline points="22 12 16 12 14 15 10 15 8 12 2 12" />
              <path
                d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
              />
            </svg>
          </span>
        </div>
        <h3 class="text-subhead-xl">Content</h3>
        <p class="mt-4 text-sm leading-lg">A comfortable reading experience for longer ideas.</p>
        <a class="k-link mt-8 text-sm" href="/typography/#prose"
          >Explore prose<span class="inline-flex size-5 shrink-0 [&>svg]:size-full"
            ><!-- @license lucide-static v1.52.0 - ISC -->
            <svg
              aria-hidden="true"
              focusable="false"
              class="lucide lucide-arrow-right"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.75"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M5 12h14" />
              <path d="m12 5 7 7-7 7" />
            </svg> </span
        ></a>
      </li>
      <li class="k-card">
        <div class="mb-8 flex size-12 items-center justify-center rounded-control bg-canvas">
          <span class="inline-flex size-5 shrink-0 [&>svg]:size-full"
            ><!-- @license lucide-static v1.52.0 - ISC -->
            <svg
              aria-hidden="true"
              focusable="false"
              class="lucide lucide-plus"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.75"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M5 12h14" />
              <path d="M12 5v14" />
            </svg>
          </span>
        </div>
        <h3 class="text-subhead-xl">Delivery</h3>
        <p class="mt-4 text-sm leading-lg">Layouts that can be rearranged as the story grows.</p>
        <a class="k-link mt-8 text-sm" href="/sections/#features"
          >Explore layouts<span class="inline-flex size-5 shrink-0 [&>svg]:size-full"
            ><!-- @license lucide-static v1.52.0 - ISC -->
            <svg
              aria-hidden="true"
              focusable="false"
              class="lucide lucide-arrow-right"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.75"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M5 12h14" />
              <path d="m12 5 7 7-7 7" />
            </svg> </span
        ></a>
      </li>
    </ul>
  </div>
</section>

<section>
  <div class="k-container">
    <div class="mb-12 flex flex-wrap items-end justify-between gap-8">
      <h2 class="max-w-lg text-subhead-4xl">A little further reading.</h2>
      <a class="k-link text-sm" href="/typography/#prose"
        >Explore the journal
        <span class="inline-flex size-5 shrink-0 [&>svg]:size-full"
          ><!-- @license lucide-static v1.52.0 - ISC -->
          <svg
            aria-hidden="true"
            focusable="false"
            class="lucide lucide-arrow-right"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.75"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path d="M5 12h14" />
            <path d="m12 5 7 7-7 7" />
          </svg> </span
      ></a>
    </div>
    <div class="k-layout lg:grid-cols-3">
      <article class="k-card flex flex-col">
        <p class="text-sm">Guide</p>
        <h3 class="mt-8 text-subhead-2xl">Find the right rhythm.</h3>
        <p class="mb-8 mt-4 text-sm leading-lg">
          How type, spacing, and hierarchy work together to make a page easier to read.
        </p>
        <a class="k-link mt-auto self-start text-sm" href="/typography/#prose"
          >Read the guide
          <span class="inline-flex size-5 shrink-0 [&>svg]:size-full"
            ><!-- @license lucide-static v1.52.0 - ISC -->
            <svg
              aria-hidden="true"
              focusable="false"
              class="lucide lucide-arrow-right"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.75"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M5 12h14" />
              <path d="m12 5 7 7-7 7" />
            </svg> </span
        ></a>
      </article>
      <article class="k-card flex flex-col">
        <p class="text-sm">Case study</p>
        <h3 class="mt-8 text-subhead-2xl">One system, many expressions.</h3>
        <p class="mb-8 mt-4 text-sm leading-lg">
          A shared visual language can connect different experiences without making them identical.
        </p>
        <a class="k-link mt-auto self-start text-sm" href="/sections/#story"
          >Explore the story
          <span class="inline-flex size-5 shrink-0 [&>svg]:size-full"
            ><!-- @license lucide-static v1.52.0 - ISC -->
            <svg
              aria-hidden="true"
              focusable="false"
              class="lucide lucide-arrow-right"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.75"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M5 12h14" />
              <path d="m12 5 7 7-7 7" />
            </svg> </span
        ></a>
      </article>
      <article class="k-card flex flex-col">
        <p class="text-sm">Resource</p>
        <h3 class="mt-8 text-subhead-2xl">From the first building block.</h3>
        <p class="mb-8 mt-4 text-sm leading-lg">
          Start with useful patterns and shape the details around the content.
        </p>
        <a class="k-link mt-auto self-start text-sm" href="/components/"
          >Browse the library
          <span class="inline-flex size-5 shrink-0 [&>svg]:size-full"
            ><!-- @license lucide-static v1.52.0 - ISC -->
            <svg
              aria-hidden="true"
              focusable="false"
              class="lucide lucide-arrow-right"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="1.75"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path d="M5 12h14" />
              <path d="m12 5 7 7-7 7" />
            </svg> </span
        ></a>
      </article>
    </div>
  </div>
</section>

<section>
  <div class="k-container">
    <h2 class="mb-12 text-subhead-4xl">Built to work together.</h2>
    <div class="k-layout lg:grid-cols-3">
      <article class="k-card flex flex-col justify-between gap-16">
        <div>
          <h3 class="text-subhead-2xl">A recognizable voice.</h3>
          <p class="mt-4 text-sm leading-lg">
            Type establishes the character before a single image is added.
          </p>
        </div>
        <span class="text-display-3xl" aria-hidden="true">Ag</span>
      </article>
      <article class="k-card flex flex-col justify-between gap-16">
        <div>
          <h3 class="text-subhead-2xl">Space to think.</h3>
          <p class="mt-4 text-sm leading-lg">A dependable rhythm gives content room to breathe.</p>
        </div>
        <div class="flex h-24 items-end gap-4" aria-hidden="true">
          <span class="h-8 flex-1 rounded-control bg-neutral-300"></span
          ><span class="h-16 flex-1 rounded-control bg-ink"></span
          ><span class="h-24 flex-1 rounded-control bg-neutral-300"></span>
        </div>
      </article>
      <div class="k-cell-stack">
        <article class="k-card">
          <h3 class="text-subhead-xl">Light and dark.</h3>
          <p class="mt-4 text-sm">The same hierarchy in either appearance.</p>
        </article>
        <article class="k-card">
          <h3 class="text-subhead-xl">Ready to adapt.</h3>
          <p class="mt-4 text-sm">A consistent starting point for a distinct identity.</p>
        </article>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="k-container">
    <div class="mb-12 max-w-xl">
      <h2 class="text-subhead-4xl">Start simply. Make room to grow.</h2>
      <p class="mt-6 text-lg leading-lg">
        Three clear options, with the essentials easy to compare.
      </p>
    </div>
    <div class="k-layout lg:grid-cols-3">
      <article class="k-card flex flex-col">
        <div class="flex min-h-6 flex-wrap items-center gap-3">
          <h3 class="text-subhead-xl">Essential</h3>
        </div>
        <p class="mt-4 text-sm">For exploring a new idea.</p>
        <p class="mt-8 text-subhead-4xl">$0</p>
        <p class="mt-2 text-sm">No subscription required</p>
        <ul class="my-8 grid gap-4" role="list">
          <li class="flex items-start gap-3 text-sm">
            <span class="inline-flex size-5 shrink-0 [&>svg]:size-full"
              ><!-- @license lucide-static v1.52.0 - ISC -->
              <svg
                aria-hidden="true"
                focusable="false"
                class="lucide lucide-check"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.75"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path d="M20 6 9 17l-5-5" />
              </svg> </span
            ><span>Core foundations</span>
          </li>
          <li class="flex items-start gap-3 text-sm">
            <span class="inline-flex size-5 shrink-0 [&>svg]:size-full"
              ><!-- @license lucide-static v1.52.0 - ISC -->
              <svg
                aria-hidden="true"
                focusable="false"
                class="lucide lucide-check"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.75"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path d="M20 6 9 17l-5-5" />
              </svg> </span
            ><span>Common interface patterns</span>
          </li>
          <li class="flex items-start gap-3 text-sm">
            <span class="inline-flex size-5 shrink-0 [&>svg]:size-full"
              ><!-- @license lucide-static v1.52.0 - ISC -->
              <svg
                aria-hidden="true"
                focusable="false"
                class="lucide lucide-check"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.75"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path d="M20 6 9 17l-5-5" />
              </svg> </span
            ><span>Community resources</span>
          </li>
        </ul>
        <a class="k-button bg-canvas hover:bg-line mt-auto w-full" href="/kern-base.css" download
          >Get the foundations</a
        >
      </article>
      <article class="k-card flex flex-col">
        <div class="flex min-h-6 flex-wrap items-center gap-3">
          <h3 class="text-subhead-xl">Studio</h3>
          <span class="k-badge k-badge-sm">Popular</span>
        </div>
        <p class="mt-4 text-sm">For a growing body of work.</p>
        <p class="mt-8 text-subhead-4xl">$24</p>
        <p class="mt-2 text-sm">per month, billed monthly</p>
        <ul class="my-8 grid gap-4" role="list">
          <li class="flex items-start gap-3 text-sm">
            <span class="inline-flex size-5 shrink-0 [&>svg]:size-full"
              ><!-- @license lucide-static v1.52.0 - ISC -->
              <svg
                aria-hidden="true"
                focusable="false"
                class="lucide lucide-check"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.75"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path d="M20 6 9 17l-5-5" />
              </svg> </span
            ><span>Everything in Essential</span>
          </li>
          <li class="flex items-start gap-3 text-sm">
            <span class="inline-flex size-5 shrink-0 [&>svg]:size-full"
              ><!-- @license lucide-static v1.52.0 - ISC -->
              <svg
                aria-hidden="true"
                focusable="false"
                class="lucide lucide-check"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.75"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path d="M20 6 9 17l-5-5" />
              </svg> </span
            ><span>Complete section library</span>
          </li>
          <li class="flex items-start gap-3 text-sm">
            <span class="inline-flex size-5 shrink-0 [&>svg]:size-full"
              ><!-- @license lucide-static v1.52.0 - ISC -->
              <svg
                aria-hidden="true"
                focusable="false"
                class="lucide lucide-check"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.75"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path d="M20 6 9 17l-5-5" />
              </svg> </span
            ><span>Shared project templates</span>
          </li>
        </ul>
        <a class="k-button k-button-primary mt-auto w-full" href="/components/"
          >Explore the library</a
        >
      </article>
      <article class="k-card flex flex-col">
        <div class="flex min-h-6 flex-wrap items-center gap-3">
          <h3 class="text-subhead-xl">Organization</h3>
        </div>
        <p class="mt-4 text-sm">For teams working at scale.</p>
        <p class="mt-8 text-subhead-4xl">Let’s talk</p>
        <p class="mt-2 text-sm">A plan around the project</p>
        <ul class="my-8 grid gap-4" role="list">
          <li class="flex items-start gap-3 text-sm">
            <span class="inline-flex size-5 shrink-0 [&>svg]:size-full"
              ><!-- @license lucide-static v1.52.0 - ISC -->
              <svg
                aria-hidden="true"
                focusable="false"
                class="lucide lucide-check"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.75"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path d="M20 6 9 17l-5-5" />
              </svg> </span
            ><span>Everything in Studio</span>
          </li>
          <li class="flex items-start gap-3 text-sm">
            <span class="inline-flex size-5 shrink-0 [&>svg]:size-full"
              ><!-- @license lucide-static v1.52.0 - ISC -->
              <svg
                aria-hidden="true"
                focusable="false"
                class="lucide lucide-check"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.75"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path d="M20 6 9 17l-5-5" />
              </svg> </span
            ><span>Guided implementation</span>
          </li>
          <li class="flex items-start gap-3 text-sm">
            <span class="inline-flex size-5 shrink-0 [&>svg]:size-full"
              ><!-- @license lucide-static v1.52.0 - ISC -->
              <svg
                aria-hidden="true"
                focusable="false"
                class="lucide lucide-check"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="1.75"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path d="M20 6 9 17l-5-5" />
              </svg> </span
            ><span>Dedicated design support</span>
          </li>
        </ul>
        <a class="k-button bg-canvas hover:bg-line mt-auto w-full" href="mailto:hello@example.com"
          >Contact the team</a
        >
      </article>
    </div>
    <p class="mt-8 text-sm text-muted k-caption">
      Sample plans and pricing for layout demonstration only.
    </p>
  </div>
</section>

<section>
  <div class="k-container k-layout">
    <div class="k-card k-card-xl text-center">
      <h2 class="text-display-base sm:text-display-xl">A clear place to start.</h2>
      <p class="mx-auto mt-8 max-w-lg text-lg leading-base">
        Consistent foundations. Flexible layouts. Everything in place for the next idea.
      </p>
      <div class="mt-10 flex flex-wrap justify-center gap-4">
        <a class="k-button k-button-primary" href="/kern-base.css" download
          >Download the foundation ↓</a
        >
        <!--<a
        class="inline-flex items-center px-4 py-2 text-sm underline underline-offset-2 hover:decoration-2"
        href="/typography/"
        >Explore typography</a
      >-->
      </div>
    </div>
  </div>
</section>