feat：移除了弹窗，服务器添加sls

.claude/skills/oiloil-ui-ux-guide/references/style-families/brand-driven.md

@@ -0,0 +1,71 @@
+# Style Family: brand-driven
+
+**Signature**: Tokens derived from existing brand assets. The project's brand is the source, not a style family.
+**Reference products**: Custom — anything where the brand book exists and dictates visual choices.
+**Best for**: established companies with brand guidelines, agency work, B2B with strict CI/CD (corporate identity), products that ship across brand-owned surfaces (web + email + print).
+
+## How this family is different
+
+The other 7 families ship with token defaults. `brand-driven` has none — by definition, the brand supplies them. This file is a *framework* for extracting tokens from brand assets, not a token set.
+
+## Inputs you need from the user
+
+In Phase 1, ask explicitly:
+
+1. **Logo** — vector file (SVG / AI / Figma) preferred, otherwise highest-res PNG.
+2. **Brand color(s)** — hex codes for primary, optional secondary, semantic colors if defined.
+3. **Brand fonts** — font names + weights + license info (Adobe Fonts, self-hosted, Google Fonts). If proprietary, ask about web fallback.
+4. **Brand book / style guide** — PDF or web link if one exists.
+5. **Voice / tone notes** — affects copy, but also informs density/motion choices.
+
+If the user doesn't have all of these → either
+- (a) start from what they have and treat the rest as open in Phase 2 (use neutral defaults), or
+- (b) flag that the project might *not* be brand-driven and re-run Phase 2 with a real style family.
+
+## Token derivation rules
+
+When you do have brand assets:
+
+### Color
+- Primary = brand primary, exactly as specified.
+- Hover / active = derived using OKLCH or HSL lightness shift (typically -8% to -12% lightness for hover, -16% to -20% for active).
+- Subtle (background tint) = primary at 5–10% alpha or +90% lightness.
+- Neutrals = tinted toward the brand primary's hue (not pure gray) unless the brand book specifies.
+- Semantic (success/warning/error/info) = the brand book's versions if defined; otherwise stay close to web defaults but tinted toward the brand temperature.
+
+### Typography
+- Headings = brand display font.
+- Body = brand body font, or a free fallback if licensing prevents web use. Always provide system-font fallback stack.
+- Mono = the brand's mono if specified, otherwise a neutral choice that doesn't fight the brand.
+
+### Spacing / radius / shadow
+- The brand book usually does *not* specify these for the web. Pick defaults that match the brand's emotional register:
+  - Sharp brand → sharp radius (2–4px), flat shadow.
+  - Friendly brand → generous radius (12–16px), soft shadow.
+  - Premium brand → 0–2px radius, no shadow, lots of whitespace.
+
+### Motion
+- If brand book mentions motion principles, follow them.
+- If not, choose motion vocabulary based on brand tone — premium = slow, playful = bouncy, technical = snappy.
+
+## Cross-surface consistency
+
+Brand-driven projects often appear on:
+- Web app
+- Marketing site
+- Email
+- Print collateral
+- Mobile app
+
+When generating `design-spec.md` for brand-driven, include a **cross-surface notes** section that flags what should stay consistent and what should adapt (e.g. body font might be system on email, web on app).
+
+## Anti-patterns
+
+- Treating the brand color as decoration rather than the primary signal.
+- Auto-generating a 9-tier color scale without checking if the brand has its own scale.
+- Replacing the brand fonts with "what looks more modern" on the web. The brand's font is the brand's voice; if you don't like it, talk to the user, don't override.
+- Ignoring CJK / multi-script considerations when the brand operates internationally.
+
+## Notes
+
+About 30–40% of real-world projects are brand-driven and the consultant's job is largely to *extract and codify* what already exists, not to invent. If the user keeps saying "we already use X for that", the project is probably brand-driven and you should switch families.

.claude/skills/oiloil-ui-ux-guide/references/style-families/brutal.md

