Animal Island UI Style

Animal Island UI style

Apply the upstream Animal Island design language without inventing component APIs or turning an Astro site into a fully hydrated React app.

Choose the implementation path

1. For Astro blogs, read references/ASTRO_INTEGRATION.md first.
2. Prefer Astro-native markup and CSS for static navigation, article layouts, cards, tags, callouts, and decoration.
3. Use @astrojs/react and animal-island-ui only when an interactive React island provides meaningful value.
4. When using library components, consult references/AI_USAGE.md before writing props, imports, or controlled-state logic.
5. When recreating or extending visuals, consult the relevant section of references/UPSTREAM_STYLE_GUIDE.md and enforce references/UPSTREAM_CURSORS_RULES.md section 7.3.
6. Use references/DESIGN_PROMPT.md only when preparing prompts for external visual-generation tools.

Core visual contract

• Use warm earth tones, cream/parchment surfaces, mint accents, warm brown text, large rounded or pill silhouettes, and warm shadows.
• Never use pure black text, cold gray page backgrounds, cold blue focus rings, thin font weights, or square interactive controls.
• Reserve thick game-key 3D shadows for primary and danger-primary buttons. Keep default buttons subtle, inputs shadowless by default, switches without outer handle shadows, and cards without box shadows.
• Use Nunito for Latin text and Noto Sans SC for Chinese text. Keep body weight at 500, controls and headings at 600–700, and numeric emphasis at 900.
• Preserve semantic HTML, keyboard behavior, visible focus, reduced-motion support, readable article typography, and color contrast.
• Keep decorative motion restrained in long-form reading surfaces.

Reference search strategy

The bundled upstream references are large. Search narrowly before reading:

• Component API: search references/AI_USAGE.md for ## <Component> or the prop name.
• Pixel styling: search references/UPSTREAM_STYLE_GUIDE.md for ### <Component>, Design Tokens, Demo, or the CSS property.
• Hard prohibitions: search references/UPSTREAM_CURSORS_RULES.md for 7.3, 禁止, or the component name.
• External prompts: search references/DESIGN_PROMPT.md for the target tool or visual element.

Astro defaults

• Put shared CSS custom properties in src/styles/tokens.css and global foundations in src/styles/global.css.
• Keep static themed components under src/components/island/ and interactive React islands under src/components/react/.
• Import animal-island-ui/style once from a shared entry when the npm package is used.
• Apply the narrowest hydration directive: no directive for static output, then prefer client:visible or client:idle; use client:load only for immediate interaction.
• Keep Content Collections, layouts, UI components, and design tokens separated for long-term maintenance.

Provenance

Read references/PROVENANCE.md for the pinned upstream source and license. Preserve attribution when redistributing derived material.