Why Your Public Account Articles Look Ugly—and How to Make Them Look Premium in 3 Minutes

Many creators feel their WeChat public‑account articles have decent content but look "ugly" because they mix styles and theme colors without a clear system. The author explains that style (the visual language – shape, texture, motion) and theme color (the brand’s primary hue) are distinct concepts.

One‑Sentence Definition

Style = visual language (appearance); Theme color = brand’s primary hue (identity).

What Is Style?

Style is the visual language that gives the first impression, similar to clothing choices: business suit, hoodie, or han‑fu. It determines shape, texture, and motion.

What Is Theme Color?

Theme color is the brand’s main color that users instantly associate with the product (e.g., WeChat green, Taobao orange, Alipay blue). It serves as a visual ID.

Relationship

Style decides "what it looks like"; theme color decides "who you are". Mismatching them leads to a pleasant palette but a chaotic overall feel.

Designing Theme Color

Step 1: Clarify brand positioning

What problem does the product solve?

Who is the target user?

What emotion should be conveyed?

Examples:

Social communication → green/blue → flat, friendly (WeChat)
E‑commerce → orange/red → energetic, rich (Taobao)
Financial payment → blue/deep‑blue → stable, professional (Alipay)
Content community → red/pink → warm, lively (Xiaohongshu)
Knowledge tools → blue/black → professional, rational (Zhihu)
Life services → yellow/orange → warm, convenient (Meituan)

Step 2: Generate color scale

// Theme‑color scale generator (HSL based)
function generateColorScale(primaryColor) {
  const scales = {
    50:  adjustLightness(primaryColor, 95), // lightest
    100: adjustLightness(primaryColor, 85),
    200: adjustLightness(primaryColor, 70),
    300: adjustLightness(primaryColor, 55),
    400: adjustLightness(primaryColor, 40),
    500: primaryColor,               // main theme color
    600: adjustLightness(primaryColor, -10),
    700: adjustLightness(primaryColor, -20),
    800: adjustLightness(primaryColor, -30),
    900: adjustLightness(primaryColor, -40) // darkest
  };
  return scales;
}
// Example: WeChat green
const wechatGreen = generateColorScale('#07C160');
console.log(wechatGreen);

Step 3: Build CSS variable system

