baseline-ui（基线用户界面）

Baseline UI — Design System Reference

When invoked, read and reference these canonical source files before answering any design question:

• frontend/src/styles/global.css — design tokens (CSS custom properties)
• frontend/src/styles/responsive.css — breakpoints, accessibility rules
• frontend/src/components/Layout/AdminLayout.tsx — admin shell layout

Color Palette (CSS Custom Properties)

Rule: Never hardcode hex values. Always use var(--color-*) in CSS or reference Bootstrap utility classes that map to these values.

Typography

• Font stack: 'Segoe UI', system-ui, -apple-system, sans-serif
• Headings: font-weight: 700, line-height: 1.2, color: var(--color-primary)
• Body: line-height: 1.6, color: var(--color-text)
• Links: color: var(--color-primary-light), underline on hover

Spacing & Layout

• Max width: --max-width: 1200px
• Section padding: 4rem 0 (desktop), 2.5rem 0 (mobile), 3rem 0 (tablet)
• Container: max-width: var(--max-width), padding: 0 1rem
• Admin shell: Dark navbar (navbar-dark bg-dark), bg-light main area, container py-4 content wrapper

Bootstrap 5 Component Patterns

These are the canonical patterns used throughout the admin UI:

Cards

<div class="card border-0 shadow-sm mb-4">
  <div class="card-header bg-white fw-semibold">Title</div>
  <div class="card-body">Content</div>
</div>

KPI Stat Cards

<div class="col-md-3">
  <div class="card border-0 shadow-sm">
    <div class="card-body text-center p-3">
      <div class="fs-4 fw-bold text-primary">42</div>
      <div class="text-muted small">Metric Label</div>
    </div>
  </div>
</div>

Data Tables

<div class="table-responsive">
  <table class="table table-hover mb-0">
    <thead class="table-light">...</thead>
    <tbody>...</tbody>
  </table>
</div>

Tab Navigation

<ul class="nav nav-tabs mb-4">
  <li class="nav-item">
    <button class="nav-link active" onClick={...}>Tab Label</button>
  </li>
</ul>

Badges

<span class="badge bg-success">active</span>
<span class="badge bg-warning">paused</span>
<span class="badge bg-info">completed</span>
<span class="badge bg-secondary">draft</span>
<span class="badge bg-danger">TEST MODE</span>

Filter Bars

<div class="d-flex gap-2 mb-3 flex-wrap align-items-center">
  <input class="form-control form-control-sm" style="max-width: 250px" placeholder="Search..." />
  <select class="form-select form-select-sm" style="max-width: 150px">...</select>
  <div class="ms-auto d-flex gap-2">
    <button class="btn btn-outline-primary btn-sm">Action</button>
  </div>
</div>

Buttons

<button class="btn btn-primary btn-sm">Primary</button>
<button class="btn btn-outline-secondary btn-sm">Secondary</button>
<button class="btn btn-outline-danger btn-sm">Danger</button>
<button class="btn btn-success btn-sm">Success</button>

Form Controls

<label class="form-label small fw-medium">Label</label>
<input class="form-control form-control-sm" />
<div class="form-text">Helper text</div>

<!-- Toggle switch -->
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="sw-id" />
  <label class="form-check-label small" for="sw-id">
    <span class="fw-medium">Title</span><br />
    <span class="text-muted">Description</span>
  </label>
</div>

Modal Overlays

<div class="modal show d-block" style="backgroundColor: 'rgba(0,0,0,0.5)'">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Title</h5>
        <button class="btn-close" onClick={onClose} />
      </div>
      <div class="modal-body" style="max-height: 500px; overflow: auto">...</div>
      <div class="modal-footer">...</div>
    </div>
  </div>
</div>

Custom CSS Classes (from global.css)

Responsive Breakpoints

Accessibility Patterns

• Focus: outline: 3px solid var(--color-primary-light), outline-offset: 2px on :focus-visible
• Reduced motion: All animations/transitions → 0.01ms when prefers-reduced-motion: reduce
• High contrast: Cards get 2px solid borders, .text-muted becomes full contrast, outline buttons get 2px borders

Existing Reusable Components