@@ -0,0 +1,56 @@
+# Style Family: brutal
+
+**Signature**: Raw, monospace, high-contrast borders, deliberately rough, system-font fallbacks visible.
+**Reference products**: Many indie maker landing pages, Vercel templates (brutalist variants), Bauhaus-revival sites, Cobalt.tools.
+**Best for**: indie projects, designer portfolios, statement marketing, hacker culture products.
+
+## Token defaults
+
+### Color
+- **Primary**: high-saturation block colors — pure red, pure yellow, pure blue, pure black.
+- **Background**: unapologetic — pure white `#ffffff` or pure black `#000000`. The "no pure black" rule from `modern-minimal` does not apply here; pure black is the point.
+- **Borders**: thick (2–4px), pure black, on every container. Borders carry the visual weight that elsewhere is carried by shadows.
+
+### Typography
+- **Heading**: monospace, system font, or quirky display — JetBrains Mono, Space Mono, IBM Plex Mono, Departure Mono, Times New Roman (deliberate retro).
+- **Body**: monospace or system serif. Geometric sans-serif is *out of family*.
+- **Weights**: extreme contrast — 400 vs 800, no in-between.
+
+### Radius
+- **0 px**. Sharp corners always. This is the family's most non-negotiable trait.
+
+### Spacing
+- 8px base. Scale: 8 / 16 / 24 / 40 / 64.
+- Spacing is uneven on purpose — asymmetric layouts are encouraged.
+
+### Shadow
+- **Hard shadows only**. `box-shadow: 4px 4px 0 0 #000;` (no blur). No soft elevation.
+
+### Motion
+- Snappy or none. No easing curves. Linear or step transitions. Hover states can be aggressive (color invert, hard offset).
+
+## Anti-patterns *within this family*
+
+- Soft shadows.
+- Rounded corners.
+- Pastels.
+- "Design system polish" — uniform spacing, perfect alignment, careful hierarchy. Brutal embraces friction.
+- Fade animations.
+- Lucide / Phosphor icons. Use ASCII characters, emoji as ironic decoration, or system Unicode glyphs.
+
+## Typical surfaces
+
+This family does well on:
+- Single-page indie landing
+- Developer tool marketing
+- Manifesto / values pages
+- Designer portfolios
+
+This family does poorly on:
+- Anything where users spend more than ~10 minutes per session — the friction wears
+- Enterprise / regulated industries
+- Consumer apps with broad demographic reach
+
+## Notes
+
+Brutal is a statement, not a default. If the user picked it without realizing what it implies (no rounded corners, no soft shadows, no neat alignment), pause and double-check before generating tokens.

.claude/skills/oiloil-ui-ux-guide/references/style-families/editorial.md

