MianxiangAI® design standard · v1.0

The “Powered by MianxiangAI®” credit

A one-line signature at the bottom of the websites, admin consoles, H5 pages, mini programs and apps delivered by MianxiangAI®. It says who provides the technology behind the platform. It is a signature, not an ad: clients notice the care, visitors barely notice it at all.

On dark · #152c52

Powered byMianxiangAI^®Enterprise AI Foundation

Actual size

On light · #ffffff

Powered byMianxiangAI^®Enterprise AI Foundation

Actual size

What the credit means

The technology behind this platform is provided by MianxiangAI® (Shanghai Paixu Network Technology Co., Ltd.): building, delivering and maintaining the system.
The content, products and services on the platform are the responsibility of its owner.
Clicking the credit opens the MianxiangAI® website, where you can learn about us or book a demo for your own business.

Principles

1One step quieter

Smaller and dimmer than the copyright and registration lines around it — never the most prominent thing in a footer.

2Refined through detail

A spaced-out label, a small spark, a slightly brighter name, a hairline divider, a softer tagline. Five layers, all light.

3Consistent everywhere

Same wording, structure, proportions and interaction on every platform. Colour comes in exactly two sets: dark and light.

4Never competes with the client

No Paixu logo image, no blocks of brand colour, no borders, no backgrounds.

Wording

Fixed. Do not reword.

Language	Label	Brand	Tagline
Chinese	技术支持	MianxiangAI®	企业级AI新智基座
English	Powered by	MianxiangAI®	Enterprise AI Foundation

Links to https://www.paixu.com.cn and opens in a new window.
Written MianxiangAI — capital M, A and I. Never “Mianxiang AI” or “MIANXIANGAI”.
The ® follows the name directly as a superscript at about two-thirds of the text size.
A 1px hairline separates the name from the tagline — not a “|” character. Plain-text contexts use a full-width “｜”.
Tooltip: “MianxiangAI® 企业级AI新智基座” in Chinese, “MianxiangAI® — Enterprise AI Foundation” in English.

Anatomy

Five parts, left to right. ② to ⑤ form one link; ① sits outside it.

①Label

Not clickable. Smallest size, wide letter-spacing.

②Spark

13×13 inline SVG in brand cyan — the only coloured element.

③Brand name

Semibold (600), the brightest part.

④Divider

A 1×10px hairline.

⑤Tagline

One step dimmer than the name.

Placement

Platform	Position	Alignment
Website	Very bottom of the footer, on its own line below copyright / registration	Follows the copyright line: right if it is right, centred if centred
Website, narrow (≤ 992px)	Same, after the copyright line stacks vertically	Left (follows the copyright line)
Admin console	Bottom of the sign-in page below copyright; bottom of the “About” dialog	Centred
H5 / mobile web	Very bottom of the footer	Centred
WeChat mini program	Bottom of the “Me” or “About” page	Centred
App	Bottom of Settings → About	Centred

Never place it inHeadersNavigationSidebarsThe first screenDialog bodiesCheckout, forms and other task flows

Visual specs

Size and spacing (both themes)

Line: 12px (11–12px on mobile)
Label: 11px · letter-spacing 0.12em
Brand name: 12px · 600 · letter-spacing 0.02em
®: 8px · 400 · superscript · 1px left margin
Tagline: 12px · letter-spacing 0.04em
Spark: 13 × 13px
Line height: 1.6
Gaps: Label ↔ link 10px; inside the link 7px
Divider: 1px wide · 10px tall
Below copyright: Visually tight, about 6px

Colour

On dark#152c52

Label	#7f9bbd	4.84 : 1
Spark	#6fd0e2 · 0.8	7.79 : 1
Brand name	#c9d7e9	9.5 : 1
Divider	rgba(255,255,255,.20)	—
Tagline	#86a0c1	5.16 : 1
Hover: name	#ffffff → #9fe6f2	—
Hover: tagline	#c9d7e9	—

On light#ffffff

Label	#6b7588	4.64 : 1
Spark	#0b7d91 · 0.85	4.82 : 1
Brand name	#1f3b66	11.2 : 1
Divider	rgba(0,0,0,.14)	—
Tagline	#5b6577	5.88 : 1
Hover: name	#1f3b66 → #0a8fa6	—
Hover: tagline	#1f3b66	—

If a footer colour differs a lot from these, re-pick colours with the same hierarchy (name brightest > tagline > label) and keep every text at ≥ 4.5 : 1 against the background (WCAG AA).

Interaction

Powered byMianxiangAI^®Enterprise AI Foundation

Hover over the credit above to try it.

