Components

Reusable UI components with copy-paste code. All use semantic design tokens — auto-adapt to dark mode.

Buttons

→ GỬI FILE CHO TỤI MÌNH
→ XEM THÊM
<a href="#" class="btn-primary"> GỬI FILE</a>
<a href="#" class="btn-secondary"> XEM THÊM</a>

Nav Links

[01] PRODUCTS [02] SPECS 
<a href="#" class="nav-link">
  <span class="nav-num">[01]</span>
  <Icon name="Package" size=14 /> PRODUCTS
</a>

Cards

VIEW SPECS →

PROJECT #001

Sample Card

Hover to see grayscale → color effect.

<div class="archive-card">
  <div class="card-img-wrap">
    <img src="..." class="card-img" />
    <div class="card-overlay">VIEW SPECS</div>
  </div>
  <div class="card-body">
    <p class="card-code">PROJECT #001</p>
    <h3 class="card-title">Title</h3>
    <p class="card-desc">Desc</p>
  </div>
</div>

Spec Table

DEVICETECHSTATUS
PRINTER #01Resin MSLA● ONLINE
PRINTER #02FDM CF● ONLINE

Bento Grid

SPECS
DETAIL
PROCESS
MATERIAL
<div class="bento-grid">
  <div class="bento-cell bento-hero">...</div>
  <div class="bento-cell bento-specs">...</div>
  <div class="bento-cell bento-detail">...</div>
  <div class="bento-cell bento-process">...</div>
  <div class="bento-cell bento-material">...</div>
</div>