diff --git a/packages/components/_private/header/src/types.ts b/packages/components/_private/header/src/types.ts
index 8edcdc45b..6469159d3 100644
--- a/packages/components/_private/header/src/types.ts
+++ b/packages/components/_private/header/src/types.ts
@@ -12,6 +12,6 @@ export interface HeaderProps {
   closable?: boolean
   closeIcon?: string | VNode
   header?: string | IxHeaderProps
-  size?: 'xl' | 'lg' | 'md' | 'sm'
+  size?: 'lg' | 'md' | 'sm'
   onClose?: (evt: Event) => void
 }
diff --git a/packages/components/button/docs/Api.zh.md b/packages/components/button/docs/Api.zh.md
index 46f8710a5..bb737ce87 100644
--- a/packages/components/button/docs/Api.zh.md
+++ b/packages/components/button/docs/Api.zh.md
@@ -11,13 +11,19 @@
 | `danger` | 设置危险状态 | `boolean` | - | - |- |
 | `disabled` | 设置禁用状态 | `boolean` | - | - |- |
 | `ghost` | 设置幽灵状态 | `boolean` | - | - |- |
-| `icon` | 设置图标类型 | `string \| #icon` | - | - | `loading` 为 `true` 时无效 |
+| `icon` | 设置图标类型 | `string` | - | - | `loading` 为 `true` 时无效 |
 | `loading` | 设置加载中状态 | `boolean` |  - | - |- |
 | `mode` | 设置按钮种类 | `'primary' \| 'default' \| 'dashed' \| 'text' \| 'link'` | `'default'` | - |- |
 | `shape` | 设置按钮形状 | `'square' \| 'circle' \| 'round'` | - | - |- |
 | `size` | 设置按钮大小 | `'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs'` | `'md'` | - |- |
 | `type` | 原生 `button` 的 `type` 属性 | `'button' \| 'submit' \| 'reset'` | `'button'` | - | 参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) |
 
+#### ButtonSlots
+
+| 名称 | 说明 | 参数类型 | 备注 |
+| --- | --- | --- | --- |
+| `icon` | 自定义图标 | - | - |
+
 ### IxButtonGroup
 
 #### ButtonGroupProps
diff --git a/packages/components/button/docs/Theme.zh.md b/packages/components/button/docs/Theme.zh.md
index e41bca4c1..b5bfd8b87 100644
--- a/packages/components/button/docs/Theme.zh.md
+++ b/packages/components/button/docs/Theme.zh.md
@@ -21,7 +21,9 @@
 | `@button-padding-lg` | `0 var(--ix-spacing-xl)` | - | - |
 | `@button-padding-xl` | `0 var(--ix-spacing-2xl)` | - | - |
 | `@button-color` | `var(--ix-text-color)` | - | - |
+| `@button-color-disabled` | `var(--ix-text-color-disabled)` | - | - |
 | `@button-background-color` | `var(--ix-background-color)` | - | - |
+| `@button-background-color-disabled` | `var(--ix-background-color-deep)` | - | - |
 | `@button-border-color` | `var(--ix-border-color)` | - | - |
 | `@button-border-radius` | `var(--ix-border-radius-sm)` | - | - |
 | `@button-primary-color` | `var(--ix-text-color-inverse)` | - | - |
@@ -35,7 +37,5 @@
 | `@button-ghost-background-color-hover` | `rgba(255, 255, 255, 0.2)` | - | - |
 | `@button-ghost-background-color-active` | `var(--ix-background-color)` | - | - |
 | `@button-ghost-background-color-disabled` | `rgba(255, 255, 255, 0.4)` | - | - |
-| `@button-disabled-color` | `var(--ix-text-color-disabled)` | - | - |
-| `@button-disabled-background-color` | `var(--ix-background-color-deep)` | - | - |
 | `@button-icon-color` | `inherit` | `var(--ix-text-color-title-secondary)` | - |
 | `@button-icon-font-size` | `inherit` | `var(--ix-font-size-lg)` | - |
