diff --git a/aio/src/assets/images/favicons/favicon-144x144-maskable.png b/aio/src/assets/images/favicons/favicon-144x144-maskable.png
new file mode 100644
index 0000000000..17971c7f63
Binary files /dev/null and b/aio/src/assets/images/favicons/favicon-144x144-maskable.png differ
diff --git a/aio/src/custom-elements-es5-polyfills.js b/aio/src/custom-elements-es5-polyfills.js
new file mode 100644
index 0000000000..ed34c2c8ae
--- /dev/null
+++ b/aio/src/custom-elements-es5-polyfills.js
@@ -0,0 +1,15 @@
+/**
+ * Custom Elements polyfills for browsers that natively support Custom Elements but not ES2015
+ * modules.
+ *
+ * NOTE:
+ * Chrome, Firefox and Safari should not need these, because they added support for ES2015 modules
+ * before Custom Elements. It is still required for some other (less common) browsers:
+ * - UC browser for android 11.8 (~3.5% global usage)
+ * - Samsung browser 5.0-8.1 (~0.43% global usage)
+ * - Opera 41-47 (~0.02% global usage)
+ */
+// @ts-nocheck
+
+require('core-js/modules/es.reflect.construct'); // Required by `native-shim.js`.
+require('@webcomponents/custom-elements/src/native-shim');
diff --git a/aio/src/google385281288605d160.html b/aio/src/google385281288605d160.html
new file mode 100644
index 0000000000..0e3614a195
--- /dev/null
+++ b/aio/src/google385281288605d160.html
@@ -0,0 +1 @@
+google-site-verification: google385281288605d160.html
\ No newline at end of file
diff --git a/aio/src/index.html b/aio/src/index.html
index d24ee1f916..990b09bd90 100644
--- a/aio/src/index.html
+++ b/aio/src/index.html
@@ -3,19 +3,11 @@
- Angular 中文文档
+ Angular
-
-
-
-
diff --git a/aio/src/styles/2-modules/_api-symbols.scss b/aio/src/styles/2-modules/_api-symbols.scss
new file mode 100644
index 0000000000..04ddf8c63d
--- /dev/null
+++ b/aio/src/styles/2-modules/_api-symbols.scss
@@ -0,0 +1,28 @@
+/* API SYMBOLS */
+
+/* SYMBOL CLASS */
+
+.symbol {
+ border-radius: 2px;
+ box-shadow: 0 1px 2px rgba($black, .24);
+ color: $white;
+ display: inline-block;
+ @include font-size(10);
+ font-weight: 600;
+ @include line-height(16);
+ margin-right: 8px;
+ text-align: center;
+ width: 16px;
+
+ // SYMBOL TYPES
+ // Symbol mapping variables in *constants*
+ @each $name, $symbol in $api-symbols {
+ &.#{$name} {
+ background: map-get($symbol, background);
+
+ &:before {
+ content: map-get($symbol, content);
+ }
+ }
+ }
+}
diff --git a/aio/src/styles/2-modules/_errors.scss b/aio/src/styles/2-modules/_errors.scss
new file mode 100644
index 0000000000..5446aa0dc5
--- /dev/null
+++ b/aio/src/styles/2-modules/_errors.scss
@@ -0,0 +1,71 @@
+
+.error-list {
+ display: grid;
+ list-style: none;
+ padding: 0;
+ overflow: hidden;
+
+ @media screen and (max-width: 600px) {
+ margin: 0 0 0 -8px;
+ }
+
+ li {
+ @include font-size(14);
+ margin: 8px 0;
+ @include line-height(14);
+ padding: 0;
+ float: left;
+ overflow: hidden;
+ min-width: 220px;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+
+ .symbol {
+ &.runtime {
+ background: $green-500;
+ }
+
+ &.compiler {
+ background: $blue-500;
+ }
+ }
+
+ .symbol.runtime:before {
+ content: "R";
+ }
+
+ .symbol.compiler:before {
+ content: "C";
+ }
+
+ a {
+ color: $blue-grey-600;
+ display: inline-block;
+ @include line-height(16);
+ padding: 0 16px 0;
+ text-decoration: none;
+ transition: all .3s;
+ overflow: hidden;
+ text-overflow: ellipsis;
+
+ &:hover {
+ background: $blue-grey-50;
+ color: $blue-500;
+ }
+ }
+ }
+}
+
+.error-video-container {
+ position: relative;
+ padding-bottom: 56.25%; /* 16:9 */
+ height: 0;
+
+ iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+}
diff --git a/aio/src/styles/2-modules/_guides.scss b/aio/src/styles/2-modules/_guides.scss
new file mode 100644
index 0000000000..db656ac923
--- /dev/null
+++ b/aio/src/styles/2-modules/_guides.scss
@@ -0,0 +1,6 @@
+.reviewed {
+ color: lighten($darkgray, 10);
+ @include font-size(13);
+ font-style: italic;
+ text-align: right;
+}
\ No newline at end of file