UI COMPONENT CONSISTENCY CHECK

Components Showcase

Heading Components

PageTitle.astro

SAMPLE SUBTITLE

Sample Page Title

IndexSectionHeader.astro

SECTION HEADER

Section Header

This is a subtitle

In-page heading style examples

h1 - Main Heading

h2 - Large Heading (Theme Color)

h2 - Large Heading (with left border)

h3 - Medium Heading

h3 - Medium Heading (Gray)

h4 - Small Heading

Button Components

Tag Components

CategoryTag.astro - Small Size

Publications & Talks Awards Media Lab Life Events & Projects Others

CategoryTag.astro - Medium Size

Publications & Talks Awards Media Lab Life Events & Projects Others

CategoryTag.astro - Large Size

Publications & Talks Awards Media Lab Life Events & Projects Others

Card Components

MemberCard.astro - Using actual data

Hirozumi Yamaguchi
Professor

Hirozumi Yamaguchi

山口 弘純

h-yamagu@ web
Teruo Higashino
Specially Appointed Professor

Teruo Higashino

東野 輝夫

Professor, Kyoto Tachibana University

higashino@ web
Akira Utiyama
Associate Professor

Akira Utiyama

内山 彰

uchiyama@ web
Hamada Rizk
Associate Professor

Hamada Rizk

Hamada Rizk

hamada_rizk@ web
Akihito Hiromori
Associate Professor

Akihito Hiromori

廣森 聡仁

hiromori@ web

Other Components

Breadcrumb.astro

PublicationItem.astro

  • Sample Research Paper Title: A Comprehensive Study on Mobile Computing

    Yamada, T., Tanaka, H., and Suzuki, M.

    Proc. International Conference on Mobile Computing (MobiCom 2025), pp.123-145, Tokyo, Japan, October 2025

YearFilter.astro

📝 Design System Issues and Suggestions

Current Issues

  • Inconsistent heading styles (diverse combinations of colors, sizes, and decorations)
  • Card components are individually implemented for each use case
  • Inconsistent color usage (theme-main, amber, blue, gray are mixed)
  • Inconsistent spacing and padding values

Improvement Suggestions

  • Unify heading components (managed by level and variant)
  • Consolidate card components and differentiate by variant
  • Define and utilize design tokens (colors, sizes, spacing)
  • Build a unified design system with Tailwind custom configuration