diff --git a/packages/components/button/style/index.less b/packages/components/button/style/index.less
index 98b74be95..98f182b6c 100644
--- a/packages/components/button/style/index.less
+++ b/packages/components/button/style/index.less
@@ -244,8 +244,8 @@
     &:hover,
     &:focus,
     &:active {
-      color: @button-disabled-color;
-      background-color: @button-disabled-background-color;
+      color: @button-color-disabled;
+      background-color: @button-background-color-disabled;
       border-color: @button-border-color;
     }
   }
diff --git a/packages/components/button/style/themes/default.variable.less b/packages/components/button/style/themes/default.variable.less
index d9b36f9cb..eb882693a 100644
--- a/packages/components/button/style/themes/default.variable.less
+++ b/packages/components/button/style/themes/default.variable.less
@@ -23,7 +23,9 @@
 @button-padding-xl: 0 var(--ix-spacing-2xl);
 
 @button-color: var(--ix-text-color);
+@button-color-disabled: var(--ix-text-color-disabled);
 @button-background-color: var(--ix-background-color);
+@button-background-color-disabled: var(--ix-background-color-deep);
 @button-border-color: var(--ix-border-color);
 @button-border-radius: var(--ix-border-radius-sm);
 
@@ -41,8 +43,5 @@
 @button-ghost-background-color-active: var(--ix-background-color);
 @button-ghost-background-color-disabled: rgba(255, 255, 255, 0.4);
 
-@button-disabled-color: var(--ix-text-color-disabled);
-@button-disabled-background-color: var(--ix-background-color-deep);
-
 @button-icon-color: inherit;
 @button-icon-font-size: inherit;
diff --git a/packages/components/header/demo/PrefixSuffix.vue b/packages/components/header/demo/PrefixSuffix.vue
index 4ea397ead..ed0c17a23 100644
--- a/packages/components/header/demo/PrefixSuffix.vue
+++ b/packages/components/header/demo/PrefixSuffix.vue
@@ -8,11 +8,11 @@
       <IxIcon name="caret-left-filled" @click="onPrefixClick" />
     </template>
     <template #suffix>
-      <IxSpace>
+      <IxButtonGroup size="xs" mode="text" :gap="8">
         <IxButton icon="setting" @click="onSuffixClick"></IxButton>
-        <IxButton icon="menu" @click="onSuffixClick"></IxButton>
-        <IxButton @click="onSuffixClick">More</IxButton>
-      </IxSpace>
+        <IxButton icon="menu" size="xs" @click="onSuffixClick"></IxButton>
+        <IxButton size="xs" @click="onSuffixClick">More</IxButton>
+      </IxButtonGroup>
     </template>
   </IxHeader>
 </template>
diff --git a/packages/components/header/demo/SizeBar.vue b/packages/components/header/demo/SizeBar.vue
index ce4bf43b7..c17e0cf79 100644
--- a/packages/components/header/demo/SizeBar.vue
+++ b/packages/components/header/demo/SizeBar.vue
@@ -1,5 +1,4 @@
 <template>
-  <IxHeader showBar size="xl"> Title </IxHeader>
   <IxHeader showBar size="lg"> Title </IxHeader>
   <IxHeader showBar> Title </IxHeader>
   <IxHeader showBar size="sm"> Title </IxHeader>
diff --git a/packages/components/header/docs/Api.zh.md b/packages/components/header/docs/Api.zh.md
index b3339c648..a4a1f3b66 100644
--- a/packages/components/header/docs/Api.zh.md
+++ b/packages/components/header/docs/Api.zh.md
@@ -1,19 +1,28 @@
-## API
-
 ### IxHeader
 
 #### HeaderProps
 
 | 名称 | 说明 | 类型  | 默认值 | 全局配置 | 备注 |
 | --- | --- | --- | --- | --- | --- |