@@ -0,0 +1,58 @@
+# Style Family: editorial
+
+**Signature**: Long-form respect, serif headers, generous measure, hierarchy through scale.
+**Reference products**: Medium, Substack, NYT, The Verge, Stratechery.
+**Best for**: blogs, content platforms, documentation that's read end-to-end, knowledge bases, news.
+
+## Token defaults
+
+### Color
+- **Primary**: deep ink, restrained accent (often a deep red, navy, or forest green).
+- **Background**: warm off-white or cream, not pure white. Common range `#fafaf7` to `#f5f1ea`.
+- **Text**: high-contrast near-black with slight warm cast.
+- **Avoid in this family**: bright saturated brand colors competing with text; cool tech blue.
+
+### Typography
+- **Heading**: serif — Source Serif, Lora, Tiempos, GT Sectra, Newsreader, Playfair (display only).
+- **Body**: serif preferred for body too (the whole point) — Source Serif, Lora, Spectral, IBM Plex Serif. Sans-serif body is acceptable but loses the family's voice.
+- **Mono**: only if code samples appear.
+- **Measure**: 60–75 characters per line for body. This is a hard rule in this family.
+
+### Radius
+- Minimal. **0 / 2 / 4 px**. Curves dilute the editorial feel.
+
+### Spacing
+- 4px base, but the *visible* spacing is generous: 24 / 32 / 48 / 64.
+- Density: spacious. Compact does not belong here.
+
+### Shadow
+- Flat. Borders if needed. No elevation.
+
+### Motion
+- Minimal. Fade only. Scrolling does the work.
+
+## Anti-patterns *within this family*
+
+- Sans-serif headings that scream "SaaS landing page".
+- Cards everywhere. The body of an article is *not* a card.
+- Saturated CTA buttons in the middle of body copy. Use inline text links; reserve buttons for end-of-article actions.
+- Sidebars full of widgets. Editorial respects the reader's attention.
+- Auto-playing video / hero animations.
+- Narrow body measure (under 50 chars) or absurdly wide (over 90 chars).
+
+## Typical surfaces
+
+This family does well on:
+- Article pages
+- Author archives
+- Documentation
+- About / values pages
+
+This family does poorly on:
+- Dashboards (no place for serif body in dense data)
+- Forms (serifs at small input sizes look off)
+- Mobile-first apps (the family relies on desktop measure)
+
+## Notes
+
+Editorial done well *almost feels like nothing* — the design recedes and lets the writing carry. If you find yourself adding decoration, you've left the family.

.claude/skills/oiloil-ui-ux-guide/references/style-families/index.md

@@ -0,0 +1,39 @@
+# Style Family Catalog
+
+A "style family" is a coherent bundle of font / color / spacing / radius / shadow / motion choices that work together emotionally and functionally. Style families are **starting points** — the user can override anything inside a chosen family.
+
+**These families are project-chosen, never default-imposed.** If you start a `design` session and impose `modern-minimal` without the user asking, you are doing it wrong.
+
+## How to use this catalog
+
+1. In Phase 1 of the interview, listen to the user's references and constraints.
+2. In Phase 2, present 2–4 candidate families based on those signals.
+3. Once the user picks one, load `<family>.md` for the specifics — that file becomes the starting token set for Phase 3.
+4. Each family file contains its own "anti-patterns to avoid" — those are scoped to that family, not global UX rules. Do not quote one family's restrictions when a different family was chosen.
+
+## Catalog
+
+| Family | One-line signature | Reference products | Best for |
+|---|---|---|---|
+| [`modern-minimal`](./modern-minimal.md) | Spacious, typography-led, restrained color, sharp grid | Linear, Vercel, Notion | Dev tools, SaaS, startup landing |
+| [`editorial`](./editorial.md) | Long-form respect, serif headers, generous measure | Medium, Substack, NYT | Blogs, content platforms, knowledge bases |
+| [`brutal`](./brutal.md) | Raw, monospace, high-contrast borders, deliberately rough | Vercel templates, brutalist landing pages | Indie projects, designer tools, statement marketing |
+| [`playful`](./playful.md) | Rounded, saturated, bouncy motion, illustrative | Duolingo, MailChimp, early Notion | Education, consumer apps, onboarding-heavy |
+| [`premium-luxury`](./premium-luxury.md) | Restrained palette, elegant serifs, generous whitespace, subtle motion | Aesop, Hermès, Apple Music | Hospitality, fashion, high-ticket SaaS |
+| [`tech-cyberpunk`](./tech-cyberpunk.md) | Dark-first, monospace, neon accents, high info density | GitHub dark, Vercel docs dark, terminal aesthetics | Dev infra, security, AI tooling, data dashboards |
+| [`warm-content`](./warm-content.md) | Warm neutrals, comfortable reading, soft surfaces | Are.na, Notion light, Craft | Personal sites, journals, community tools |
+| [`brand-driven`](./brand-driven.md) | All tokens derived from existing brand assets | Custom; the project is the source | Established brands, agency work, B2B with brand guidelines |
+
+## When to combine
+
+Users often want hybrids. Common pairs:
+
+- `modern-minimal` color + `editorial` typography → corporate blog
+- `tech-cyberpunk` colors + `modern-minimal` layout → developer dashboard
+- `premium-luxury` typography + `warm-content` surfaces → boutique e-commerce
+
+Honor the combination. Note it explicitly in `design-spec.md` so future contributors know which family supplies which dimension.
+
+## When none fits
+
+If the user's references span 3+ unrelated families and they can't pick one, the project is probably **brand-driven** by default — start from their brand assets (logo, brand color) and let everything else follow. Use `brand-driven.md` as the framework.

