Components

核心 UI 元件。Primary = 黑底白字（品牌主調），Accent = 藍底白字。所有元件使用 CSS Custom Properties，framework-agnostic。

Button

四種變體：Primary（預設）、Accent、Secondary（outlined）、Ghost。

<!-- Primary (default) -->
<button class="button primary">Primary</button>

<!-- Accent -->
<button class="button accent">Accent</button>

<!-- Secondary (outlined) -->
<button class="button secondary">Secondary</button>

<!-- Ghost -->
<button class="button ghost">Ghost</button>

/* CSS tokens used */
.primary {
  background: var(--bg-inverse);
  color: var(--text-inverse);
}
.accent {
  background: var(--bg-accent);
  color: var(--text-on-accent);
}

Tag

用於專案分類、技術標記。Default 和 Accent 兩種變體。

BrandingDigitalMotion DesignFeaturedNew

<span class="tag default">Branding</span>
<span class="tag accent">Featured</span>

/* CSS */
.default {
  background: var(--bg-secondary);
  border-radius: var(--radius-full);
}
.accent {
  background: var(--color-blue-100);
  color: var(--color-blue-400);
}

Input

極簡風格，底線或方框。Text、Textarea、Search 變體。

NameEmailSearchMessage

<label>
  <span class="label">Email</span>
  <input type="text" placeholder="hello@fpa.studio" />
</label>

/* CSS */
.input {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
}
.input:focus {
  border-color: var(--border-accent);
}

Divider

使用 border-default 或 border-strong。水平和垂直方向。

Content above

Content below (default)

Content below (strong)

Left

Center

Right

<!-- Horizontal (default) -->
<div class="divider horizontal" role="separator"></div>

<!-- Strong variant -->
<div class="divider horizontal strong" role="separator"></div>

/* CSS */
.divider { background: var(--border-default); height: 1px; }
.strong  { background: var(--border-strong); }