-| `avatar` | 自定义头像 | `string \| AvatarProps \| #avatar` | - | - | 传入 `string` 时，为头像的图标  |
-| `description` | 标题下方的说明文字 | `string \| #description` | - | - | - |
+| `avatar` | 设置头像 | `string \| AvatarProps` | - | - | 传入 `string` 时，为头像的图标  |
+| `description` | 标题下方的说明文字 | `string` | - | - | - |
 | `disabled` | 是否禁用 | `boolean` | `false` | - | - |
-| `prefix` | 标题前缀图标 | `string \| VNode \| #prefix` | - | - | - |
-| `size` | 标题大小 | `'xl' \| 'lg' \| 'md' \| 'sm'` | `'md'` | - | - |
+| `prefix` | 标题前缀图标 | `string \| VNode` | - | - | - |
+| `size` | 标题大小 | `'lg' \| 'md' \| 'sm'` | `'md'` | - | - |
 | `showBar` | 是否显示标题前的竖条 | `boolean` | `false` | - | - |
-| `subTitle` | 二级标题文字 | `string \| #subTitle` | - | - | - |
-| `suffix` | 标题后缀图标 | `string \| VNode \| #suffix` | - | - | 通常用于额外操作 |
+| `subTitle` | 二级标题文字 | `string` | - | - | - |
+| `suffix` | 标题后缀图标 | `string \| VNode` | - | - | 通常用于额外操作 |
 | `title` | 标题文字 | `string \| #default` | - | - | - |
 | `onPrefixClick` | 前缀图标被点击 | `(evt: MouseEvent) => void` | - | - | - |
 | `onSuffixClick` | 后缀图标被点击 | `(evt: MouseEvent) => void` | - | - | - |
+
+#### HeaderSlots
+
+| 名称 | 说明 | 参数类型 | 备注 |
+| --- | --- | --- | --- |
+| `avatar` | 自定义头像 | - | - |
+| `description` | 自定义说明文字 | - | - |
+| `prefix` | 自定义前缀图标 | - | - |
+| `subTitle` | 自定义二级标题文字 | - | - |
+| `suffix` | 自定义后缀图标 | - | - |
+| `title` | 自定义标题文字 | - | - |
diff --git a/packages/components/header/docs/Theme.zh.md b/packages/components/header/docs/Theme.zh.md
index 1e34d11ef..d0339a25f 100644
--- a/packages/components/header/docs/Theme.zh.md
+++ b/packages/components/header/docs/Theme.zh.md
@@ -1,36 +1,23 @@
 | 名称 | default | seer | 备注 |
 | --- | --- | --- | --- |
