animal-island-ui style
animal-island-ui is a React + TypeScript component library with an original
cozy island-style design — 31 components, zero runtime dependencies,
CC BY-NC 4.0 (non-commercial use only).
Source & canonical design definition: https://github.com/guokaigdg/animal-island-ui
Pick your scenario first
| Scenario |
Entry |
React project — the animal-island-ui npm package is (or can be) installed |
references/react-project.md |
| Single self-contained HTML file — no npm, no bundler, React via CDN + Babel runtime |
references/standalone-html.md |
Both scenarios share the component catalog and the hard rules below.
The style in one paragraph
Warm parchment backgrounds (--animal-bg), earth-brown text (never pure black), mint-teal
primary accent, large-radius pill shapes (buttons and inputs are 50px pills; nothing
interactive below 12px radius), 3D "game button" stacked shadow on primary buttons only,
rounded Nunito + Noto Sans SC typography (body weight 500, headings 600–900), soft
cubic-bezier(0.4, 0, 0.2, 1) motion over 0.15–0.35s, and a mix of geometric shapes
(swallowtail ribbon Title, digit-tile Countdown) with organic ones (SVG blob-clipped Modal).
Design tokens
The packaged stylesheet declares runtime CSS custom properties on :root — prefix
--animal-* — mapped from the library's compile-time tokens. Groups: primary/status
colors (with hover/active/bg variants), text colors, backgrounds, borders, radii, spacing,
shadows, font family/sizes, motion durations/easing, control heights.
When to use them:
Token values are deliberately not restated here. Exact definitions (every hex/px/ms):
design-tokens.md.
Pixel-exact per-component CSS (shadows, keyframes, clip-paths):
design-system/components/.
Component catalog
Props references are grouped by category under references/components/ (props, legal
values, defaults — copied from source):
| Category |
Components |
Reference |
| General |
Button, Icon, Typewriter, Cursor |
general.md |
| Layout |
Card, Title, Divider, Collapse, Tabs |
layout.md |
| Form controls |
Input, Switch, Checkbox, Radio, Select |
form-controls.md |
| Form container |
Form (+ FormItem, useForm) |
Form.md |
| Overlays |
Modal, Drawer, Tooltip |
overlays.md |
| Feedback |
Progress, Skeleton, BackTop |
feedback.md |
| Notification |
Notification (imperative API) |
Notification.md |
| Data display |
Table, CodeBlock, Tag |
data-display.md |
| Decorative |
Footer, Divider, Cursor, Typewriter |
decorative.md |
Hard rules (violations are bugs)
- Never invent props. Every prop must appear in the component reference (or, in an
installed project, in the package's TypeScript declarations — the ground truth).
- Import the stylesheet exactly once at the app entry:
import 'animal-island-ui/style'.
Without it components render unstyled.
- Never use pure black (
#000/#111) text or cold gray (#fafafa/#f5f5f5) backgrounds.
- Never use cold blue focus rings. Focus colors are yellow (
#ffcc00 inputs) or the mint
primary (buttons).
- Never give an interactive element corners sharper than 12px radius; buttons and inputs
are 50px pills.
- The 3D pixel-stack shadow belongs to primary / danger-primary buttons only. Cards have
no box-shadow. Switch has no outer shadow. Input shadow is opt-in (
shadow={true}).
- Modal keeps its SVG blob clip-path — never a rounded rectangle. Title is a swallowtail
ribbon — never a blob, pill, or plain block (
Card type="title" no longer exists).
- Fonts are Nunito + Noto Sans SC; weight never below 400; no monospace for UI text
(CodeBlock excepted).
- Motion uses
cubic-bezier(0.4, 0, 0.2, 1) over 0.15–0.35s.
- Icons come from
<Icon name="..." /> (10 built-in names) — never emoji, Unicode
symbols (✓ ✕ →), hand-rolled SVG, or third-party icon fonts.
- Select is controlled-only (
options + value + onChange all required). Controlled
Input/Switch/Checkbox/Radio need onChange too.
- Prefer library components over raw HTML: no visible native
<button>, <input>,
<select>, checkbox/radio — wrap or use the library equivalents.
- Import only from the package root and
animal-island-ui/style — no deep imports.
- Style custom elements with
var(--animal-*) tokens, not hard-coded colors; never use
className/style to override a component's colors, radii, or shadows.
1---2name: animal-island-ui-style3description: Build React UIs in the animal-island-ui style — an a cozy island-style UI-inspired component library (warm earth tones, pill shapes, 3D game-button depth, soft motion). Use when (1) building pages or components with the animal-island-ui npm package in a React project; (2) generating a standalone single-file HTML page in this style with no build step; (3) the user asks for "a cozy island-style UI style", "animal island style", or a cozy rounded game-like UI.4---56# animal-island-ui style78animal-island-ui is a React + TypeScript component library with an original9cozy island-style design — 31 components, zero runtime dependencies,10CC BY-NC 4.0 (non-commercial use only).1112Source & canonical design definition: https://github.com/guokaigdg/animal-island-ui1314## Pick your scenario first1516| Scenario | Entry |17| --- | --- |18| React project — the `animal-island-ui` npm package is (or can be) installed | [references/react-project.md](references/react-project.md) |19| Single self-contained HTML file — no npm, no bundler, React via CDN + Babel runtime | [references/standalone-html.md](references/standalone-html.md) |2021Both scenarios share the component catalog and the hard rules below.2223## The style in one paragraph2425Warm parchment backgrounds (`--animal-bg`), earth-brown text (never pure black), mint-teal26primary accent, large-radius pill shapes (buttons and inputs are 50px pills; nothing27interactive below 12px radius), 3D "game button" stacked shadow on primary buttons only,28rounded Nunito + Noto Sans SC typography (body weight 500, headings 600–900), soft29`cubic-bezier(0.4, 0, 0.2, 1)` motion over 0.15–0.35s, and a mix of geometric shapes30(swallowtail ribbon Title, digit-tile Countdown) with organic ones (SVG blob-clipped Modal).3132## Design tokens3334The packaged stylesheet declares runtime CSS custom properties on `:root` — prefix35`--animal-*` — mapped from the library's compile-time tokens. Groups: primary/status36colors (with hover/active/bg variants), text colors, backgrounds, borders, radii, spacing,37shadows, font family/sizes, motion durations/easing, control heights.3839When to use them:4041- Styling layout wrappers, custom elements, or app-specific decoration next to library42 components: use `var(--animal-*)` instead of raw hex values so custom UI stays on-palette.43- Theming: consumers may override `--animal-*` variables after importing the library style.44- Re-implementing the style without the library (standalone HTML): a complete `:root`45 template with exact values lives in the design system —46 [css-variables.md](https://github.com/guokaigdg/animal-island-ui/blob/main/docs/design-system/css-variables.md)47 (raw: https://raw.githubusercontent.com/guokaigdg/animal-island-ui/main/docs/design-system/css-variables.md).4849Token values are deliberately not restated here. Exact definitions (every hex/px/ms):50[design-tokens.md](https://github.com/guokaigdg/animal-island-ui/blob/main/docs/design-system/design-tokens.md).51Pixel-exact per-component CSS (shadows, keyframes, clip-paths):52[design-system/components/](https://github.com/guokaigdg/animal-island-ui/tree/main/docs/design-system/components).5354## Component catalog5556Props references are grouped by category under `references/components/` (props, legal57values, defaults — copied from source):5859| Category | Components | Reference |60| --- | --- | --- |61| General | Button, Icon, Typewriter, Cursor | [general.md](references/components/general.md) |62| Layout | Card, Title, Divider, Collapse, Tabs | [layout.md](references/components/layout.md) |63| Form controls | Input, Switch, Checkbox, Radio, Select | [form-controls.md](references/components/form-controls.md) |64| Form container | Form (+ FormItem, useForm) | [Form.md](references/components/Form.md) |65| Overlays | Modal, Drawer, Tooltip | [overlays.md](references/components/overlays.md) |66| Feedback | Progress, Skeleton, BackTop | [feedback.md](references/components/feedback.md) |67| Notification | Notification (imperative API) | [Notification.md](references/components/Notification.md) |68| Data display | Table, CodeBlock, Tag | [data-display.md](references/components/data-display.md) |69| Decorative | Footer, Divider, Cursor, Typewriter | [decorative.md](references/components/decorative.md) |7071## Hard rules (violations are bugs)72731. Never invent props. Every prop must appear in the component reference (or, in an74 installed project, in the package's TypeScript declarations — the ground truth).752. Import the stylesheet exactly once at the app entry: `import 'animal-island-ui/style'`.76 Without it components render unstyled.773. Never use pure black (`#000`/`#111`) text or cold gray (`#fafafa`/`#f5f5f5`) backgrounds.784. Never use cold blue focus rings. Focus colors are yellow (`#ffcc00` inputs) or the mint79 primary (buttons).805. Never give an interactive element corners sharper than 12px radius; buttons and inputs81 are 50px pills.826. The 3D pixel-stack shadow belongs to primary / danger-primary buttons only. Cards have83 no box-shadow. Switch has no outer shadow. Input shadow is opt-in (`shadow={true}`).847. Modal keeps its SVG blob clip-path — never a rounded rectangle. Title is a swallowtail85 ribbon — never a blob, pill, or plain block (`Card type="title"` no longer exists).868. Fonts are Nunito + Noto Sans SC; weight never below 400; no monospace for UI text87 (CodeBlock excepted).889. Motion uses `cubic-bezier(0.4, 0, 0.2, 1)` over 0.15–0.35s.8910. Icons come from `<Icon name="..." />` (10 built-in names) — never emoji, Unicode90 symbols (✓ ✕ →), hand-rolled SVG, or third-party icon fonts.9111. Select is controlled-only (`options` + `value` + `onChange` all required). Controlled92 `Input`/`Switch`/`Checkbox`/`Radio` need `onChange` too.9312. Prefer library components over raw HTML: no visible native `<button>`, `<input>`,94 `<select>`, checkbox/radio — wrap or use the library equivalents.9513. Import only from the package root and `animal-island-ui/style` — no deep imports.9614. Style custom elements with `var(--animal-*)` tokens, not hard-coded colors; never use97 `className`/`style` to override a component's colors, radii, or shadows.
guokaigdg