.claude/skills/oiloil-ui-ux-guide/references/style-families/modern-minimal.md

@@ -0,0 +1,58 @@
+# Style Family: modern-minimal
+
+**Signature**: Spacious, typography-led, restrained color, sharp grid.
+**Reference products**: Linear, Vercel, Notion, Stripe, Plaid.
+**Best for**: dev tools, SaaS dashboards, startup landing pages, internal enterprise.
+
+## Token defaults
+
+### Color
+- **Primary**: a single saturated accent (often blue / teal / violet). Used sparingly.
+- **Neutrals**: tinted toward the brand color (e.g. brand `#0066cc` → text `#1a2a3a` rather than `#333`). True grays look sterile in this family.
+- **Avoid in this family**: pure black `#000`, pure white `#fff` for large surfaces, generic indigo `#6366f1`, purple-to-blue gradients (Stripe-cliché unless deliberate).
+
+### Typography
+- **Heading**: geometric sans — Plus Jakarta Sans, Geist, Manrope, Outfit, DM Sans, Inter (Inter is fine here, the "ban" is a taste preference, not a UX rule).
+- **Body**: same family or a paired humanist sans.
+- **Mono**: JetBrains Mono, Geist Mono, IBM Plex Mono.
+
+### Radius
+- Sharp side: **4 / 8 / 12 px**. Pills only on chips/badges, not on primary buttons.
+
+### Spacing
+- 4px base, scale 4 / 8 / 12 / 16 / 24 / 32 / 48.
+- Density: balanced or spacious. Compact is uncommon in this family.
+
+### Shadow
+- Flat by default. Subtle (1–2px tinted shadow) for elevated surfaces.
+
+### Motion
+- Minimal. Fade and small translate+fade for state changes. Scale+fade only for overlays. **Avoid bounce.**
+
+## Anti-patterns *within this family*
+
+These are the things that pull a project out of `modern-minimal`. If the user explicitly wants them, that's fine — but they're stylistically inconsistent with the family.
+
+- All content wrapped in cards with borders + shadow. Use whitespace + typography for hierarchy instead.
+- Card-in-card nesting.
+- 3-column equal-grid landing pages with stock-photo headers.
+- Decorative gradients on every section. Limit to one per page.
+- Emoji as section icons. Use Lucide / Phosphor / Heroicons.
+- Pure-grey-on-tinted-background body text. Add brand tint to neutrals.
+
+## Typical surfaces
+
+This family does well on:
+- Dashboard with sidebar nav + content
+- Settings forms
+- API documentation
+- Marketing landing for B2B SaaS
+
+This family does poorly on:
+- Children / education products (too cold)
+- Long-form reading (sans body fights long passages — consider `editorial` for blog routes)
+- Brand-driven luxury (too utilitarian)
+
+## Notes
+
+The "Modern Minimal" defaults the original SKILL.md treated as universal *belong here* and only here. If the project picked a different family, those defaults do not apply.

.claude/skills/oiloil-ui-ux-guide/references/style-families/playful.md