-| `@header-line-height` | `@line-height-base` | - | - |
-| `@header-height-xl` | `@height-xl` | `@height-xl` | - |
-| `@header-height-lg` | `@height-xl` | `@height-xl` | - |
-| `@header-height-md` | `@height-lg` | `@height-lg` | - |
-| `@header-height-sm` | `@height-md` | `@height-md` | - |
-| `@header-font-size` | `@font-size-md` | - | - |
-| `@header-color` | `@text-color` | - | - |
-| `@header-background-color` | `@background-color-component` | - | - |
-| `@header-disabled-color` | `@disabled-color` | - | - |
-| `@header-bar-width` | `@spacing-xs` | - | - |
-| `@header-bar-margin` | `@spacing-sm 0` | - | - |
-| `@header-bar-background-color` | `@color-primary` | - | - |
-| `@header-prefix-color` | `@color-graphite-d10` | - | - |
-| `@header-prefix-margin-right` | `@spacing-sm` | - | - |
-| `@header-prefix-padding-right` | `@spacing-sm` | - | - |
-| `@header-prefix-border-right` | `@border-width-sm @border-style @border-color` | `none` | - |
-| `@header-prefix-font-size` | `@font-size-lg` | - | - |
-| `@header-prefix-active-color` | `@color-primary` | - | - |
-| `@header-avatar-margin-right` | `@spacing-lg` | - | - |
-| `@header-title-color` | `@color-graphite-d40` | - | - |
-| `@header-title-font-weight` | `@font-weight-xl` | - | - |
-| `@header-title-margin-right` | `@spacing-lg` | - | - |
-| `@header-title-font-size-xl` | `@font-size-3xl` | `@font-size-xl` | - |
-| `@header-title-font-size-lg` | `@font-size-2xl` | `@font-size-lg` | - |
-| `@header-title-font-size-md` | `@font-size-xl` | `@font-size-md` | - |
-| `@header-title-font-size-sm` | `@font-size-lg` | `@font-size-md` | - |
-| `@header-sub-title-color` | `@text-color-secondary` | - | - |
-| `@header-suffix-color` | `@text-color-secondary` | `@color-graphite-d20` | - |
-| `@header-suffix-padding` | `0 @spacing-xs 0 @spacing-sm` | - | - |
-| `@header-suffix-active-color` | `@header-title-color` | `@color-blue-l10` | - |
-| `@header-suffix-font-size` | `@font-size-lg` | - | - |
-| `@header-suffix-font-size-sm` | `@font-size-md` | - | - |
-| `@header-description-color` | `@text-color` | - | - |
-| `@header-icon-font-size` | `@font-size-lg` | - | - |
+| `@header-height-sm` | `var(--ix-height-lg)` | `var(--ix-height-xl)` | - |
+| `@header-height-md` | `var(--ix-height-xl)` | - | - |
+| `@header-height-lg` | `var(--ix-height-xl)` | - | - |
+| `@header-height-xl` | `var(--ix-height-2xl)` | `var(--ix-height-xl)` | - |
+| `@header-font-size-sm` | `var(--ix-font-size-md)` | - | - |
+| `@header-font-size-md` | `var(--ix-font-size-lg)` | - | - |
+| `@header-font-size-lg` | `var(--ix-font-size-xl)` | - | - |
+| `@header-font-size-xl` | `var(--ix-font-size-2xl)` | - | - |
+| `@header-color` | `var(--ix-text-color-title)` | `var(--ix-text-color)` | - |
+| `@header-color-hover` | `var(--ix-color-primary-l10)` | - | - |
+| `@header-color-active` | `var(--ix-color-primary-d10)` | - | - |
+| `@header-color-disabled` | `var(--ix-text-color-disabled)` | - | - |
+| `@header-bar-width` | `4px` | - | - |
+| `@header-bar-background-color` | `var(--ix-color-primary)` | - | - |
+| `@header-title-font-weight` | `var(--ix-font-weight-lg)` | - | - |
+| `@header-sub-title-color` | `var(--ix-text-color-title-secondary)` | - | - |
+| `@header-sub-title-font-size` | `var(--ix-font-size-md)` | - | - |
+| `@header-suffix-color` | `var(--ix-text-color-title-secondary)` | - | - |
+| `@header-description-color` | `var(--ix-text-color-info)` | - | - |
+| `@header-description-font-size` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - |
+| `@header-icon-font-size` | `inherit` | `var(--ix-font-size-lg)` | - |
diff --git a/packages/components/header/src/Header.tsx b/packages/components/header/src/Header.tsx
index 117b9c314..90b880d0a 100644
--- a/packages/components/header/src/Header.tsx
+++ b/packages/components/header/src/Header.tsx
@@ -36,9 +36,10 @@ export default defineComponent({
       const prefixCls = mergedPrefixCls.value
       return normalizeClass({
         [prefixCls]: true,
+        [`${prefixCls}-${props.size}`]: true,
         [`${prefixCls}-disabled`]: props.disabled,
         [`${prefixCls}-with-bar`]: props.showBar,
-        [`${prefixCls}-${props.size}`]: true,
+        [`${prefixCls}-with-description`]: props.description || slots.description,
       })
     })
 