:root {
  /* Primary color series */
  --primary-50:  #E8F8EE;
  --primary-100: #C6EED4;
  ...
  --primary-500: #07C160; /* main */
  ...
  --primary-900: #03773A;

  /* Secondary colors */
  --secondary-blue:   #576B95;
  --secondary-orange: #FA9D3B;

  /* Neutral palette */
  --neutral-900: #000000;
  --neutral-700: #333333;
  --neutral-500: #888888;
  --neutral-100: #F7F7F7;

  /* Semantic colors */
  --success: #07C160;
  --warning: #FA9D3B;
  --error:   #FA5151;

  /* Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
}

Designing Page Style

Step 1: Define shape language

Minimalist – straight lines, 0‑4px radius ( border-radius: 0)

Friendly – rounded, 12‑24px radius ( border-radius: 16px)

Tech – geometric, 0‑8px radius ( border-radius: 4px)

Step 2: Choose texture

/* Flat – no texture */
.flat { background: var(--primary-500); box-shadow: none; }

/* Glass – semi‑transparent blur */
.glass { background: rgba(255,255,255,0.7); backdrop-filter: blur(10px); }

/* Neumorphism – subtle emboss */
.neumorphism { background: #e0e5ec; box-shadow: 8px 8px 16px #b8bec7, -8px -8px 16px #ffffff; }

/* Tech – glow effect */
.tech-glow { background: var(--gray-900); border: 1px solid var(--primary-500); box-shadow: 0 0 10px var(--primary-500), inset 0 0 10px rgba(0,255,136,0.1); }

Step 3: Define motion

/* Minimal – subtle */
.minimal-motion { transition: all 0.2s ease; }

/* Bouncy – playful */
.bouncy-motion { transition: all 0.3s cubic-bezier(0.68,-0.55,0.265,1.55); }

/* Tech – smooth futuristic */
.tech-motion { transition: all 0.3s cubic-bezier(0.4,0,0.2,1); }

Practical Scenarios

Scenario 1: Tech article

<style>
.tech-article {
  --primary: #00ff88;
  --bg: #0a0a0a;
  --text: #ffffff;
  background: var(--bg);
  color: var(--text);
  padding: 24px 16px;
}
.tech-article h1 { color: var(--primary); font-size: 24px; border-left: 4px solid var(--primary); padding-left: 12px; }
.tech-article .highlight-box { background: rgba(0,255,136,0.1); border: 1px solid var(--primary); border-radius: 8px; padding: 16px; margin: 16px 0; }
.tech-article code { background: rgba(0,255,136,0.2); color: var(--primary); padding: 2px 6px; border-radius: 4px; }
</style>

Scenario 2: Knowledge article

<style>
.knowledge-article {
  --primary: #1677FF;
  --bg: #ffffff;
  --text: #333333;
  background: var(--bg);
  color: var(--text);
  padding: 24px 16px;
  line-height: 1.8;
}
.knowledge-article h1 { color: var(--primary); font-size: 22px; margin-bottom: 20px; }
.knowledge-article .key-point { background: #f0f7ff; border-left: 4px solid var(--primary); padding: 12px 16px; margin: 16px 0; border-radius: 0 8px 8px 0; }
.knowledge-article .summary-box { background: #fafafa; border: 1px solid #eee; border-radius: 8px; padding: 16px; margin-top: 24px; }
</style>

Scenario 3: Lifestyle article

<style>
.lifestyle-article {
  --primary: #FF6B35;
  --bg: #FFF9F5;
  --text: #333333;
  background: var(--bg);
  color: var(--text);
  padding: 24px 16px;
}
.lifestyle-article h1 { color: var(--primary); font-size: 22px; }
.lifestyle-article .card { background: #ffffff; border-radius: 12px; padding: 16px; margin: 12px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.lifestyle-article .tag { display: inline-block; background: var(--primary); color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 12px; }
</style>

Quick Reference (converted from tables)

Product Type → Recommended Theme Color → Recommended Style → Border‑radius → Texture → Example
Social communication → green/blue → flat → 8px → none → WeChat
E‑commerce → orange/red → card → 12px → slight → Taobao
Financial payment → blue/deep‑blue → stable → 4px → none → Alipay
Content community → red/pink → magazine → 16px → slight → Xiaohongshu
Knowledge tools → blue/black → minimalist → 4px → none → Zhihu
Life services → yellow/orange → warm → 12px → slight → Meituan

Common Pitfalls

Pitfall 1: Frequently changing theme color

/* ❌ Wrong – each article uses a different primary color */
.article-1 { --primary: #07C160; }
.article-2 { --primary: #FF5000; }
.article-3 { --primary: #1677FF; }

/* ✅ Correct – keep a single primary color */
:root { --primary: #07C160; }

Changing the primary color breaks brand recognition.

Pitfall 2: Too many colors

/* ❌ Wrong – five primary colors */
.article { --color-1:#07C160; --color-2:#FF5000; --color-3:#1677FF; --color-4:#FFD100; --color-5:#FF2442; }

/* ✅ Correct – one primary + 2‑3 auxiliaries */
.article { --primary:#07C160; --secondary:#576B95; --accent:#FA9D3B; }

More colors dilute brand identity; major brands keep a single primary hue.

Pitfall 3: Mismatched style and theme color

/* ❌ Wrong – finance app with pink + cartoon style */
.finance-app { --primary:#FF69B4; border-radius:24px; }

/* ✅ Correct – finance app with deep blue + stable style */
.finance-app { --primary:#1677FF; border-radius:4px; }

Style should support the theme color and product positioning.

Core Takeaway

Style is the "skin"; theme color is the "ID". Consistent style + a unique, stable theme color creates strong brand recognition.