AOS/skills/design/design-templates/social-card-editorial/references/theme-presets.md

Theme Presets

Use one theme for one image package. Do not mix palettes across pages unless the user explicitly asks for a deliberate multi-chapter system.

Editorial Magazine x E-ink Palettes

These are adapted from the Guizang PPT electronic-magazine mode for static Rednote and WeChat images.

Ink Classic

Use for business commentary, AI essays, product thinking, and neutral editorial posts.

:root {
  --paper: #f3f0e8;
  --paper-2: #ebe6da;
  --ink: #0a0a0b;
  --muted: #68625a;
  --line: rgba(10,10,11,.22);
  --accent: #111111;
  --accent-soft: #d8d2c6;
}

Indigo Porcelain

Use for technology, research, data, AI infrastructure, and calm analytical writing.

:root {
  --paper: #f2f4f5;
  --paper-2: #e5ebef;
  --ink: #0a1f3d;
  --muted: #5f6d78;
  --line: rgba(10,31,61,.20);
  --accent: #315d93;
  --accent-soft: #d7e1ec;
}

Forest Ink

Use for hiking, outdoor, nature, sustainability, personal field notes, and grounded lifestyle posts.

:root {
  --paper: #f5f1e8;
  --paper-2: #e8dfcf;
  --ink: #16251b;
  --muted: #5d665d;
  --line: rgba(22,37,27,.22);
  --accent: #2e6b4f;
  --accent-soft: #d4dfd2;
}

Kraft Paper

Use for memory, craft, personal essays, old objects, creator notes, and warm low-tech topics.

:root {
  --paper: #eedfc7;
  --paper-2: #dfc9a8;
  --ink: #2a1e13;
  --muted: #755f49;
  --line: rgba(42,30,19,.24);
  --accent: #9b5a2e;
  --accent-soft: #d5b58f;
}

Dune

Use for design, object studies, portfolio-like covers, gallery tone, and restrained aesthetic posts.

:root {
  --paper: #f0e6d2;
  --paper-2: #ded0b7;
  --ink: #1f1a14;
  --muted: #6f6557;
  --line: rgba(31,26,20,.22);
  --accent: #8f7650;
  --accent-soft: #d4c2a4;
}

Midnight Ink

The only official dark Editorial palette. Use for game key art, night photography, cinematic covers, dark-themed cultural pieces — content whose source imagery is already dark and would be diminished by paper backgrounds. Do not improvise other dark palettes; if Midnight Ink does not fit, pick a different mode (Editorial dark is not a universal switch).

:root {
  --paper: #0e0d0c;
  --paper-2: #1a1714;
  --ink: #ece2cf;
  --muted: #9a8c75;
  --line: rgba(236,226,207,.22);
  --accent: #d4a04a;
  --accent-soft: #3a2a14;
}

Midnight Ink must also override two background layers — light-paper math does not carry over:

[data-theme="midnight-ink"] .grain {
  opacity: .26;
  mix-blend-mode: screen;
  background-image: radial-gradient(rgba(255,244,214,.10) 1px, transparent 1px);
}
[data-theme="midnight-ink"] .paper-wash {
  background:
    radial-gradient(80% 50% at 28% 16%, rgba(212,160,74,.12), transparent 64%),
    radial-gradient(70% 60% at 80% 86%, rgba(60,40,20,.20), transparent 72%),
    linear-gradient(180deg, rgba(236,226,207,.02), rgba(0,0,0,.32));
}
[data-theme="midnight-ink"] .frame-img {
  background: #18120f;
  box-shadow: 0 0 0 1px rgba(236,226,207,.10);
}

The seed template-editorial-card.html ships these overrides — just switch data-theme and they apply automatically.

Magazine palette rules:

• Use --paper as the main background and --ink as primary type.
• Use --accent sparingly: section marker, page number, pull quote rule, or one highlighted phrase.
• --paper-2 can support photo wells, issue strips, or checklist bands.
• Light palettes (the first five): do not turn into beige-on-beige. Maintain real contrast.
• Midnight Ink: do not stack opaque cards or fills on the page. Dark Editorial relies on photo bleeds + warm gilt accent for hierarchy, not background blocks.

Swiss International Palettes

These are adapted from the Guizang PPT Swiss mode.

IKB Blue

Default for AI, technology, product updates, design, and engineering topics.

:root {
  --paper: #fafaf8;
  --ink: #0a0a0a;
  --grey-1: #f0f0ee;
  --grey-2: #d4d4d2;
  --grey-3: #737373;
  --accent: #002FA7;
  --accent-on: #ffffff;
}

Lemon Yellow

Use for young, consumer, active, retail, sporty, or playful information.

:root {
  --paper: #fafaf8;
  --ink: #0a0a0a;
  --grey-1: #f0f0ee;
  --grey-2: #d4d4d2;
  --grey-3: #737373;
  --accent: #FFD500;
  --accent-on: #0a0a0a;
}

Lemon Green

Use for ecology, future, emerging tech, health, and highlighter-like contemporary topics.

:root {
  --paper: #fafaf8;
  --ink: #0a0a0a;
  --grey-1: #f0f0ee;
  --grey-2: #d4d4d2;
  --grey-3: #737373;
  --accent: #C5E803;
  --accent-on: #0a0a0a;
}

Safety Orange

Use for industrial, warning, urgency, risk, decision points, and sharp corrections.

:root {
  --paper: #fafaf8;
  --ink: #0a0a0a;
  --grey-1: #f0f0ee;
  --grey-2: #d4d4d2;
  --grey-3: #737373;
  --accent: #FF6B35;
  --accent-on: #ffffff;
}

Swiss palette rules:

• Use exactly one --accent.
• Do not use gradients, shadows, glass, or mixed accent colors.
• If the accent is yellow or green, text on accent must use --accent-on: #0a0a0a.
• Prefer pure blocks, hairline rules, and grid rhythm.