Default	Quieter than the copyright line.
Hover	The name lights up with a gradient; the spark turns 45° and grows to 1.08× (0.4s ease); the tagline brightens.
Keyboard focus	1px cyan outline, 3px offset, 2px radius.
Click	Opens in a new window with rel="noopener"; mini programs copy the URL and show a toast.
Reduced motion	The spark stays still; only colours change.

Code (copy and paste)

Every class starts with mx-credit, so it never clashes with project styles. Add mx-credit--light on light backgrounds and mx-credit--end to right-align.

HTML

<p class="mx-credit">
  <span class="mx-credit-k">Powered by</span>
  <a class="mx-credit-a" href="https://www.paixu.com.cn" target="_blank" rel="noopener"
     title="MianxiangAI® — Enterprise AI Foundation">
    <svg class="mx-credit-ic" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M8 1.2l1.45 4.1 4.1 1.45-4.1 1.45L8 12.3 6.55 8.2l-4.1-1.45 4.1-1.45L8 1.2z" fill="currentColor"/>
      <circle cx="13.2" cy="12.6" r="1.3" fill="currentColor" opacity=".65"/>
    </svg>
    <b>MianxiangAI<sup>®</sup></b>
    <i aria-hidden="true"></i>
    <em>Enterprise AI Foundation</em>
  </a>
</p>

CSS

.mx-credit {
  --mx-k: #7f9bbd;  --mx-ic: #6fd0e2;  --mx-b: #c9d7e9;
  --mx-line: rgba(255,255,255,.2);  --mx-em: #86a0c1;
  --mx-hover-from: #ffffff;  --mx-hover-to: #9fe6f2;  --mx-hover-em: #c9d7e9;
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; justify-content: center;
  margin: 0; font-size: 12px; line-height: 1.6;
}
.mx-credit--light {
  --mx-k: #6b7588;  --mx-ic: #0b7d91;  --mx-b: #1f3b66;
  --mx-line: rgba(0,0,0,.14);  --mx-em: #5b6577;
  --mx-hover-from: #1f3b66;  --mx-hover-to: #0a8fa6;  --mx-hover-em: #1f3b66;
}
.mx-credit--end { justify-content: flex-end; }

.mx-credit-k  { font-size: 11px; color: var(--mx-k); letter-spacing: .12em; }
.mx-credit-a  { display: inline-flex; gap: 7px; align-items: center; color: var(--mx-em); text-decoration: none; }
.mx-credit-ic { flex: none; width: 13px; height: 13px; color: var(--mx-ic); opacity: .8; transition: transform .4s ease, opacity .2s; }
.mx-credit-a b   { font-weight: 600; color: var(--mx-b); letter-spacing: .02em; }
.mx-credit-a sup { margin-left: 1px; font-size: 8px; font-weight: 400; vertical-align: super; }
.mx-credit-a i   { width: 1px; height: 10px; background: var(--mx-line); }
.mx-credit-a em  { font-style: normal; color: var(--mx-em); letter-spacing: .04em; transition: color .2s; }

.mx-credit-a:hover .mx-credit-ic { opacity: 1; transform: rotate(45deg) scale(1.08); }
.mx-credit-a:hover b {
  color: transparent;
  background: linear-gradient(90deg, var(--mx-hover-from), var(--mx-hover-to));
  -webkit-background-clip: text; background-clip: text;
}
.mx-credit-a:hover em { color: var(--mx-hover-em); }
.mx-credit-a:focus-visible { outline: 1px solid var(--mx-ic); outline-offset: 3px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .mx-credit-ic { transition: none; }
  .mx-credit-a:hover .mx-credit-ic { transform: none; }
}
@media (max-width: 992px) {
  .mx-credit--end { justify-content: flex-start; }  /* 窄屏跟随版权行改为左对齐 */
}

<!-- src/components/MxCredit.vue -->
<template>
  <p class="mx-credit" :class="{ 'mx-credit--light': light, 'mx-credit--end': end }">
    <span class="mx-credit-k">{{ en ? 'Powered by' : '技术支持' }}</span>
    <a class="mx-credit-a" href="https://www.paixu.com.cn" target="_blank" rel="noopener"
       :title="en ? 'MianxiangAI® — Enterprise AI Foundation' : 'MianxiangAI® 企业级AI新智基座'">
      <svg class="mx-credit-ic" viewBox="0 0 16 16" aria-hidden="true">
        <path d="M8 1.2l1.45 4.1 4.1 1.45-4.1 1.45L8 12.3 6.55 8.2l-4.1-1.45 4.1-1.45L8 1.2z" fill="currentColor"/>
        <circle cx="13.2" cy="12.6" r="1.3" fill="currentColor" opacity=".65"/>
      </svg>
      <b>MianxiangAI<sup>®</sup></b>
      <i aria-hidden="true"></i>
      <em>{{ en ? 'Enterprise AI Foundation' : '企业级AI新智基座' }}</em>
    </a>
  </p>
