Blog Post - JS + CSS

Blog Post

Contoh Penggunaan

Blog Post Title

Description

Release Date

Jane Doe

Design systems are often the unsung heroes of the products we use every day—from mobile apps and websites to the interfaces on television screens and car dashboards. They serve as the DNA for product design and development, encoding the principles and elements that define the very experience users interact with. Colors and icons convey meaning. Buttons are implemented with a consistent size and shape. Language is clear and understandable. If your design system does its job well, your end users hopefully don't spend too much time thinking about it at all.

What Is A Design System?

At its core, a design system is a set of building blocks and standards that help keep the look and feel of products and experiences consistent. Think of it as a blueprint, offering a unified language and structured framework that guides teams through the complex process of creating digital products. A design system can assist in reducing the amount of time spent recreating elements and patterns while designing and building products and interfaces at scale.

Components of a design system

You can think of hierarchy in design systems like this:

Design System

This top-level container is your overarching guidance, an ever-evolving foundational collection of resources and processes for your product ecosystem. It can include technical specs, design tokens, documentation, and best practices; it can also include core principles and processes to guide UX design decisions and product development.

<div class="flex flex-col self-center space-y-6 lg:space-y-8 p-4 w-full">
  <div class="space-y-3 lg:space-y-4">
    <p class="font-bold">Category</p>
    <div>
      <p class="text-xs">8 Mins Read</p>
      <h1 class="text-3xl lg:text-5xl font-semibold">Blog Post Title</h1>
    </div>
    <p class="text-base">Description</p>
    <p class="text-xs">Release Date</p>
    <div class="flex items-center gap-2">
      <div class="ina-avatar">
        <img src={avatarImage} alt="User 1" />
      </div>
      <span class="text-base">Jane Doe</span>
    </div>
  </div>
  <div class="space-y-3 lg:space-y-5">
    <img src={illustrasiImage} alt="Illustrasi Blog Post" class="w-full" />
    <p class="text-xs">
      Design systems are often the unsung heroes of the products we use every day—from mobile apps
      and websites to the interfaces on television screens and car dashboards. They serve as the DNA
      for product design and development, encoding the principles and elements that define the very
      experience users interact with. Colors and icons convey meaning. Buttons are implemented with
      a consistent size and shape. Language is clear and understandable. If your design system does
      its job well, your end users hopefully don't spend too much time thinking about it at all.
    </p>
    <div>
      <h2 class="text-sm md:text-base lg:text-lg font-semibold mb-1 lg:mb-2">
        What Is A Design System?
      </h2>
      <p class="text-xs">
        At its core, a design system is a set of building blocks and standards that help keep the
        look and feel of products and experiences consistent. Think of it as a blueprint, offering a
        unified language and structured framework that guides teams through the complex process of
        creating digital products. A design system can assist in reducing the amount of time spent
        recreating elements and patterns while designing and building products and interfaces at
        scale.
      </p>
    </div>
    <div>
      <h2 class="text-sm md:text-base lg:text-lg font-semibold mb-1 lg:mb-2">
        Components of a design system
      </h2>
      <p class="text-xs">You can think of hierarchy in design systems like this:</p>
    </div>
    <ol class="list-decimal list-inside">
      <li class="text-xs md:text-sm lg:text-lg font-semibold mb-1 lg:mb-2 text-neutral-800">
        Design System
      </li>
      <p class="text-xs font-normal list-none">
        This top-level container is your overarching guidance, an ever-evolving foundational
        collection of resources and processes for your product ecosystem. It can include technical
        specs, design tokens, documentation, and best practices; it can also include core principles
        and processes to guide UX design decisions and product development.
      </p>
    </ol>
  </div>
  <div class="flex flex-row justify-between">
    <p class="text-xs md:text-sm lg:text-lg font-semibold">Related Articles</p>
    <button type="button" class="ina-button ina-button--link ina-button--md">
      Lihat Semua
      <svg
        class="ina-button__icon"
        xmlns="http://www.w3.org/2000/svg"
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <path d="M5 12l14 0"></path>
        <path d="M13 18l6 -6"></path>
        <path d="M13 6l6 6"></path>
      </svg>
    </button>
  </div>
</div>