diff --git a/demo/documentation/components/descriptions/enUS/basic.md b/demo/documentation/components/descriptions/enUS/basic.md
index 294a8c15e..e86a950e7 100644
--- a/demo/documentation/components/descriptions/enUS/basic.md
+++ b/demo/documentation/components/descriptions/enUS/basic.md
@@ -1,6 +1,6 @@
 # Basic
 ```html
-<n-descriptions label-placement="top" header="Description">
+<n-descriptions label-placement="top" title="Description">
   <n-descriptions-item>
     <template v-slot:label>
       Breakfast
diff --git a/demo/documentation/components/descriptions/enUS/index.md b/demo/documentation/components/descriptions/enUS/index.md
index e80a1935a..d57297428 100644
--- a/demo/documentation/components/descriptions/enUS/index.md
+++ b/demo/documentation/components/descriptions/enUS/index.md
@@ -6,4 +6,5 @@ columns
 span
 placement
 bordered
+size
 ```
\ No newline at end of file
diff --git a/demo/documentation/components/descriptions/enUS/placement.md b/demo/documentation/components/descriptions/enUS/placement.md
index 2f38f83a6..64b78cc4e 100644
--- a/demo/documentation/components/descriptions/enUS/placement.md
+++ b/demo/documentation/components/descriptions/enUS/placement.md
@@ -1,7 +1,7 @@
 # Label Placement
 You can set label placement to 'top' or 'left'
 ```html
-<n-descriptions label-placement="left" header="Description">
+<n-descriptions label-placement="left" title="Description">
   <n-descriptions-item>
     <template v-slot:label>
       Breakfast
diff --git a/demo/documentation/components/descriptions/enUS/size.md b/demo/documentation/components/descriptions/enUS/size.md
new file mode 100644
index 000000000..8951446e0
--- /dev/null
+++ b/demo/documentation/components/descriptions/enUS/size.md
@@ -0,0 +1,197 @@
+# Size
+```html
+<n-descriptions label-placement="left" title="Description" size="small">
+  <n-descriptions-item>
+    <template v-slot:label>
+      Breakfast
+    </template>
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Brunch">
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Lunch">
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Supper" :span="2">
+    Two<br>
+    Apples
+  </n-descriptions-item>
+  <n-descriptions-item label="Midnight Snack">
+    Apple
+  </n-descriptions-item>
+</n-descriptions>
+<n-descriptions label-placement="left" title="Description" size="medium">
+  <n-descriptions-item>
+    <template v-slot:label>
+      Breakfast
+    </template>
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Brunch">
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Lunch">
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Supper" :span="2">
+    Two<br>
+    Apples
+  </n-descriptions-item>
+  <n-descriptions-item label="Midnight Snack">
+    Apple
+  </n-descriptions-item>
+</n-descriptions>
+<n-descriptions label-placement="left" title="Description" size="large">
+  <n-descriptions-item>
+    <template v-slot:label>
+      Breakfast
+    </template>
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Brunch">
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Lunch">
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Supper" :span="2">
+    Two<br>
+    Apples
+  </n-descriptions-item>
+  <n-descriptions-item label="Midnight Snack">
+    Apple
+  </n-descriptions-item>
+</n-descriptions>
+<n-descriptions label-placement="top" title="Description" size="small">
+  <n-descriptions-item>
+    <template v-slot:label>
+      Breakfast
+    </template>
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Brunch">
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Lunch">
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Supper" :span="2">
+    Two<br>
+    Apples
+  </n-descriptions-item>
+  <n-descriptions-item label="Midnight Snack">
+    Apple
+  </n-descriptions-item>
+</n-descriptions>
+<n-descriptions label-placement="top" title="Description" size="medium">
+  <n-descriptions-item>
+    <template v-slot:label>
+      Breakfast
+    </template>
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Brunch">
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Lunch">
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Supper" :span="2">
+    Two<br>
+    Apples
+  </n-descriptions-item>
+  <n-descriptions-item label="Midnight Snack">
+    Apple
+  </n-descriptions-item>
+</n-descriptions>
+<n-descriptions label-placement="top" title="Description" size="large">
+  <n-descriptions-item>
+    <template v-slot:label>
+      Breakfast
+    </template>
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Brunch">
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Lunch">
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Supper" :span="2">
+    Two<br>
+    Apples
+  </n-descriptions-item>
+  <n-descriptions-item label="Midnight Snack">
+    Apple
+  </n-descriptions-item>
+</n-descriptions>
+<n-descriptions label-placement="top" title="Description" size="small" bordered>
+  <n-descriptions-item>
+    <template v-slot:label>
+      Breakfast
+    </template>
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Brunch">
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Lunch">
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Supper" :span="2">
+    Two<br>
+    Apples
+  </n-descriptions-item>
+  <n-descriptions-item label="Midnight Snack">
+    Apple
+  </n-descriptions-item>
+</n-descriptions>
+<n-descriptions label-placement="top" title="Description" size="medium" bordered>
+  <n-descriptions-item>
+    <template v-slot:label>
+      Breakfast
+    </template>
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Brunch">
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Lunch">
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Supper" :span="2">
+    Two<br>
+    Apples
+  </n-descriptions-item>
+  <n-descriptions-item label="Midnight Snack">
+    Apple
+  </n-descriptions-item>
+</n-descriptions>
+<n-descriptions label-placement="top" title="Description" size="large" bordered>
+  <n-descriptions-item>
+    <template v-slot:label>
+      Breakfast
+    </template>
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Brunch">
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Lunch">
+    Apple
+  </n-descriptions-item>
+  <n-descriptions-item label="Supper" :span="2">
+    Two<br>
+    Apples
+  </n-descriptions-item>
+  <n-descriptions-item label="Midnight Snack">
+    Apple
+  </n-descriptions-item>
+</n-descriptions>
+```
+```css
+.n-descriptions {
+  margin-bottom: 20px;
+}
+```
\ No newline at end of file
diff --git a/packages/common/Descriptions/src/main.vue b/packages/common/Descriptions/src/main.vue
index 0065d76ac..3b56d616b 100644
--- a/packages/common/Descriptions/src/main.vue
+++ b/packages/common/Descriptions/src/main.vue
@@ -2,11 +2,20 @@
 import withapp from '../../../mixins/withapp'
 import themeable from '../../../mixins/themeable'
 
+function isDescriptionsItem (vNode) {
+  return (
+    vNode.componentOptions &&
+    vNode.componentOptions.Ctor &&
+    vNode.componentOptions.Ctor.extendOptions &&
+    vNode.componentOptions.Ctor.extendOptions.name === 'NDescriptionsItem'
+  )
+}
+
 export default {
   name: 'NDescriptions',
   mixins: [withapp, themeable],
   props: {
-    header: {
+    title: {
       type: String,
       default: null
     },
@@ -19,16 +28,22 @@ export default {
       default: null
     },
     labelPlacement: {
-      type: String,
-      default: 'top'
+      default: 'top',
+      validator (value) {
+        return ['left', 'top'].includes(value)
+      }
     },
     labelAlign: {
-      type: String,
-      default: 'left'
+      default: 'left',
+      validator (value) {
+        return ['left', 'top'].includes(value)
+      }
     },
     size: {
-      type: String,
-      default: 'medium'
+      default: 'medium',
+      validator (value) {
+        return ['small', 'medium', 'large'].includes(value)
+      }
     },
     bordered: {
       type: Boolean,
@@ -42,6 +57,10 @@ export default {
   },
   render (h) {
     let children = this.$scopedSlots.default ? this.$scopedSlots.default() : []
+    if (children.some(child => !isDescriptionsItem(child))) {
+      console.warn('[naive-ui/n-descriptions]: `n-descriptions` only takes `n-descriptions-item` as children.')
+    }
+    children = children.filter(child => isDescriptionsItem(child))
     children = children.reduce((state, item, index) => {
       const isLastIteration = children.length - 1 === index
       const propsData = item.componentOptions.propsData
@@ -120,6 +139,7 @@ export default {
         [`n-${this.synthesizedTheme}-theme`]: this.synthesizedTheme,
         [`n-descriptions--${this.labelPlacement}-label-placement`]: true,
         [`n-descriptions--${this.labelAlign}-label-align`]: true,
+        [`n-descriptions--${this.size}-size`]: true,
         [`n-descriptions--bordered`]: this.bordered
       }
     }, [
diff --git a/styles/Descriptions.scss b/styles/Descriptions.scss
index 0833741e0..7fd971417 100644
--- a/styles/Descriptions.scss
+++ b/styles/Descriptions.scss
@@ -1,48 +1,109 @@
 @import './mixins/mixins.scss';
 
+@mixin descriptions-size-mixin ($size) {
+  $descriptions-bordered-padding: (
+    'small': (8px 12px),
+    'medium': (12px 16px),
+    'large': (16px 20px),
+  );
+  $descriptions-padding: (
+    'small': 8px,
+    'medium': 12px,
+    'large': 16px,
+  );
+  @include m($size + '-size') {
+    @include b(descriptions-header) {
+      margin-bottom: map-get($descriptions-padding, $size);
+    }
+    @include m(bordered) {
+      @include b(descriptions-table-wrapper) {
+        @include b(descriptions-table) {
+          @include b(descriptions-table-row) {
+            @include b(descriptions-table-header) {
+              padding: map-get($descriptions-bordered-padding, $size);
+            }
+            @include b(descriptions-table-content) {
+              padding: map-get($descriptions-bordered-padding, $size);
+            }
+            &:last-child {
+              @include b(descriptions-table-content) {
+                padding: map-get($descriptions-bordered-padding, $size);
+              }
+            }
+          }
+        }
+      }
+    }
+    @include b(descriptions-table-wrapper) {
+      @include b(descriptions-table) {
+        @include b(descriptions-table-row) {
+          @include b(descriptions-table-content) {
+            padding: 0 0 map-get($descriptions-padding, $size) 0;  
+          }
+          &:last-child {
+            @include b(descriptions-table-content) {
+              padding: 0;
+            }
+          } 
+        }
+      }
+    }
+  }
+}
+
 @include themes-mixin {
   @include b(descriptions) {
-    @include m(left-label-align) {
-      th {
-        text-align: left;
+    @include once {
+      @include descriptions-size-mixin('small');
+      @include descriptions-size-mixin('medium');
+      @include descriptions-size-mixin('large');
+      @include m(left-label-align) {
+        th {
+          text-align: left;
+        }
       }
-    }
-    @include m(center-label-align) {
-      th {
-        text-align: center;
+      @include m(center-label-align) {
+        th {
+          text-align: center;
+        }
       }
-    }
-    @include m(right-label-align) {
-      th {
-        text-align: right;
+      @include m(right-label-align) {
+        th {
+          text-align: right;
+        }
       }
     }
     @include m(bordered) {
       @include b(descriptions-table-wrapper) {
-        border-radius: 6px;
-        overflow: hidden;
-        border: 1px solid $--n-border-color;
+        @include once {
+          border-radius: 6px;
+          overflow: hidden;
+        }
+        border: 1px solid $--descriptions-border-color;
         @include b(descriptions-table) {
           @include b(descriptions-table-row) {
             &:not(:last-child) {
-              border-bottom: 1px solid $--n-border-color;
+              @include b(descriptions-table-content) {
+                border-bottom: 1px solid $--descriptions-border-color;
+              }
+              @include b(descriptions-table-header) {
+                background-clip: padding-box;
+                border-bottom: 1px solid $--descriptions-border-color;
+              }
             }
             @include b(descriptions-table-header) {
-              padding: 12px 16px;
-              background: $--n-table-header-color;
+              @include once {
+                font-weight: 400;
+              }
+              background: $--descriptions-header-background-color;
               &:not(:last-child) {
-                border-right: 1px solid $--n-border-color;
+                border-right: 1px solid $--descriptions-border-color;
               }
             }
             @include b(descriptions-table-content) {
-              padding: 12px 16px;
+              background: $--descriptions-content-background-color;
               &:not(:last-child) {
-                border-right: 1px solid $--n-border-color;
-              }
-            }
-            &:last-child {
-              @include b(descriptions-table-content) {
-                padding: 12px 16px;
+                border-right: 1px solid $--descriptions-border-color;
               }
             }
           }
@@ -50,54 +111,73 @@
       }
     }
     @include b(descriptions-header) {
-      transition: color .3s $default-cubic-bezier;
-      color: $--n-text-color;
-      font-weight: 700;
-      font-size: 18px;
-      margin-bottom: 12px;
+      @include once {
+        font-weight: 700;
+        font-size: 18px;
+        transition: color .3s $default-cubic-bezier;
+      }
+      color: $--descriptions-header-text-color;
     }
     @include b(descriptions-table-wrapper) {
-      transition: border-color .3s $default-cubic-bezier;
+      @include once {
+        transition: border-color .3s $default-cubic-bezier;
+      }
       @include b(descriptions-table) {
-        width: 100%;
-        border-collapse: collapse;
-        box-sizing: border-box;
-        @include b(descriptions-table-row) {
+        @include once {
+          width: 100%;
+          border-collapse: separate;
+          border-spacing: 0;
           box-sizing: border-box;
-          transition: border-color .3s $default-cubic-bezier;
-          @include b(descriptions-table-header) {
-            font-weight: 400;
-            line-height: 1.5;
-            display: table-cell;
+        }
+        @include b(descriptions-table-row) {
+          @include once {
             box-sizing: border-box;
-            color: $--n-text-color;
-            transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
+            transition: border-color .3s $default-cubic-bezier;
+          }
+          @include b(descriptions-table-header) {
+            @include once {
+              font-weight: 700;
+              line-height: 1.5;
+              display: table-cell;
+              box-sizing: border-box;
+              transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
+            }
+            color: $--descriptions-header-text-color;
           }
           @include b(descriptions-table-content) {
             @include e(content) {
-              color: $--n-secondary-text-color;
-              transition: color .3s $default-cubic-bezier;
-              display: inline-block;
+              color: $--descriptions-content-text-color;
+              @include once {
+                transition: color .3s $default-cubic-bezier;
+                display: inline-block;
+              }
             }
             @include e(label) {
-              color: $--n-text-color;
-              transition: color .3s $default-cubic-bezier;
-              display: inline-block;
-              margin-right: 14px;
+              color: $--descriptions-header-text-color;
+              @include once {
+                font-weight: 700;
+                transition: color .3s $default-cubic-bezier;
+                display: inline-block;
+                margin-right: 14px;
+              } 
             }
-            vertical-align: top;
-            line-height: 1.5;
-            display: table-cell;
-            box-sizing: border-box;
-            transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
-            color: $--n-secondary-text-color;
-            padding: 0 0 16px 0;
-          }
-          &:last-child {
-            @include b(descriptions-table-content) {
-              padding: 0;
+            @include once {
+              vertical-align: top;
+              line-height: 1.5;
+              display: table-cell;
+              box-sizing: border-box;
+              transition: color .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
+              padding: 0 0 16px 0;  
             }
+            color: $--descriptions-content-text-color;
           }
+          @include once {
+            &:last-child {
+              @include b(descriptions-table-content) {
+                padding: 0;
+              }
+            }
+          } 
         }
       }
     }
diff --git a/styles/themes/dark/components/Descriptions.scss b/styles/themes/dark/components/Descriptions.scss
index d5bd49186..e41772123 100644
--- a/styles/themes/dark/components/Descriptions.scss
+++ b/styles/themes/dark/components/Descriptions.scss
@@ -1,3 +1,7 @@
 @mixin setup-dark-descriptions {
-  
+  $--descriptions-header-background-color: $--n-table-header-color !global;
+  $--descriptions-header-text-color: $--n-text-color !global;
+  $--descriptions-content-text-color: $--n-text-color !global;
+  $--descriptions-content-background-color: $--n-card-color !global;
+  $--descriptions-border-color: $--n-alpha-border-color !global;
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/Descriptions.scss b/styles/themes/light/components/Descriptions.scss
index 7f070f584..17387515c 100644
--- a/styles/themes/light/components/Descriptions.scss
+++ b/styles/themes/light/components/Descriptions.scss
@@ -1,3 +1,7 @@
 @mixin setup-light-descriptions {
-  
+  $--descriptions-header-background-color: $--n-table-header-color !global;
+  $--descriptions-header-text-color: $--n-text-color !global;
+  $--descriptions-content-text-color: $--n-text-color !global;
+  $--descriptions-content-background-color: $--n-card-color !global;
+  $--descriptions-border-color: $--n-alpha-border-color !global;
 }
\ No newline at end of file
diff --git a/styles/themes/light/index.scss b/styles/themes/light/index.scss
index 01166005b..064caec2c 100644
--- a/styles/themes/light/index.scss
+++ b/styles/themes/light/index.scss
@@ -66,6 +66,7 @@
   $--n-divider-color: $--neutral-7 !global;
   $--n-alpha-divider-color: $--overlay-7 !global;
   $--n-border-color: $--neutral-6 !global;
+  $--n-alpha-border-color: $--overlay-6 !global;
 
   $--n-table-header-color: $--neutral-8 !global;
   $--n-secondary-text-color: $--neutral-3 !global;