docs: add design system guide

[fengtianze]

Summary

• add a Google design.md-aligned DESIGN.md for Alauda UI design tokens and SCSS theme tooling
• include DESIGN.md in the ng-packagr package assets so it is published with the npm package

Verification

• parsed DESIGN.md front matter and confirmed canonical token groups and section order
• ran node scripts/build.js
• confirmed release/DESIGN.md matches the root DESIGN.md

Summary by CodeRabbit

• Documentation
  • Added a comprehensive DESIGN.md design system (colors, typography, spacing, tokens, component guidance, do’s/don’ts) and a Storybook page that renders and previews the design doc with a collapsible full-source view.
• Chores
  • Included the design document as a distributable package asset and added typing support for importing raw markdown.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 8ed66d1

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Warning

Review limit reached

@fengtianze, we couldn't start this review because you've reached your PR review rate limit.

More reviews will be available in 22 minutes and 12 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 618509f2-e9cf-4760-91ef-2d269cbd2210

📥 Commits

Reviewing files that changed from the base of the PR and between 8c1dc79 and 8ed66d1.

📒 Files selected for processing (1)

• .storybook/main.ts

Walkthrough

Adds a full DESIGN.md design system spec, includes it as a packaged asset via ng-package.json, and configures Storybook to load and render the raw DESIGN.md (with a frontmatter-stripped MDX page and a collapsible full-source view).

Changes

Design System

Layer / File(s)	Summary
Design tokens and specification DESIGN.md	Complete design system document with YAML front matter defining color palettes, typography scales, spacing/sizing/shape tokens, and example component role tokens, followed by guidance sections (Colors, Typography, Layout, Elevation, Shapes, Components) and Do's/Don'ts with SCSS examples.
Package asset configuration ng-package.json	Adds assets configuration to include DESIGN.md in the package distribution.
Storybook raw-markdown support and MDX page .storybook/main.ts, .storybook/typings.d.ts, stories/theme/design.mdx	Storybook webpack rule for *.md?raw as asset/source, TypeScript module declaration declare module '*.md?raw', and an MDX story that imports DESIGN.md?raw, strips YAML frontmatter to export designBody, renders it in Markdown, and exposes the original file via Source.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I nibble tokens, line by line,
A palette, type, and spacing fine,
Frontmatter trimmed, the MDX sings,
Packaged pages, Storybook brings,
Hop—design blooms in shared sunshine.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'docs: add design system guide' directly reflects the main changes across all files: adding DESIGN.md (the design system guide), configuring it in ng-package.json for publication, and integrating it into Storybook documentation.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch add-design-md

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@DESIGN.md`:
- Around line 333-334: The example uses incorrect token names: replace the
abbreviated tokens used in the CSS example—background-color: var.use-rgb(n-10)
and border: 1px solid var.use-rgb(border)—with the defined token names
background-color: var.use-rgb(neutral-10) and border: 1px solid
var.use-rgb(border-default); update the occurrences of "n-10" -> "neutral-10"
and "border" -> "border-default" so the example references the existing tokens.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 24ee5204-52ed-404e-a920-471f3375f891

📥 Commits

Reviewing files that changed from the base of the PR and between 25ebe94 and 678db47.

📒 Files selected for processing (2)

• DESIGN.md
• ng-package.json

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.storybook/main.ts:
- Around line 25-29: The webpack rule push uses optional chaining
(config.module?.rules?.push) which can silently no-op if config.module or
config.module.rules is missing; update the .storybook/main.ts logic to
explicitly validate and/or initialize these structures before adding the rule:
check for config.module and if absent set config.module = { rules: [] } (or at
minimum set config.module.rules = config.module.rules || []), then call
config.module.rules.push(...) to add the /\.md$/ resourceQuery rule, or
alternatively throw a clear error mentioning missing
config.module/config.module.rules so the failure is explicit; reference the
config.module, config.module.rules and the push call when making the change.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5b819fd8-176d-423c-8932-6ebb7f2d251d

📥 Commits

Reviewing files that changed from the base of the PR and between 678db47 and 8c1dc79.

📒 Files selected for processing (3)

• .storybook/main.ts
• .storybook/typings.d.ts
• stories/theme/design.mdx

✅ Files skipped from review due to trivial changes (1)

• .storybook/typings.d.ts