npm package: @intellicar/phoenix-design-system
Description: The Intellicar Design System was created to help us build products for our customers more efficiently.
Author: sunny.sharma@intellicar.in
Latest version: 0.1.35

<div class="sbdocs sbdocs-content">
  <div class="logo" style="display: flex;align-items: center;justify-content: center;margin-bottom: 3rem;">
    <img width="30%" src="https://github.com/intellicar/phoenix-design-system/raw/main/public/intellicar.png" alt="Intellicar" />
  </div>
	<h1 id="introduction-to-the-intellicar-design-system" class="sbdocs sbdocs-h1">
    <a style="color: #E62F4D !important" aria-hidden="true" href="#introduction-to-the-intellicar-design-system" tabindex="-1" target="_self" class="css-yi0p10">
      Introduction to the Phoenix Design System by Intellicar Telematics
    </a>
  </h1>
	<p class="sbdocs sbdocs-p">
    The Phoenix Design System was created to help us build products for our customers more efficiently. Established to be the single source of truth for product teams working on Intellicar products across the globe, the Phoenix Design System contains everything from Getting Started guides through to Core Components intended for adoption within each product. It enables product teams to design and develop with speed, consistency, and quality. Our dedicated Design Operations team works with the individual product teams across Intellicar to ensure the system continues to evolve to meet the needs of our designers, developers, and customers.
  </p>
  <br /><br />
	<h2 id="objectives--benefits" class="sbdocs sbdocs-h2">
    <a style="color: #E62F4D !important" aria-hidden="true" href="#objectives--benefits" tabindex="-1" target="_self" class="css-yi0p10">
      Objectives &amp; Benefits
    </a>
  </h2>
  <br /><br />
	<h3 id="consistency" class="sbdocs sbdocs-h3">
    <a style="color: #E62F4D !important" aria-hidden="true" href="#consistency" tabindex="-1" target="_self" class="css-yi0p10">
      Consistency
    </a>
  </h3>
	<p class="sbdocs sbdocs-p">
    Create a common set of principles, resources, and components to improve consistency and end user experience across Intellicar’s digital product portfolio.
  </p>
	<h4 id="benefits" class="sbdocs sbdocs-h4">
    <a style="color: #E62F4D !important" aria-hidden="true" href="#benefits" tabindex="-1" target="_self" class="css-yi0p10">
      Benefits
    </a>
  </h4>
	<ul class="sbdocs sbdocs-ul">
		<li class="sbdocs sbdocs-li" style="font-size: 1rem;letter-spacing: 1px;word-spacing: 2px;">Creates a single source of truth for product teams</li>
		<li class="sbdocs sbdocs-li" style="font-size: 1rem;letter-spacing: 1px;word-spacing: 2px;">Improves quality as a result of documented and applied standards</li>
		<li class="sbdocs sbdocs-li" style="font-size: 1rem;letter-spacing: 1px;word-spacing: 2px;">Improves user experience as a result of consistent components, design interactions, and patterns</li>
	</ul>
  <br />
	<h3 id="efficiency" class="sbdocs sbdocs-h3">
    <a style="color: #E62F4D !important" aria-hidden="true" href="#efficiency" tabindex="-1" target="_self" class="css-yi0p10">
      Efficiency
    </a>
  </h3>
	<p class="sbdocs sbdocs-p css-h1r25o">Develop a unified system, with the appropriate governance applied, to increase the speed at which product teams produce new or improved components, and reduce duplication.</p>
	<h4 id="benefits-1" class="sbdocs sbdocs-h4">
    <a style="color: #E62F4D !important" aria-hidden="true" href="#benefits-1" tabindex="-1" target="_self" class="css-yi0p10">
      Benefits
    </a>
  </h4>
	<ul class="sbdocs sbdocs-ul css-6w1349">
		<li class="sbdocs sbdocs-li" style="font-size: 1rem;letter-spacing: 1px;word-spacing: 2px;">Improves velocity for designers and developers working across Intellicar projects</li>
		<li class="sbdocs sbdocs-li" style="font-size: 1rem;letter-spacing: 1px;word-spacing: 2px;">Harnesses the collective power of multiple product teams to deliver more effectively</li>
		<li class="sbdocs sbdocs-li" style="font-size: 1rem;letter-spacing: 1px;word-spacing: 2px;">Reduces duplication of work across Intellicar markets and product teams</li>
		<li class="sbdocs sbdocs-li" style="font-size: 1rem;letter-spacing: 1px;word-spacing: 2px;">Frees up time to focus on innovation through new technology and frameworks</li>
	</ul>
  <br />
	<h3 id="collaboration" class="sbdocs sbdocs-h3">
    <a style="color: #E62F4D !important" aria-hidden="true" href="#collaboration" tabindex="-1" target="_self" class="css-yi0p10">
      Collaboration
    </a>
  </h3>
	<p class="sbdocs sbdocs-p css-h1r25o">Create an open, extensive, and evolving platform accessible for all stakeholders to support collaboration between disciplines, teams, and markets.</p>
	<h4 id="benefits-2" class="sbdocs sbdocs-h4 css-hsks4z">
    <a style="color: #E62F4D !important" aria-hidden="true" href="#benefits-2" tabindex="-1" target="_self" class="css-yi0p10">
      Benefits
    </a>
  </h4>
	<ul class="sbdocs sbdocs-ul css-6w1349">
		<li class="sbdocs sbdocs-li" style="font-size: 1rem;letter-spacing: 1px;word-spacing: 2px;">Improves collaboration between disciplines through common tools and language</li>
		<li class="sbdocs sbdocs-li" style="font-size: 1rem;letter-spacing: 1px;word-spacing: 2px;">Creates the foundation for scale, with other product teams and markets</li>
		<li class="sbdocs sbdocs-li" style="font-size: 1rem;letter-spacing: 1px;word-spacing: 2px;">Improves the onboarding experience for product team members</li>
	</ul>

    <h3 id="collaboration" class="sbdocs sbdocs-h3">
    <a aria-hidden="true" href="#collaboration" tabindex="-1" target="_self" class="css-yi0p10">
      How To Use?
    </a>
  </h3>

  <code class="sbdocs sbdocs-p css-h1r25o">npm i @intellicar/phoenix-design-system</code>
  <h4 id="benefits-2" class="sbdocs sbdocs-h4 css-hsks4z"><a>Example for button</a></h4>

  <code>
    {"import { Button } from '@intellicar/phoenix-design-system'"}
  </code>
  <br />
  <br />
  <code>
    {'<Button label="Click Me!" onClick: () => {console.log("Clicked")} />'}
  </code>

  <h4>For more info, visit <a href="https://uikit.intellicar.in" target="_blank">https://uikit.intellicar.in</a></h4>
</div>