@@ -0,0 +1,62 @@
+# Style Family: playful
+
+**Signature**: Rounded, saturated, bouncy motion, illustrative, friendly.
+**Reference products**: Duolingo, MailChimp, Slack early, Notion early, Headspace.
+**Best for**: education, consumer apps with onboarding, kids products, gamification, habit/lifestyle apps.
+
+## Token defaults
+
+### Color
+- **Primary**: saturated and friendly — coral, teal, sunny yellow, grass green. Avoid muted enterprise blues.
+- **Palette**: 2–3 accent colors are encouraged (the "single primary" rule from other families is relaxed).
+- **Background**: warm off-white or soft tinted background; pure white feels sterile here.
+- **Avoid in this family**: cool grays, navy/charcoal, monochrome palettes.
+
+### Typography
+- **Heading**: friendly humanist sans or rounded sans — Nunito, Quicksand, Poppins, Fraunces (soft serif), Inter Display (rounded variant).
+- **Body**: rounded humanist sans — Nunito, DM Sans, Manrope, Open Sans (yes, even this one).
+- **Weight**: medium-to-bold for headings (600+). Light weights look fragile.
+
+### Radius
+- **Generous**: 12 / 16 / 24 px. Pills and full-rounded buttons are common and *correct* here.
+
+### Spacing
+- 4px base, scale 4 / 8 / 16 / 24 / 32 / 48.
+- Density: balanced. Generous touch targets (mobile-friendly).
+
+### Shadow
+- **Soft and tinted**: shadows often inherit a hint of the surface or primary color, not pure black.
+- Multiple elevation tiers welcome.
+
+### Motion
+- **Bounce is encouraged.** Spring physics, elastic easing, micro-celebrations on success.
+- Lottie illustrations are in family.
+- Empty states and 404 pages are opportunities for character, not minimalism.
+
+## Anti-patterns *within this family*
+
+- Sharp corners (0–4px) on primary surfaces.
+- Pure black or pure gray text on white. Use a slightly warm dark color.
+- Geometric sans like Geist or Inter as body — too cold.
+- Flat illustrations with no character.
+- Skipping the empty state — playful family thrives on personality in edge cases.
+- Rigid grid alignment with no asymmetry.
+
+## Typical surfaces
+
+This family does well on:
+- Onboarding flows
+- Consumer mobile apps
+- Education products
+- Streak / progress / gamification surfaces
+- Marketing for B2C
+
+This family does poorly on:
+- B2B dashboards used 8 hours a day (the personality wears)
+- High-stakes interfaces (medical, financial trades)
+- Enterprise procurement processes
+- Long-form reading (rounded body fonts fatigue)
+
+## Notes
+
+There's a cliff between "friendly" and "infantilizing". For adult-targeted products in serious domains (finance, healthcare), `playful` is usually the wrong family — but `warm-content` may give the same warmth without the gamification feel.

.claude/skills/oiloil-ui-ux-guide/references/style-families/premium-luxury.md

