@design-ai/cli 4.55.0

package/knowledge/platforms/react-native.md

@@ -0,0 +1,395 @@
+<!-- hand-written -->
+---
+title: React Native — platform-specific design notes
+applies_to: [react-native, mobile, ios, android, expo]
+version: 1.0.0
+last_updated: 2026-05
+stability: stable
+---
+
+# React Native platform notes
+
+The web ↔ React Native gap is wider than it looks. Specs and tokens that work on web don't always translate. This is the bridge.
+
+## Use this knowledge when
+
+- Component spec or skill is being applied to a React Native project.
+- Design tokens generated by `color-palette` skill need RN consumption.
+- Designer is hand-off-ing to an RN engineer.
+- Spec mentions `:hover`, `cursor`, `box-shadow` — those need translation.
+
+## Core differences
+
+| Concept | Web | React Native |
+| --- | --- | --- |
+| **Layout default** | `block` (flex none) | `flex` (column direction) |
+| **Box model** | content + padding + border + margin | flex-based; no margin collapse |
+| **Cursor** | yes (`cursor: pointer`) | no — feedback via `Pressable` press states |
+| **Hover** | yes (`:hover`) | **no** — no hover on touch. Use press states + long-press where applicable |
+| **Focus** | `:focus`, `:focus-visible` | partial — Pressable has `focused` state for keyboard nav (mostly desktop tvOS) |
+| **Scroll** | native to most elements | only `ScrollView`, `FlatList`, `SectionList` scroll |
+| **Z-index** | works everywhere | works on iOS, partial on Android (use `elevation`) |
+| **Shadows** | `box-shadow` | `shadowColor`, `shadowOffset`, `shadowOpacity`, `shadowRadius` (iOS) + `elevation` (Android) |
+| **Borders** | per-side | per-side, but border-radius corner-specific is iOS-only on Android <12 |
+| **Animations** | CSS transitions, `@keyframes` | `Animated`, `Reanimated`, or `LayoutAnimation` |
+| **Media queries** | `@media (min-width: ...)` | `Dimensions.get('window')` + Platform.OS, or `useWindowDimensions` |
+| **Text** | inherits styles | does **not** inherit — every `<Text>` starts fresh |
+| **Default text in non-Text** | renders | crashes (`<View>some string</View>` errors) |
+
+## Tokens — translation
+
+Code-side (CSS variables → RN constants):
+
+```css
+/* Web (CSS) */
+:root {
+  --color-primary-default: #0D9488;
+  --color-bg-default: #FFFFFF;
+  --space-md: 12px;
+  --radius-md: 10px;
+  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04);
+}
+```
+
+```ts
+// RN (constants)
+export const tokens = {
+  color: {
+    primary: { default: '#0D9488', hover: '#0F766E', active: '#115E59' },
+    bg: { default: '#FFFFFF', elevated: '#F8FAFC' },
+  },
+  space: { xs: 4, sm: 8, md: 12, base: 16, lg: 20 },  // numbers, NOT '12px'
+  radius: { sm: 6, md: 10, lg: 16, full: 9999 },
+  shadow: {
+    card: {
+      // iOS:
+      shadowColor: '#0F172A',
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.04,
+      shadowRadius: 2,
+      // Android:
+      elevation: 1,
+    },
+  },
+};
+```
+
+Notes:
+- **Numbers, not strings**: RN expects raw numbers for `padding`, `margin`, `borderRadius`. `12` not `'12px'`.
+- **Shadow is two systems**: iOS uses 4 props; Android uses `elevation` (a single number 0–24 mapping to Material elevation). Provide both in every shadow token.
+- **Color references**: RN doesn't support CSS variable references at runtime (without NativeWind/Tailwind). Use a JS theme object accessed via `useTheme()`.
+
+### NativeWind / Tailwind RN
+
+If using NativeWind, keep tokens as CSS-flavored variables in a `tailwind.config.js`. NativeWind translates them to platform-specific styles at compile.
+
+```js
+// tailwind.config.js (NativeWind compatible)
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        'primary-default': '#0D9488',
+        'bg-default': '#FFFFFF',
+      },
+      spacing: {
+        'md': '12px',  // NativeWind handles px → number
+      },
+    },
+  },
+};
+```
+
+NativeWind has gaps (no shadow utility on Android, no certain pseudo-classes). Document these in your project's `STYLES.md`.
+
+## Pressable — the universal interactive primitive
+
+There is **no `<Button>` component in core RN**. Use `Pressable` and design your own Button.
+
+```tsx
+<Pressable
+  style={({ pressed, hovered, focused }) => [
+    styles.button,
+    pressed && styles.buttonPressed,
+    hovered && styles.buttonHovered,    // tvOS / desktop only
+    focused && styles.buttonFocused,    // keyboard / tvOS
+  ]}
+  onPress={handlePress}
+  android_ripple={{ color: rippleColor }}  // Android-native ripple
+  accessibilityRole="button"
+  accessibilityLabel="Save changes"
+>
+  <Text style={styles.buttonText}>Save</Text>
+</Pressable>
+```
+
+Press feedback options:
+- **iOS-style**: scale to 0.97 on press, fade to 0.7 opacity. Smooth.
+- **Android-style**: ripple (use `android_ripple` prop). Native to platform.
+- **Cross-platform compromise**: opacity 0.7 on press (works both, doesn't feel native to either).
+
+Best practice: use platform-specific feedback.
+```ts
+import { Platform } from 'react-native';
+
+const pressStyle = Platform.select({
+  ios: { transform: [{ scale: 0.97 }], opacity: 0.85 },
+  android: {},  // ripple handles it
+});
+```
+
+## Touch targets
+
+| Standard | Minimum |
+| --- | --- |
+| iOS HIG | 44×44 pt |
+| Android Material | 48×48 dp |
+| **Practical default** | **44 (iOS) / 48 (Android)** |
+
+In RN, point/dp coordinates map cleanly. A `Pressable` with `style={{ width: 44, height: 44 }}` is correct on both.
+
+If the visual element is smaller (e.g., a 24x24 icon button), **extend the hit area** without growing the visual:
+
+```tsx
+<Pressable
+  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+  style={{ width: 24, height: 24 }}
+>
+  <Icon />
+</Pressable>
+```
+
+`hitSlop` extends the touch zone outside the visual. Native and free.
+
+## Safe area
+
+iOS notch + home indicator, Android system bars. Always wrap your screen content in `SafeAreaView` or use `useSafeAreaInsets`:
+
+```tsx
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+<SafeAreaView style={{ flex: 1, backgroundColor: tokens.color.bg.default }}>
+  <ScreenContent />
+</SafeAreaView>
+```
+
+For full-bleed designs (image hero), don't wrap in SafeAreaView; use `useSafeAreaInsets()` to read inset values and apply only where needed (e.g., `paddingTop: insets.top` on the back button).
+
+```tsx
+const insets = useSafeAreaInsets();
+<View style={{ paddingTop: insets.top, paddingBottom: insets.bottom }}>...</View>
+```
+
+## Keyboard handling
+
+Software keyboard appears → covers form. iOS uses `KeyboardAvoidingView` with `behavior="padding"`; Android uses `windowSoftInputMode="adjustResize"` in `AndroidManifest.xml`. Cross-platform pattern:
+
+```tsx
+import { KeyboardAvoidingView, Platform } from 'react-native';
+
+<KeyboardAvoidingView
+  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+  style={{ flex: 1 }}
+>
+  <ScrollView>
+    <Form />
+  </ScrollView>
+</KeyboardAvoidingView>
+```
+
+For sticky footer buttons (e.g., "Save" at bottom): use `keyboardVerticalOffset` to push the footer above the keyboard, not the whole screen.
+
+## Animations
+
+Three options:
+
+| Tool | Best for | Notes |
+| --- | --- | --- |
+| **`Animated` API** (built-in) | Simple animations | Imperative, verbose |
+| **`react-native-reanimated`** | Production-grade, runs on UI thread | **Default for new projects.** Best perf. |
+| **`LayoutAnimation`** | Layout transitions (e.g., list reorder) | Easy but limited control |
+
+Reanimated v3 example:
+
+```tsx
+import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
+
+function Card() {
+  const scale = useSharedValue(1);
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  return (
+    <Pressable
+      onPressIn={() => (scale.value = withSpring(0.97))}
+      onPressOut={() => (scale.value = withSpring(1))}
+    >
+      <Animated.View style={[styles.card, animatedStyle]}>...</Animated.View>
+    </Pressable>
+  );
+}
+```
+
+Reduced motion: `AccessibilityInfo.isReduceMotionEnabled()` — gate animations.
+
+## Typography
+
+```tsx
+// All text MUST be in <Text>
+<View>
+  <Text style={styles.heading}>Title</Text>
+  <Text style={styles.body}>Body content</Text>
+</View>
+
+// This CRASHES:
+<View>Plain text</View>  // ✗
+```
+
+Font loading (Pretendard for Korean):
+
+```tsx
+import * as Font from 'expo-font';
+import { useEffect, useState } from 'react';
+
+await Font.loadAsync({
+  'Pretendard-Regular': require('./assets/fonts/Pretendard-Regular.otf'),
+  'Pretendard-Medium': require('./assets/fonts/Pretendard-Medium.otf'),
+  'Pretendard-SemiBold': require('./assets/fonts/Pretendard-SemiBold.otf'),
+  'Pretendard-Bold': require('./assets/fonts/Pretendard-Bold.otf'),
+});
+```
+
+Reference fonts in styles by **string name** matching the loaded family:
+
+```tsx
+fontFamily: 'Pretendard-Regular',  // exact match
+```
+
+For variable fonts (Pretendard Variable), use:
+
+```tsx
+fontFamily: 'Pretendard-Variable',
+fontWeight: '500',  // axis instance
+```
+
+Variable font support varies — test on both platforms before committing.
+
+### iOS-only: SF Pro
+
+iOS system font is `San Francisco`. To use it explicitly: `fontFamily: undefined` or omit `fontFamily`. iOS picks SF Pro by weight/style.
+
+For Korean primary apps targeting iOS users: prefer Pretendard over SF Pro (Pretendard handles Hangul + Latin matched). For Western-coded apps: use system font.
+
+## Lists — `FlatList` over `ScrollView`
+
+For long lists (> 20 items), **never use ScrollView**. Use `FlatList`:
+
+```tsx
+<FlatList
+  data={transactions}
+  renderItem={({ item }) => <TransactionRow item={item} />}
+  keyExtractor={(item) => item.id}
+  ItemSeparatorComponent={() => <View style={styles.separator} />}
+  contentContainerStyle={{ padding: tokens.space.md }}
+  // Performance:
+  windowSize={11}
+  maxToRenderPerBatch={10}
+  removeClippedSubviews
+  // Pull to refresh:
+  refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}
+/>
+```
+
+For sectioned lists: `SectionList`.
+
+## Navigation
+
+There is **no built-in navigation in RN**. The de-facto standard is **`@react-navigation/native`** with stack/tab/drawer navigators.
+
+Token-aware setup:
+```tsx
+import { ThemeProvider } from '@react-navigation/native';
+
+const navigationTheme = {
+  dark: false,
+  colors: {
+    primary: tokens.color.primary.default,
+    background: tokens.color.bg.default,
+    card: tokens.color.bg.elevated,
+    text: tokens.color.text.primary,
+    border: tokens.color.border.default,
+    notification: tokens.color.error,
+  },
+};
+
+<NavigationContainer theme={navigationTheme}>
+  <Stack.Navigator>...</Stack.Navigator>
+</NavigationContainer>
+```
+
+For mobile patterns (bottom-tab-bar, etc.), see [knowledge/patterns/mobile-navigation.md](../patterns/mobile-navigation.md).
+
+## Platform-specific code
+
+```tsx
+import { Platform } from 'react-native';
+
+// Branching
+if (Platform.OS === 'ios') { ... }
+if (Platform.OS === 'android') { ... }
+
+// Selecting values
+const padding = Platform.select({
+  ios: 16,
+  android: 12,
+  default: 16,
+});
+
+// Version-specific
+if (Platform.OS === 'ios' && parseFloat(Platform.Version) >= 17) { ... }
+```
+
+For files that diverge significantly: name files `MyComponent.ios.tsx` and `MyComponent.android.tsx` — Metro bundler picks per platform automatically.
+
+## Common pitfalls (designers should know)
+
+- **Borders inside flex children render with weird spacing**: setting `borderWidth: 1` adds visual height that flex doesn't account for. Plan layouts assuming this.
+- **Text doesn't word-wrap correctly with absolute width**: use `flex: 1` on parent, `flexShrink: 1` on text, or `numberOfLines` with `ellipsizeMode`.
+- **Image performance**: large images crash on low-end Android. Use `react-native-fast-image` or properly sized assets (don't ship 4K thumbnails).
+- **Modal vs Dialog**: RN's built-in `<Modal>` covers full screen by default. For card-style dialogs, use a library like `react-native-modal` or `react-native-bottom-sheet`.
+- **Font scaling (accessibility)**: iOS/Android both let users scale system text. By default, RN respects this (`<Text>` scales). For fixed-size UI text (like a logo), set `allowFontScaling={false}` — but use sparingly.
+- **iOS focus ring on text inputs**: there isn't one by default. Build it via `onFocus`/`onBlur` state + border color change.
+- **Android `elevation` doesn't show shadow on transparent backgrounds**: set a `backgroundColor` even if it matches the parent.
+- **Status bar**: customize via `<StatusBar>` from RN — light or dark content based on the screen's background.
+
+## Tokens that don't translate cleanly
+
+| Token type | Web | RN status |
+| --- | --- | --- |
+| Color | trivial | trivial |
+| Spacing | trivial (px → number) | trivial |
+| Radius | trivial | trivial; per-corner partial on Android <12 |
+| Border | mostly | mostly; dashed/dotted spotty on Android |
+| Shadow | one prop | **5 props (4 iOS + elevation)** |
+| Motion duration | `transition: 200ms` | requires Animated/Reanimated config |
+| Motion easing | `cubic-bezier(...)` | use `Easing.bezier(0, 0, 0.2, 1)` from `react-native` |
+| Z-index | works | iOS-only above Android <11 |
+| Transition | CSS | requires animation library |
+| Hover | `:hover` | **no equivalent** — design without it |
+| Cursor | `cursor: pointer` | no equivalent — feedback via Pressable |
+
+When porting a web design system to RN: budget time for re-authoring shadows and motion specifically.
+
+## Testing
+
+- **Detox** for E2E (industry standard for RN).
+- **Maestro** for simpler, declarative E2E (newer, easier setup).
+- **React Native Testing Library** for component tests.
+
+## Cross-reference
+
+- [knowledge/i18n/korean-typography.md](../i18n/korean-typography.md) — Pretendard loading on RN
+- [knowledge/patterns/mobile-navigation.md](../patterns/mobile-navigation.md) — bottom-tab-bar, top-app-bar
+- [knowledge/motion/principles.md](../motion/principles.md) — durations and easings (translate to Reanimated)
+- [knowledge/a11y/keyboard-and-focus.md](../a11y/keyboard-and-focus.md) — touch targets, focus management

package/knowledge/print/brochures-and-flyers.md

@@ -0,0 +1,276 @@
+<!-- hand-written -->
+---
+title: Brochures, leaflets, and flyers
+applies_to: [print, brochure, flyer, marketing]
+version: 1.0.0
+last_updated: 2026-05
+stability: stable
+---
+
+# Brochures and flyers
+
+Multi-page or folded marketing collateral. Read [`print-fundamentals.md`](print-fundamentals.md) first.
+
+## Categories
+
+| Type | Pages / folds | Use |
+| --- | --- | --- |
+| **Flyer / 전단지** | 1 page, single-sided or double | Quick marketing message, event promo |
+| **Postcard** | 1 page, double-sided | Direct mail, save-the-date |
+| **Bi-fold** | 1 sheet folded once → 4 panels | Compact brochure, menu |
+| **Tri-fold** | 1 sheet folded twice → 6 panels | Most common brochure |
+| **Z-fold** | 1 sheet zigzag-folded → 6 panels | Step-by-step content |
+| **Gate-fold** | Outer panels fold inward → 4-6 panels | Premium brand reveal |
+| **Booklet / 소책자** | Multi-sheet stitched | 8+ pages, catalog, magazine |
+| **Saddle-stitched** | Folded + center-stapled | Magazines, programs |
+
+Pick by content volume + budget. Tri-fold is the workhorse.
+
+## Flyer (1-page)
+
+### Sizes
+
+- **A5** (148 × 210mm) — most common Korean marketing flyer.
+- **A4** (210 × 297mm) — when more content needed.
+- **DL** (99 × 210mm) — fits in letter envelope, slim.
+- **A6** (105 × 148mm) — postcard size, mailable.
+
+### Layout
+
+```
+┌──────────────────────────────────┐
+│        [HEADLINE]                │   ← biggest, top
+│                                  │
+│        [Visual / illustration]   │   ← supports headline
+│                                  │
+│   Sub-message                    │
+│   - Bullet 1                     │
+│   - Bullet 2                     │
+│   - Bullet 3                     │
+│                                  │
+│   ── Footer ──                   │
+│   [Logo] [CTA] [Contact]         │
+└──────────────────────────────────┘
+```
+
+The headline does 80% of the work. If a passerby reads only the headline, they should know:
+1. What's being offered.
+2. Why they should care.
+3. Where to act.
+
+### One message rule
+
+A flyer is read in 3-5 seconds. **One message. One CTA.** Don't try to say five things.
+
+| ✗ Bad | ✓ Good |
+| --- | --- |
+| "여러 서비스 소개 + 특가 + 신규 가입 + 멤버십" | "신규 가입 시 30% 할인" |
+
+### Korean flyer conventions
+
+- **Big, bold headline** — Korean reads well in heavy weights (Pretendard 800-900).
+- **Clear price / discount** — Korean marketing leans on price clarity.
+- **QR code or 카카오톡 채널 ID** — primary call to action for digital handoff.
+- **Date + location prominent** for event flyers.
+
+## Bi-fold brochure
+
+1 sheet of paper folded once = 4 panels (front cover, inside left, inside right, back cover).
+
+```
+Outer side (when closed):
+┌─────────┬─────────┐
+│         │         │
+│  Back   │  Front  │
+│ cover   │  cover  │
+│         │         │
+└─────────┴─────────┘
+
+Inside (when opened):
+┌─────────┬─────────┐
+│         │         │
+│  Inside │  Inside │
+│  left   │  right  │
+│         │         │
+└─────────┴─────────┘
+```
+
+| Panel | Use |
+| --- | --- |
+| Front cover | Headline + visual; one message |
+| Inside left | Story / feature 1 |
+| Inside right | Story / feature 2 |
+| Back cover | Contact, CTA, smaller closing message |
+
+## Tri-fold brochure (the workhorse)
+
+1 sheet folded twice = 6 panels. Most common marketing brochure.
+
+### Layout (A4 tri-fold, 99mm × 210mm panels)
+
+```
+Outer side (closed):                      Inside (opened flat):
+┌──────┬──────┬──────┐                    ┌──────┬──────┬──────┐
+│      │      │      │                    │      │      │      │
+│ Inner│ Back │ Front│                    │ Panel│ Panel│ Panel│
+│ flap │ cover│ cover│                    │  4   │  5   │  6   │
+│  3   │  2   │  1   │                    │      │      │      │
+└──────┴──────┴──────┘                    └──────┴──────┴──────┘
+```
+
+### Reading order matters
+
+Westerners + Koreans both fold open and read left → right. So:
+- **Panel 1 (front cover)**: hook, brand identity.
+- **Panel 4 (first inside panel after opening)**: opening message / "what we do".
+- **Panel 5 (middle inside)**: features / details.
+- **Panel 6 (right inside)**: deeper feature / second message.
+- **Panel 3 (inner flap, visible when partially opening)**: bridge / CTA / preview.
+- **Panel 2 (back cover)**: contact, address, closing CTA.
+
+Each panel should make sense **as it's revealed**, not require the user to re-fold to interpret.
+
+### Inner flap consideration
+
+Panel 3 is **slightly narrower** than the others (it folds inside, ~2-3mm shorter). Don't put critical content close to the inner edge of panel 3 — it'll be obscured by the fold.
+
+### Tri-fold mistakes
+
+- **Treating as 6 separate pages** instead of a flowing reveal.
+- **Inner flap content too close to edge** — gets folded under.
+- **Front cover with no hook** — flyer ignored.
+- **Back cover with no contact** — wasted space.
+- **Gutter (fold lines) cutting through visuals** — design across panels OR within them, not awkwardly cut.
+
+## Z-fold
+
+Zig-zag folded — accordion-style. 6 panels read sequentially as user pulls open:
+
+```
+Panel 1 → Panel 2 → Panel 3 → Panel 4 → Panel 5 → Panel 6
+[hook]    [problem] [step 1]  [step 2]  [result]  [CTA]
+```
+
+Use for: step-by-step processes, how-to guides, journey storytelling.
+
+## Booklet / saddle-stitched magazine
+
+Multi-page (8+) folded + stapled at the spine.
+
+### Page count must be a multiple of 4
+
+Saddle-stitched magazines must have page counts in multiples of 4 (each sheet of paper folds into 4 pages). Common: 8, 12, 16, 20, 24, 32 pages.
+
+If you have content for 13 pages, you ship 12 (cut content) or 16 (add 3 blank/filler) — not 13.
+
+### Imposition
+
+The print pages don't print in reading order. Page 1 prints next to page 16 (last page), page 2 next to page 15, etc. Most printers handle imposition automatically when given a print-order PDF, but for complex layouts: ask the printer.
+
+### Spread design
+
+A booklet is read as **spreads** (two facing pages). Design spreads as a unit:
+
+```
+┌──────┬──────┐
+│      │      │
+│ Page │ Page │
+│  4   │  5   │
+│      │      │
+└──────┴──────┘
+```
+
+Page 4 (verso, left) and page 5 (recto, right) form a unified visual. Don't design pages as isolated rectangles.
+
+### Gutter
+
+The center fold has a **gutter** (5-10mm where the fold compresses content). Don't put critical content (text, faces) in the gutter — it gets eaten.
+
+For perfect-bound (glued spine, like books): gutter is wider (10-15mm) because pages don't lay flat.
+
+## Margins (universal print)
+
+For A4 brochure pages:
+- **Outer margin**: 12-20mm
+- **Inner / gutter margin**: 15-25mm (always larger; account for fold/bind)
+- **Top margin**: 15-25mm
+- **Bottom margin**: 15-25mm
+
+Less margin = denser, more cramped. More margin = airy, premium-feeling.
+
+## Color in brochures
+
+- **4-color (CMYK)** is standard.
+- **Spot color (Pantone) + CMYK** for brand-critical accents.
+- Color photography fits naturally; CMYK loses some vibrance vs RGB but it's expected.
+
+For Korean glossy lifestyle brochures: high-saturation imagery, warm neutrals, brand-color accents.
+For B2B / financial: more restrained, off-white background, brand-color CTAs only.
+
+## Photography vs illustration
+
+| Photography | Illustration |
+| --- | --- |
+| Authentic feel | Branded feel |
+| Date-sensitive | Timeless |
+| Higher production cost | Predictable cost |
+| Limited control | Total control |
+
+Use photography for:
+- Real product photos (for product brochures).
+- Authentic team / story (for company brochures).
+
+Use illustration for:
+- Abstract concepts (process, value).
+- Brand consistency across many pieces.
+- Avoiding stock-photo-cliché.
+
+See [`knowledge/illustration/illustration-systems.md`](../illustration/illustration-systems.md).
+
+## Typography in brochures
+
+- **Headlines**: 24-72pt depending on size + drama.
+- **Sub-headlines**: 14-18pt.
+- **Body**: 9-11pt for brochures (slightly smaller than letterhead because reading distance is closer when held).
+- **Captions**: 7-9pt.
+- **Footer**: 6-8pt.
+
+Korean: Pretendard 600-700 weight for headlines, 400-500 for body. Don't go below 9pt for body.
+
+For mixed Korean + English in body: Pretendard handles both at the same size, leading aside.
+
+## Production tips
+
+- **Order quantities** for flyers / brochures: 500-1000 minimum at most printers.
+- **Cost per unit drops** at 1000+ then again at 5000+.
+- **Storage** — printed brochures take physical space. Order what you'll distribute in 6-12 months; reorder as needed.
+- **Revisions** — every reprint is full cost. Lock content + design before printing.
+- **Versioning** — for multiple language versions: print as small batches, not all at once. Translation often has bugs that show only after first print.
+
+## Sustainability considerations
+
+- **Paper choice**: FSC-certified paper for environmentally-conscious brands.
+- **Recycled content**: 30%+ recycled paper available in most weights.
+- **Soy-based ink** vs petroleum ink — lower environmental impact.
+- **Local printing** — reduces shipping carbon.
+
+For 2024+ Korean B2B: sustainability messaging is increasing. FSC certification on the brochure is increasingly expected by ESG-conscious clients.
+
+## Don't
+
+- Don't pack a brochure with content. White space sells.
+- Don't ignore the cover. The cover is what makes someone open it.
+- Don't design a tri-fold like 6 isolated pages. It's one continuous experience.
+- Don't put critical content in the gutter / inner flap fold.
+- Don't print before content is final. Reprints are expensive.
+- Don't use 4 fonts in one brochure. 1-2 max.
+- Don't ship without a CTA. What do you want the reader to do next?
+
+## Cross-reference
+
+- [`knowledge/print/print-fundamentals.md`](print-fundamentals.md) — CMYK, bleed, DPI
+- [`knowledge/print/stationery.md`](stationery.md) — business cards
+- [`knowledge/print/signage-and-posters.md`](signage-and-posters.md) — large format
+- [`knowledge/print/korean-print-conventions.md`](korean-print-conventions.md) — KR conventions
+- [`knowledge/illustration/illustration-systems.md`](../illustration/illustration-systems.md) — illustration use
+- [`knowledge/typography/font-pairings.md`](../typography/font-pairings.md) — Pretendard pairings