diff --git a/packages/components/header/src/types.ts b/packages/components/header/src/types.ts
index b7c8c546d..50845700f 100644
--- a/packages/components/header/src/types.ts
+++ b/packages/components/header/src/types.ts
@@ -9,7 +9,7 @@ import type { ExtractInnerPropTypes, ExtractPublicPropTypes, MaybeArray } from '
 import type { AvatarProps } from '@idux/components/avatar'
 import type { DefineComponent, HTMLAttributes, PropType, VNodeChild } from 'vue'
 
-export type HeaderSize = 'xl' | 'lg' | 'md' | 'sm'
+export type HeaderSize = 'lg' | 'md' | 'sm'
 
 export const headerProps = {
   avatar: { type: [String, Object] as PropType<string | AvatarProps>, default: undefined },
diff --git a/packages/components/header/style/index.less b/packages/components/header/style/index.less
index f5a1317c5..1ff94f0a7 100644
--- a/packages/components/header/style/index.less
+++ b/packages/components/header/style/index.less
@@ -2,94 +2,111 @@
 @import '../../style/mixins/reset.less';
 
 .@{header-prefix} {
-  .reset-component();
+  .reset-component-new();
 
-  width: 100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
-  line-height: @header-line-height;
-  font-size: @header-font-size;
   color: @header-color;
-  background-color: @header-background-color;
-  transition: color @transition-duration-base @ease-in-out;
+  width: 100%;
+
+  &-sm {
+    .header-size(@header-height-sm, @header-font-size-sm);
+  }
+
+  &-md {
+    .header-size(@header-height-md, @header-font-size-md);
+  }
+
+  &-lg {
+    .header-size(@header-height-lg, @header-font-size-lg);
+  }
+
+  // @deprecated
+  &-xl {
+    .header-size(@header-height-xl, @header-font-size-xl);
+  }
 
   &-content {
     position: relative;
-    width: 100%;
     display: flex;
     align-items: center;
+    width: 100%;
   }
 
   &-prefix {
     display: flex;
     align-items: center;
-    margin-right: @header-prefix-margin-right;
-    padding-right: @header-prefix-padding-right;
-    border-right: @header-prefix-border-right;
-    font-size: @header-prefix-font-size;
-    color: @header-prefix-color;
-    cursor: pointer;
-
-    .@{icon-prefix}:hover {
-      color: @header-prefix-active-color;
-    }
+    margin-right: 16px;
   }
 
   .@{avatar-prefix} {
-    margin-right: @header-avatar-margin-right;
-  }
-
-  .@{icon-prefix} {
-    font-size: @header-icon-font-size;
+    margin-right: 16px;
   }
 
   &-title {
-    color: @header-title-color;
-    margin-right: @header-title-margin-right;
     font-weight: @header-title-font-weight;
+    margin-right: 16px;
     .ellipsis();
   }
 
   &-sub-title {
     color: @header-sub-title-color;
+    font-size: @header-sub-title-font-size;
+    line-height: calc(@header-sub-title-font-size + var(--ix-line-height-gutter));
+    margin-right: 16px;
     .ellipsis();
   }
 
   &-suffix {
-    display: flex;
-    align-items: center;
+    color: @header-suffix-color;
     margin-left: auto;
+    padding: 0 4px;
+  }
+
+  &-prefix,
+  &-suffix {
     cursor: pointer;
-    color: @header-suffix-color;
-    font-size: @header-suffix-font-size;
-    padding: @header-suffix-padding;
+    transition: color var(--ix-transition-duration-fast);
+
+    &:hover {
+      color: @header-color-hover;
+    }
 
-    .@{icon-prefix}:hover {
-      color: @header-suffix-active-color;
+    &:active {
+      color: @header-color-active;
     }
 
-    .@{icon-prefix}:active when (@theme = seer) {
-      color: @color-blue-d10;
+    .@{icon-prefix} {
+      font-size: @header-icon-font-size;
     }
   }
 
   &-description {
     width: 100%;
     color: @header-description-color;
+    font-size: @header-description-font-size;
+    line-height: calc(@header-description-font-size + var(--ix-line-height-gutter));
   }
 
   &-disabled {
-    color: @header-disabled-color;
-    cursor: not-allowed;
+    color: @header-color-disabled;
 
-    .@{header-prefix}-title,
-    .@{header-prefix}-sub-title,
-    .@{header-prefix}-description,
     .@{header-prefix}-prefix,
     .@{header-prefix}-suffix {
-      color: @header-disabled-color;
       cursor: not-allowed;
+      color: @header-color-disabled;
+
+      &:hover,
+      &:active {
+        color: @header-color-disabled;
+      }
+    }
+
+    .@{header-prefix}-title,
+    .@{header-prefix}-sub-title,
+    .@{header-prefix}-description {
+      color: @header-color-disabled;
     }
   }
 
@@ -101,45 +118,27 @@
       left: 0;
       top: 0;
       bottom: 0;
-      margin: @header-bar-margin;
+      margin: 4px 0;
       width: @header-bar-width;
       background-color: @header-bar-background-color;
       border-radius: calc(@header-bar-width / 2);
       content: '';
     }
   }
-
-  &-xl {
-    .header-size(@header-height-xl, @header-title-font-size-xl);
-  }
-
-  &-lg {
-    .header-size(@header-height-lg, @header-title-font-size-lg);
-  }
-
-  &-md {
-    .header-size(@header-height-md, @header-title-font-size-md);
-  }
-
-  &-sm {
-    .header-size(@header-height-sm, @header-title-font-size-sm);
-
-    .@{header-prefix}-suffix {
-      font-size: @header-suffix-font-size-sm;
-    }
-  }
 }
 
-.header-size(@height; @font-size;) {
-  @spacing-vertical: max((round(((@height - @font-size * @header-line-height) / 2) * 10) / 10), 0);
+.header-size(@height, @font-size) {
+  @line-height: calc(@font-size + var(--ix-line-height-gutter));
 
-  .@{header-prefix}-content {
-    height: @height;
-    padding-top: @spacing-vertical;
-    padding-bottom: @spacing-vertical;
-  }
+  font-size: @font-size;
+  line-height: @line-height;
+  padding-top: calc((@height - @line-height) / 2);
+  padding-bottom: calc((@height - @line-height) / 2);
+
+  &.@{header-prefix}-with-description {
+    @description-line-height: calc(@header-description-font-size + var(--ix-line-height-gutter));
 
-  .@{header-prefix}-title {
-    font-size: @font-size;
+    padding-top: calc((@height + 16px - @line-height - @description-line-height) / 2);
+    padding-bottom: calc((@height + 16px - @line-height - @description-line-height) / 2);
   }
 }
diff --git a/packages/components/header/style/themes/default.variable.less b/packages/components/header/style/themes/default.variable.less
index 89bcb862f..fa4016410 100644
--- a/packages/components/header/style/themes/default.variable.less
+++ b/packages/components/header/style/themes/default.variable.less
@@ -1,42 +1,29 @@
-@header-line-height: @line-height-base;
-@header-height-xl: @height-xl;
-@header-height-lg: @height-xl;
-@header-height-md: @height-lg;
-@header-height-sm: @height-md;
-@header-font-size: @font-size-md;
-@header-color: @text-color;
-@header-background-color: @background-color-component;
-@header-disabled-color: @disabled-color;
-
-@header-bar-width: @spacing-xs;
-@header-bar-margin: @spacing-sm 0;
-@header-bar-background-color: @color-primary;
-
-@header-prefix-color: @color-graphite-d10;
-@header-prefix-margin-right: @spacing-sm;
-@header-prefix-padding-right: @spacing-sm;
-@header-prefix-border-right: @border-width-sm @border-style @border-color;
-@header-prefix-font-size: @font-size-lg;
-@header-prefix-active-color: @color-primary;
-
-@header-avatar-margin-right: @spacing-lg;
-
-@header-title-color: @color-graphite-d40;
-@header-title-font-weight: @font-weight-xl;
-@header-title-margin-right: @spacing-lg;
-@header-title-font-size-xl: @font-size-3xl;
-@header-title-font-size-lg: @font-size-2xl;
-@header-title-font-size-md: @font-size-xl;
-@header-title-font-size-sm: @font-size-lg;
-
-@header-sub-title-color: @text-color-secondary;
-
-@header-suffix-color: @text-color-secondary;
-@header-suffix-padding: 0 @spacing-xs 0 @spacing-sm;
-@header-suffix-active-color: @header-title-color;
-@header-suffix-font-size: @font-size-lg;
-@header-suffix-font-size-sm: @font-size-md;
-
-@header-description-color: @text-color;
-
-@header-icon-font-size: @font-size-lg;
+@header-height-sm: var(--ix-height-lg);
+@header-height-md: var(--ix-height-xl);
+@header-height-lg: var(--ix-height-xl);
+@header-height-xl: var(--ix-height-2xl);
+
+@header-font-size-sm: var(--ix-font-size-md);
+@header-font-size-md: var(--ix-font-size-lg);
+@header-font-size-lg: var(--ix-font-size-xl);
+@header-font-size-xl: var(--ix-font-size-2xl);
+
+@header-color: var(--ix-text-color-title);
+@header-color-hover: var(--ix-color-primary-l10);
+@header-color-active: var(--ix-color-primary-d10);
+@header-color-disabled: var(--ix-text-color-disabled);
+
+@header-bar-width: 4px;
+@header-bar-background-color: var(--ix-color-primary);
+
+@header-title-font-weight: var(--ix-font-weight-lg);
+
+@header-sub-title-color: var(--ix-text-color-title-secondary);
+@header-sub-title-font-size: var(--ix-font-size-md);
+
+@header-suffix-color: var(--ix-text-color-title-secondary);
+
+@header-description-color: var(--ix-text-color-info);
+@header-description-font-size: var(--ix-font-size-md);
+
+@header-icon-font-size: inherit;
diff --git a/packages/components/header/style/themes/seer.variable.less b/packages/components/header/style/themes/seer.variable.less
index 41a6ca61a..216348981 100644
--- a/packages/components/header/style/themes/seer.variable.less
+++ b/packages/components/header/style/themes/seer.variable.less
@@ -1,18 +1,10 @@
-@import './default.variable.less'; 
+@import './default.variable.less';
 
-@header-height-xl: @height-xl;
-@header-height-lg: @height-xl;
-@header-height-md: @height-lg;
-@header-height-sm: @height-md;
+@header-height-sm: var(--ix-height-xl);
+@header-height-xl: var(--ix-height-xl);
 
-@header-title-font-size-xl: @font-size-xl;
-@header-title-font-size-lg: @font-size-lg;
-@header-title-font-size-md: @font-size-md;
-@header-title-font-size-sm: @font-size-sm;
+@header-color: var(--ix-text-color);
 
+@header-description-font-size: var(--ix-font-size-sm);
 
-@header-title-font-size-sm: @font-size-md;
-
-@header-prefix-border-right: none;
-@header-suffix-color: @color-graphite-d20;
-@header-suffix-active-color: @color-blue-l10;
\ No newline at end of file
+@header-icon-font-size: var(--ix-font-size-lg);
diff --git a/packages/components/pagination/docs/Theme.zh.md b/packages/components/pagination/docs/Theme.zh.md
index 9ac88dca4..d22d09956 100644
--- a/packages/components/pagination/docs/Theme.zh.md
+++ b/packages/components/pagination/docs/Theme.zh.md
@@ -1,6 +1,6 @@
 | 名称 | default | seer | 备注 |
 | --- | --- | --- | --- |
-| `@pagination-font-size-sm` | `var(--ix-font-size-sm)` | `var(--ix-font-size-sm)` | - |
+| `@pagination-font-size-sm` | `var(--ix-font-size-sm)` | - | - |
 | `@pagination-font-size-md` | `var(--ix-font-size-md)` | `var(--ix-font-size-sm)` | - |
 | `@pagination-font-size-lg` | `var(--ix-font-size-lg)` | `var(--ix-font-size-md)` | - |
 | `@pagination-item-padding-sm` | `0` | - | - |
@@ -13,7 +13,7 @@
 | `@pagination-item-content-icon-font-size` | `inherit` | `var(--ix-font-size-lg)` | - |
 | `@pagination-color-hover` | `var(--ix-text-color)` | `var(--ix-color-primary)` | - |
 | `@pagination-color-active` | `var(--ix-text-color-inverse)` | `var(--ix-color-primary)` | - |
-| `@pagination-color-disabled` | `var(--ix-text-color-disabled)` | `var(--ix-text-color-disabled)` | - |
+| `@pagination-color-disabled` | `var(--ix-text-color-disabled)` | - | - |
 | `@pagination-background-color-hover` | `var(--ix-background-color-deep)` | `var(--ix-background-color-light)` | - |
 | `@pagination-background-color-active` | `var(--ix-color-primary)` | `var(--ix-color-primary-l50)` | - |
 | `@pagination-background-color-disabled` | `var(--ix-background-color-deep)` | `var(--ix-background-color-deep)` | - |
diff --git a/packages/components/style/themes/default.less b/packages/components/style/themes/default.less
index 4c59efeeb..cb3abe94c 100644
--- a/packages/components/style/themes/default.less
+++ b/packages/components/style/themes/default.less
@@ -67,6 +67,8 @@
   --ix-font-size-md: 14px;
   --ix-font-size-lg: 16px;
   --ix-font-size-xl: 20px;
+  --ix-font-size-2xl: 24px;
+  --ix-font-size-3xl: 30px;
 
   // Font-Weight
   --ix-font-weight-xs: 200;
diff --git a/packages/components/style/variable/animation.less b/packages/components/style/variable/animation.less
index 33ff90df1..893c58f04 100644
--- a/packages/components/style/variable/animation.less
+++ b/packages/components/style/variable/animation.less
@@ -18,15 +18,15 @@
 
 @ease-in-circ: cubic-bezier(0.55, 0, 1, 0.45);
 @ease-out-circ: cubic-bezier(0, 0.55, 0.45, 1);
-@ease-in-out-circ: cubic-bezier(0.83, 0, 0.17, 1);
+@ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
 
 @ease-in-back: cubic-bezier(0.36, 0, 0.66, -0.56);
 @ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
 @ease-in-out-back: cubic-bezier(0.68, -0.6, 0.32, 1.6);
 
 /* transition duration ------------------ */
-@transition-duration-slow: 0.45s;
-@transition-duration-base: 0.3s;
+@transition-duration-slow: 0.28s;
+@transition-duration-base: 0.24s;
 @transition-duration-fast: 0.2s;
 
 @transition-all-slow: all @transition-duration-slow;
diff --git a/packages/components/style/variable/font.less b/packages/components/style/variable/font.less
index b568e8036..166c098f5 100644
--- a/packages/components/style/variable/font.less
+++ b/packages/components/style/variable/font.less
@@ -1,13 +1,13 @@
 /* font -------------------------- */
 @font-size-base: 14px;
 
-@font-size-xs: @font-size-base - 4; // 10
-@font-size-sm: @font-size-base - 2; // 12
-@font-size-md: @font-size-base; // 14
-@font-size-lg: @font-size-base + 2; // 16
-@font-size-xl: @font-size-base + 6; // 20
-@font-size-2xl: @font-size-base + 10; // 24
-@font-size-3xl: @font-size-base + 14; // 28
+@font-size-xs: 10px;
+@font-size-sm: 12px;
+@font-size-md: 14px;
+@font-size-lg: 16px;
+@font-size-xl: 20px;
+@font-size-2xl: 24px;
+@font-size-3xl: 30px;
 
 @font-weight-base: 400;