@@ -0,0 +1,61 @@
+# Style Family: premium-luxury
+
+**Signature**: Restrained palette, elegant serifs, generous whitespace, subtle motion, products treated like objects.
+**Reference products**: Aesop, Hermès, Apple Music, Apple Newsroom, Linear (when in marketing mode), Loro Piana.
+**Best for**: hospitality, fashion / beauty, high-ticket SaaS marketing, art galleries, boutique e-commerce.
+
+## Token defaults
+
+### Color
+- **Primary**: muted, often *not* a vivid color — deep brown, ink black, forest, oxblood, brass.
+- **Background**: warm off-white, cream, sand, or pure white treated with intent.
+- **Accents**: minimal. A single underline color, a metallic touch.
+- **Avoid in this family**: saturated brand blues, neon accents, gradient backgrounds.
+
+### Typography
+- **Heading**: elegant serif or contrasted display — GT Sectra, Tiempos, Newsreader, Söhne Breit, Canela, EB Garamond.
+- **Body**: serif or refined sans — Söhne, Söhne Lebenslauf, Aktiv Grotesk, Inter at low weights, Tiempos Text.
+- **Sizing**: large display headlines (5–8rem on landing). Body stays at 16–18px.
+- **Letterspacing**: slight negative tracking on display headings (-0.02 to -0.04em).
+
+### Radius
+- **0 / 2 px**. Curves cheapen this family. Buttons rectangular. Cards rectangular.
+
+### Spacing
+- 8px base, scale 8 / 16 / 24 / 40 / 64 / 96.
+- Density: very spacious. Whitespace is the signal of value.
+
+### Shadow
+- None or extremely subtle (1px hairline borders preferred over shadow).
+
+### Motion
+- **Slow and intentional**. 400–800ms easings. Fade with slight upward movement on scroll.
+- No bounces. No celebrations. Confident and quiet.
+
+## Anti-patterns *within this family*
+
+- Rounded buttons / pills.
+- Saturated CTA color competing with content.
+- "Get started for free" CTA copy. Premium copy is more reserved — "Discover", "Begin", or just the product name.
+- Multi-column dense layouts. One column, one focus.
+- Stock photography. Either custom or none.
+- Trustpilot badges, social proof bars, "as seen in" logo strips. (These belong in other families.)
+- Sale stickers, urgency timers, comparison tables.
+
+## Typical surfaces
+
+This family does well on:
+- Brand homepages
+- Product detail pages (single SKU treatment)
+- About / heritage / craft pages
+- Editorial-style product stories
+
+This family does poorly on:
+- Functional dashboards (the spacious style wastes screen)
+- Settings panels (reads as cold and unhelpful)
+- Forms with many fields (whitespace amplifies tedium)
+- Mobile checkout (vertical sprawl)
+
+## Notes
+
+Premium is largely about *what you remove*. If the page feels busy, it's wrong. The most common failure mode is treating premium as "modern-minimal but with a serif" — the spacing, sizing, and motion are all different.

.claude/skills/oiloil-ui-ux-guide/references/style-families/tech-cyberpunk.md

@@ -0,0 +1,64 @@
+# Style Family: tech-cyberpunk
+
+**Signature**: Dark-first, monospace, neon accents, high info density, terminal/IDE aesthetics.
+**Reference products**: GitHub dark, Vercel docs dark, Cursor, Warp, Raycast, terminal apps, Cyberpunk 2077 menus.
+**Best for**: developer infrastructure, security tools, AI tooling, observability dashboards, command-palette apps.
+
+## Token defaults
+
+### Color
+- **Background**: dark by default — `#0a0a0b` to `#18181b` range. Pure black `#000` is acceptable.
+- **Primary accent**: neon-leaning — electric blue `#3b82f6`, lime `#84cc16`, magenta `#d946ef`, cyan `#06b6d4`.
+- **Text**: off-white with slight cool cast (`#e4e4e7`), not pure white.
+- **Borders**: low-opacity white (`rgba(255,255,255,0.08–0.12)`) — barely visible structural lines.
+- **Light mode**: optional and secondary. Many products in this family don't ship light mode; if they do, it's clearly not the headline experience.
+
+### Typography
+- **Heading**: geometric sans, mono, or hybrid — Inter, Geist, Space Grotesk, JetBrains Mono.
+- **Body**: same as heading or paired sans.
+- **Mono**: critical and prominent — JetBrains Mono, Geist Mono, Berkeley Mono, IBM Plex Mono. Used for code, IDs, command shortcuts, status text.
+- **Mono in chrome**: keyboard hints `⌘K`, status badges, version numbers all live in mono.
+
+### Radius
+- **2 / 4 / 6 px**. Sharp but not aggressively so. 8px+ feels too soft for the family.
+
+### Spacing
+- 4px base, scale 4 / 8 / 12 / 16 / 24.
+- Density: **compact**. The family thrives on info density. Spacious wastes the dark canvas.
+
+### Shadow
+- Often replaced by glow / inner shadow. Outer shadows on dark mode read as halos.
+- Subtle inner shadow on inputs to imply depth.
+
+### Motion
+- Snappy (100–200ms). No bounce. State changes are crisp on/off.
+- Selection / focus uses a glow ring or thin colored border.
+
+## Anti-patterns *within this family*
+
+- Light gray text on dark background (`#888` on `#000` fails contrast and looks generic). Use cool off-whites.
+- Rounded pill buttons.
+- Soft pastel illustrations.
+- Stock-photo hero images.
+- Whitespace as the design (this family is the opposite of `premium-luxury`).
+- Avoiding monospace entirely. Mono is the family's voice.
+- Toast notifications with bouncy entry.
+
+## Typical surfaces
+
+This family does well on:
+- Developer dashboards (deployments, logs, traces)
+- Command palettes
+- Code editors and IDE-adjacent surfaces
+- Observability and security tooling
+- Terminal-inspired marketing pages
+
+This family does poorly on:
+- Marketing aimed at non-developer buyers (CFO, HR)
+- Long-form reading
+- Children / education
+- Anything that needs to feel approachable to non-technical users
+
+## Notes
+
+The "AI tooling" wave (2024–) has made this family overused — every dev tool now ships with the same dark + neon accent + mono look. If the project is in this family, lean on a *specific* mono / accent combo that's not literal copies of GitHub or Vercel.