</template>

<script setup lang="ts">
defineProps<{ en?: boolean; light?: boolean; end?: boolean }>()
</script>

Put the CSS tab into <style> (not scoped, or wrap it in :deep). Usage: <MxCredit light />, <MxCredit en end />.

PHP

<?php $en = ($lang ?? 'zh') === 'en'; ?>
<p class="mx-credit mx-credit--end">
  <span class="mx-credit-k"><?= $en ? 'Powered by' : '技术支持' ?></span>
  <a class="mx-credit-a" href="https://www.paixu.com.cn" target="_blank" rel="noopener"
     title="<?= $en ? 'MianxiangAI® — Enterprise AI Foundation' : 'MianxiangAI® 企业级AI新智基座' ?>">
    <svg class="mx-credit-ic" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M8 1.2l1.45 4.1 4.1 1.45-4.1 1.45L8 12.3 6.55 8.2l-4.1-1.45 4.1-1.45L8 1.2z" fill="currentColor"/>
      <circle cx="13.2" cy="12.6" r="1.3" fill="currentColor" opacity=".65"/>
    </svg>
    <b>MianxiangAI<sup>®</sup></b>
    <i aria-hidden="true"></i>
    <em><?= $en ? 'Enterprise AI Foundation' : '企业级AI新智基座' ?></em>
  </a>
</p>

Mini program

<!-- wxml -->
<view class="mx-credit mx-credit--light">
  <text class="mx-credit-k">技术支持</text>
  <view class="mx-credit-a" bindtap="onMxCredit">
    <text class="mx-credit-ic">✦</text>
    <text class="mx-credit-b">MianxiangAI<text class="mx-credit-sup">®</text></text>
    <view class="mx-credit-line"></view>
    <text class="mx-credit-em">企业级AI新智基座</text>
  </view>
</view>

// js
onMxCredit() {
  wx.setClipboardData({ data: 'https://www.paixu.com.cn',
    success: () => wx.showToast({ title: '网址已复制', icon: 'none' }) })
}

/* wxss（浅色底；1px ≈ 2rpx） */
.mx-credit { display:flex; justify-content:center; align-items:center; gap:20rpx; padding:24rpx 0 32rpx; font-size:22rpx; line-height:1.6; }
.mx-credit-k { font-size:20rpx; color:#6b7588; letter-spacing:.12em; }
.mx-credit-a { display:flex; align-items:center; gap:14rpx; }
.mx-credit-ic { font-size:22rpx; color:#0b7d91; }
.mx-credit-b { font-weight:600; color:#1f3b66; letter-spacing:.02em; }
.mx-credit-sup { font-size:14rpx; vertical-align:super; font-weight:400; }
.mx-credit-line { width:2rpx; height:20rpx; background:rgba(0,0,0,.14); }
.mx-credit-em { color:#5b6577; letter-spacing:.04em; }

Mini programs cannot open external URLs, so a tap copies the URL and shows a toast. Use the dark colour set on dark pages.

Plain text

技术支持：MianxiangAI®｜企业级AI新智基座  https://www.paixu.com.cn
Powered by MianxiangAI® | Enterprise AI Foundation  https://www.paixu.com.cn

For email signatures, PDFs and print, where a hairline cannot be drawn.

Links and SEO

Always target="_blank" rel="noopener": a new window, and the new page cannot control the original one.
The link is hard-coded, never part of the client’s editable content, so it cannot be deleted or changed by accident.
A site-wide footer link creates many identical backlinks, which search engines treat with caution. Default to rel="noopener"; for very large client sites (hundreds of thousands of pages) or on request, use rel="noopener nofollow" and keep the brand exposure only.

Don’ts and launch checklist

Don’ts

Reword it, abbreviate it to MXAI, or drop the ®
Enlarge it, bold the whole line, or add a background, border, shadow or button style
Make it brighter than the copyright line, or place it above it
Replace the spark with an emoji (it renders differently everywhere and adds colour)
Hide it with display:none on some pages — it is on every page or on none

Launch checklist

Wording matches the Wording section exactly (check both languages)
Sits below the copyright line and follows its alignment
Quieter than the copyright line by default
Hover: gradient name, turning spark; reachable with Tab and outlined on focus
Opens https://www.paixu.com.cn in a new window (mini programs copy the URL)
No broken wrapping or overflow at phone widths
Correct dark / light colours; every text ≥ 4.5 : 1
Static / CDN caches purged so every page is updated

Want one for your business?

Every platform MianxiangAI® delivers carries this line. Book a demo and see what it can do for your business.

Book a demo → Contact