.claude/skills/oiloil-ui-ux-guide/references/style-families/warm-content.md

@@ -0,0 +1,62 @@
+# Style Family: warm-content
+
+**Signature**: Warm neutrals, comfortable reading, soft surfaces, low-pressure feel.
+**Reference products**: Are.na, Notion light, Craft, Day One journal, Bear, Readwise.
+**Best for**: personal sites, journaling apps, community tools, knowledge gardens, indie productivity.
+
+## Token defaults
+
+### Color
+- **Background**: warm off-white — `#faf8f3` to `#f0ece2`. Cream, parchment, sand.
+- **Primary**: soft and earthy — terracotta, dusty teal, deep moss, muted plum. Saturated tech colors don't belong.
+- **Text**: warm dark — `#2d2a26`, `#3d3a35`. Pure black reads as clinical here.
+- **Borders**: barely-there warm gray, often replaced by shadow or just spacing.
+
+### Typography
+- **Heading**: serif or warm humanist sans — Tiempos, Spectral, Sentinel, Söhne, Inter Display, GT Alpina.
+- **Body**: serif or rounded humanist — Sentinel, Spectral, Söhne, Tiempos Text, Mulish.
+- **Mono**: warm if used — Berkeley Mono, IBM Plex Mono.
+
+### Radius
+- **6 / 10 / 16 px**. Soft enough to feel human, not so much it feels childish.
+
+### Spacing
+- 4px base, scale 4 / 8 / 12 / 16 / 24 / 32.
+- Density: balanced or spacious. Never compact.
+
+### Shadow
+- Soft and warm-tinted (`rgba(45, 42, 38, 0.06)`), not cold black shadows.
+- Multiple elevation tiers OK but kept subtle.
+
+### Motion
+- Gentle. 200–400ms with ease-out curves. No snap, no bounce.
+- Reveal animations on scroll are in family if subtle.
+
+## Anti-patterns *within this family*
+
+- Pure white backgrounds.
+- Cool blue / cyan / neon palettes.
+- Tech-style monospace as the heading font.
+- Aggressive CTA colors (red, electric orange).
+- Dense data tables.
+- "Power user" keyboard shortcut UI as a primary surface.
+
+## Typical surfaces
+
+This family does well on:
+- Personal blogs
+- Note-taking apps
+- Reading apps
+- Journaling and reflection tools
+- Community / forum surfaces
+- Indie maker about pages
+
+This family does poorly on:
+- Enterprise dashboards
+- High-frequency transactional UIs
+- Anything where speed/efficiency must dominate feel
+- Cold-tech marketing
+
+## Notes
+
+`warm-content` is what `editorial` becomes when the product is interactive (you make notes, organize, save) rather than purely consumed (you read). The two share serif typography and generous spacing but `warm-content` allows more UI affordance — buttons, inputs, lists.