diff --git a/frontend/app_flowy/lib/plugins/board/presentation/card/board_text_cell.dart b/frontend/app_flowy/lib/plugins/board/presentation/card/board_text_cell.dart
index 3237316c13..822749e3f2 100644
--- a/frontend/app_flowy/lib/plugins/board/presentation/card/board_text_cell.dart
+++ b/frontend/app_flowy/lib/plugins/board/presentation/card/board_text_cell.dart
@@ -1,9 +1,12 @@
 import 'package:app_flowy/plugins/board/application/card/board_text_cell_bloc.dart';
 import 'package:app_flowy/plugins/grid/application/cell/cell_service/cell_service.dart';
 import 'package:app_flowy/plugins/grid/presentation/widgets/cell/cell_builder.dart';
+import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 import 'board_cell.dart';
 import 'define.dart';
 
@@ -150,11 +153,7 @@ class _BoardTextCellState extends State<BoardTextCell> {
         onChanged: (value) => focusChanged(),
         onEditingComplete: () => focusNode.unfocus(),
         maxLines: null,
-        style: const TextStyle(
-          fontSize: 14,
-          fontWeight: FontWeight.w500,
-          fontFamily: 'Mulish',
-        ),
+        style: TextStyles.body1.size(FontSizes.s14),
         decoration: InputDecoration(
           // Magic number 4 makes the textField take up the same space as FlowyText
           contentPadding: EdgeInsets.symmetric(
diff --git a/frontend/app_flowy/lib/plugins/board/presentation/card/board_url_cell.dart b/frontend/app_flowy/lib/plugins/board/presentation/card/board_url_cell.dart
index f5d7dabf79..c38e0ea54a 100644
--- a/frontend/app_flowy/lib/plugins/board/presentation/card/board_url_cell.dart
+++ b/frontend/app_flowy/lib/plugins/board/presentation/card/board_url_cell.dart
@@ -1,8 +1,11 @@
 import 'package:app_flowy/plugins/board/application/card/board_url_cell_bloc.dart';
 import 'package:app_flowy/plugins/grid/application/cell/cell_service/cell_service.dart';
+import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 import 'define.dart';
 
@@ -53,11 +56,10 @@ class _BoardUrlCellState extends State<BoardUrlCell> {
                   textAlign: TextAlign.left,
                   text: TextSpan(
                     text: state.content,
-                    style: TextStyle(
+                    style: TextStyles.general(
+                      fontSize: FontSizes.s14,
                       color: theme.main2,
-                      fontSize: 14,
-                      decoration: TextDecoration.underline,
-                    ),
+                    ).underline,
                   ),
                 ),
               ),
diff --git a/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart b/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart
index b02cd0fc95..a1bd42d06d 100644
--- a/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart
+++ b/frontend/app_flowy/lib/plugins/board/presentation/toolbar/board_setting.dart
@@ -7,6 +7,7 @@ import 'package:app_flowy/plugins/grid/presentation/widgets/toolbar/grid_propert
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_list.dart';
@@ -108,8 +109,7 @@ class _SettingItem extends StatelessWidget {
         isSelected: isSelected,
         text: FlowyText.medium(
           action.title(),
-          fontSize: 12,
-          color: theme.textColor,
+          fontSize: FontSizes.s12,
         ),
         hoverColor: theme.hover,
         onTap: () {
diff --git a/frontend/app_flowy/lib/plugins/doc/document.dart b/frontend/app_flowy/lib/plugins/doc/document.dart
index 49a5e45892..ecc18ff518 100644
--- a/frontend/app_flowy/lib/plugins/doc/document.dart
+++ b/frontend/app_flowy/lib/plugins/doc/document.dart
@@ -187,7 +187,7 @@ class ShareActionList extends StatelessWidget {
       buildChild: (controller) {
         return RoundedTextButton(
           title: LocaleKeys.shareAction_buttonText.tr(),
-          fontSize: 12,
+          fontSize: FontSizes.s12,
           borderRadius: Corners.s6Border,
           color: theme.main1,
           onPressed: () => controller.show(),
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/cell_accessory.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/cell_accessory.dart
index 341d4095b0..3d80227c89 100644
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/cell_accessory.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/cell_accessory.dart
@@ -1,4 +1,5 @@
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flutter/material.dart';
@@ -7,6 +8,7 @@ import 'package:flowy_infra/size.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 import 'cell_builder.dart';
 
@@ -72,6 +74,7 @@ class _PrimaryCellAccessoryState extends State<PrimaryCellAccessory>
       final theme = context.watch<AppTheme>();
       return Tooltip(
         message: LocaleKeys.tooltip_openAsPage.tr(),
+        textStyle: TextStyles.caption.textColor(Colors.white),
         child: svgWidget(
           "grid/expander",
           color: theme.main1,
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_cell.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_cell.dart
index e6e1e10114..fd35d4d198 100644
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_cell.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_cell.dart
@@ -1,3 +1,4 @@
+import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/widgets.dart';
@@ -78,7 +79,10 @@ class _DateCellState extends GridCellState<GridDateCell> {
                   alignment: alignment,
                   child: Padding(
                     padding: GridSize.cellContentInsets,
-                    child: FlowyText.medium(state.dateStr, fontSize: 12),
+                    child: FlowyText.medium(
+                      state.dateStr,
+                      fontSize: FontSizes.s14,
+                    ),
                   ),
                 ),
               ),
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart
index 672e0e648e..ee85c4f76d 100644
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/date_cell/date_editor.dart
@@ -7,6 +7,8 @@ import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:dartz/dartz.dart' show Either;
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
@@ -20,6 +22,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:table_calendar/table_calendar.dart';
 import 'package:app_flowy/plugins/grid/application/prelude.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 import '../../../layout/sizes.dart';
 import '../../header/type_option/date.dart';
 
@@ -163,6 +166,7 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
           headerStyle: HeaderStyle(
             formatButtonVisible: false,
             titleCentered: true,
+            titleTextStyle: TextStyles.body1.size(FontSizes.s14),
             leftChevronMargin: EdgeInsets.zero,
             leftChevronPadding: EdgeInsets.zero,
             leftChevronIcon: svgWidget("home/arrow_left"),
@@ -174,12 +178,14 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
           daysOfWeekStyle: DaysOfWeekStyle(
             dowTextFormatter: (date, locale) =>
                 DateFormat.E(locale).format(date).toUpperCase(),
-            weekdayStyle: TextStyle(
+            weekdayStyle: TextStyles.general(
               fontSize: 13,
+              fontWeight: FontWeight.w400,
               color: theme.shader3,
             ),
-            weekendStyle: TextStyle(
+            weekendStyle: TextStyles.general(
               fontSize: 13,
+              fontWeight: FontWeight.w400,
               color: theme.shader3,
             ),
           ),
@@ -210,13 +216,19 @@ class _CellCalendarWidgetState extends State<_CellCalendarWidget> {
               shape: BoxShape.rectangle,
               borderRadius: const BorderRadius.all(Radius.circular(6)),
             ),
-            selectedTextStyle: TextStyle(
+            defaultTextStyle: TextStyles.body1.size(FontSizes.s14),
+            weekendTextStyle: TextStyles.body1.size(FontSizes.s14),
+            selectedTextStyle: TextStyles.general(
+              fontSize: FontSizes.s14,
               color: theme.surface,
-              fontSize: 14.0,
             ),
-            todayTextStyle: TextStyle(
+            todayTextStyle: TextStyles.general(
+              fontSize: FontSizes.s14,
               color: theme.surface,
-              fontSize: 14.0,
+            ),
+            outsideTextStyle: TextStyles.general(
+              fontSize: FontSizes.s14,
+              color: theme.shader4,
             ),
           ),
           selectedDayPredicate: (day) {
@@ -261,8 +273,10 @@ class _IncludeTimeButton extends StatelessWidget {
               children: [
                 svgWidget("grid/clock", color: theme.iconColor),
                 const HSpace(4),
-                FlowyText.medium(LocaleKeys.grid_field_includeTime.tr(),
-                    fontSize: 14),
+                FlowyText.medium(
+                  LocaleKeys.grid_field_includeTime.tr(),
+                  fontSize: FontSizes.s14,
+                ),
                 const Spacer(),
                 Toggle(
                   value: includeTime,
@@ -340,7 +354,7 @@ class _TimeTextFieldState extends State<_TimeTextField> {
               autoFocus: true,
               hintText: state.timeHintText,
               controller: _controller,
-              style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+              style: TextStyles.body1.size(FontSizes.s14),
               normalBorderColor: theme.shader4,
               errorBorderColor: theme.red,
               focusBorderColor: theme.main1,
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/number_cell.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/number_cell.dart
index 83ba4270da..667d7b6c93 100644
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/number_cell.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/number_cell.dart
@@ -1,8 +1,11 @@
 import 'dart:async';
 import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/plugins/grid/application/prelude.dart';
+import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 import '../../layout/sizes.dart';
 import 'cell_builder.dart';
@@ -54,7 +57,7 @@ class _NumberCellState extends GridFocusNodeCellState<GridNumberCell> {
             onEditingComplete: () => focusNode.unfocus(),
             onSubmitted: (_) => focusNode.unfocus(),
             maxLines: 1,
-            style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+            style: TextStyles.body1.size(FontSizes.s14),
             textInputAction: TextInputAction.done,
             decoration: const InputDecoration(
               contentPadding: EdgeInsets.zero,
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/text_field.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/text_field.dart
index becc0b8cb0..b1abbb9dea 100644
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/text_field.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/select_option_cell/text_field.dart
@@ -1,6 +1,7 @@
 import 'dart:collection';
 
 import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_sdk/protobuf/flowy-grid/select_type_option.pb.dart';
 import 'package:flutter/gestures.dart';
@@ -10,6 +11,7 @@ import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:textfield_tags/textfield_tags.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 import 'extension.dart';
 
@@ -104,7 +106,7 @@ class _SelectOptionTextFieldState extends State<SelectOptionTextField> {
             maxLength: widget.maxLength,
             maxLengthEnforcement:
                 MaxLengthEnforcement.truncateAfterCompositionEnds,
-            style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+            style: TextStyles.body1.size(FontSizes.s14),
             decoration: InputDecoration(
               enabledBorder: OutlineInputBorder(
                 borderSide: BorderSide(color: theme.main1, width: 1.0),
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/text_cell.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/text_cell.dart
index 3d7a9e0965..329afb3d86 100644
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/text_cell.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/text_cell.dart
@@ -1,10 +1,13 @@
 import 'dart:async';
 import 'package:app_flowy/plugins/grid/presentation/widgets/cell/prelude.dart';
+import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/plugins/grid/application/prelude.dart';
 import '../../layout/sizes.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 import 'cell_builder.dart';
 
 class GridTextCellStyle extends GridCellStyle {
@@ -69,7 +72,7 @@ class _GridTextCellState extends GridFocusNodeCellState<GridTextCell> {
             onChanged: (value) => focusChanged(),
             onEditingComplete: () => focusNode.unfocus(),
             maxLines: null,
-            style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+            style: TextStyles.body1.size(FontSizes.s14),
             decoration: InputDecoration(
               contentPadding: EdgeInsets.only(
                 top: GridSize.cellContentInsets.top,
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/url_cell/cell_editor.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/url_cell/cell_editor.dart
index 17a899f3a1..58c63a309f 100644
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/url_cell/cell_editor.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/url_cell/cell_editor.dart
@@ -1,9 +1,12 @@
 import 'package:app_flowy/plugins/grid/application/cell/cell_service/cell_service.dart';
 import 'package:app_flowy/plugins/grid/application/cell/url_cell_editor_bloc.dart';
+import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flutter/material.dart';
 import 'dart:async';
 
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 class URLCellEditor extends StatefulWidget {
   final GridURLCellController cellController;
@@ -42,7 +45,7 @@ class _URLCellEditorState extends State<URLCellEditor> {
           controller: _controller,
           onChanged: (value) => focusChanged(),
           maxLines: null,
-          style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+          style: TextStyles.body1.size(FontSizes.s14),
           decoration: const InputDecoration(
             contentPadding: EdgeInsets.zero,
             border: InputBorder.none,
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/url_cell/url_cell.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/url_cell/url_cell.dart
index fbf626802e..0abf5528b7 100644
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/url_cell/url_cell.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/cell/url_cell/url_cell.dart
@@ -5,12 +5,15 @@ import 'package:app_flowy/workspace/presentation/home/toast.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:app_flowy/plugins/grid/application/prelude.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 import 'package:url_launcher/url_launcher.dart';
 import '../../../layout/sizes.dart';
 import '../cell_accessory.dart';
@@ -122,11 +125,10 @@ class _GridURLCellState extends GridCellState<GridURLCell> {
               textAlign: TextAlign.left,
               text: TextSpan(
                 text: state.content,
-                style: TextStyle(
+                style: TextStyles.general(
+                  fontSize: FontSizes.s14,
                   color: theme.main2,
-                  fontSize: 14,
-                  decoration: TextDecoration.underline,
-                ),
+                ).underline,
               ),
             ),
           );
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/common/text_field.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/common/text_field.dart
index bd59b8b82c..abb0af7d58 100644
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/common/text_field.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/common/text_field.dart
@@ -1,7 +1,9 @@
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/widget/rounded_input_field.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 class InputTextField extends StatefulWidget {
   final void Function(String)? onDone;
@@ -51,7 +53,7 @@ class _InputTextFieldState extends State<InputTextField> {
       autoFocus: true,
       height: height,
       maxLength: widget.maxLength,
-      style: const TextStyle(fontSize: 13, fontWeight: FontWeight.w500),
+      style: TextStyles.body1.size(13),
       normalBorderColor: theme.shader4,
       focusBorderColor: theme.main1,
       cursorColor: theme.main1,
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_editor.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_editor.dart
index 36bae16b47..e4af73fd3a 100644
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_editor.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/field_editor.dart
@@ -4,6 +4,7 @@ import 'package:app_flowy/plugins/grid/presentation/layout/sizes.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:dartz/dartz.dart' show none;
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
@@ -188,7 +189,9 @@ class _FieldNameTextFieldState extends State<_FieldNameTextField> {
           return RoundedInputField(
             height: 36,
             focusNode: focusNode,
-            style: const TextStyle(fontSize: 13, fontWeight: FontWeight.w500),
+            style: TextStyles.general(
+              fontSize: 13,
+            ),
             controller: controller,
             normalBorderColor: theme.shader4,
             errorBorderColor: theme.red,
diff --git a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option_editor.dart b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option_editor.dart
index 44200ba5c2..808c5397d6 100644
--- a/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option_editor.dart
+++ b/frontend/app_flowy/lib/plugins/grid/presentation/widgets/header/type_option/select_option_editor.dart
@@ -1,6 +1,7 @@
 import 'package:app_flowy/plugins/grid/application/field/type_option/edit_select_option_bloc.dart';
 import 'package:app_flowy/plugins/grid/presentation/widgets/cell/select_option_cell/extension.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/scrolling/styled_list.dart';
@@ -126,6 +127,7 @@ class SelectOptionColorList extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final theme = context.watch<AppTheme>();
     final cells = SelectOptionColorPB.values.map((color) {
       return _SelectOptionColorCell(
           color: color, isSelected: selectedColor == color);
@@ -141,8 +143,9 @@ class SelectOptionColorList extends StatelessWidget {
             height: GridSize.typeOptionItemHeight,
             child: FlowyText.medium(
               LocaleKeys.grid_selectOption_colorPanelTitle.tr(),
-              fontSize: 12,
+              fontSize: FontSizes.s12,
               textAlign: TextAlign.left,
+              color: theme.shader3,
             ),
           ),
         ),
diff --git a/frontend/app_flowy/lib/user/presentation/sign_in_screen.dart b/frontend/app_flowy/lib/user/presentation/sign_in_screen.dart
index 6f17404474..ceb7d1abf8 100644
--- a/frontend/app_flowy/lib/user/presentation/sign_in_screen.dart
+++ b/frontend/app_flowy/lib/user/presentation/sign_in_screen.dart
@@ -4,7 +4,9 @@ import 'package:app_flowy/user/presentation/router.dart';
 import 'package:app_flowy/user/presentation/widgets/background.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/theme.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/rounded_button.dart';
 import 'package:flowy_infra_ui/widget/rounded_input_field.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
@@ -16,6 +18,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:dartz/dartz.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 class SignInScreen extends StatelessWidget {
   final AuthRouter router;
@@ -39,7 +42,8 @@ class SignInScreen extends StatelessWidget {
     );
   }
 
-  void _handleSuccessOrFail(Either<UserProfilePB, FlowyError> result, BuildContext context) {
+  void _handleSuccessOrFail(
+      Either<UserProfilePB, FlowyError> result, BuildContext context) {
     result.fold(
       (user) => router.pushWelcomeScreen(context, user),
       (error) => showSnapBar(context, error.msg),
@@ -96,11 +100,13 @@ class SignUpPrompt extends StatelessWidget {
     return Row(
       mainAxisAlignment: MainAxisAlignment.center,
       children: [
-        Text(LocaleKeys.signIn_dontHaveAnAccount.tr(), style: TextStyle(color: theme.shader3, fontSize: 12)),
+        FlowyText.medium(
+          LocaleKeys.signIn_dontHaveAnAccount.tr(),
+          fontSize: FontSizes.s12,
+          color: theme.shader3,
+        ),
         TextButton(
-          style: TextButton.styleFrom(
-            textStyle: const TextStyle(fontSize: 12),
-          ),
+          style: TextButton.styleFrom(textStyle: TextStyles.body1),
           onPressed: () => router.pushSignUpScreen(context),
           child: Text(
             LocaleKeys.signUp_buttonText.tr(),
@@ -126,7 +132,9 @@ class LoginButton extends StatelessWidget {
       borderRadius: Corners.s10Border,
       color: theme.main1,
       onPressed: () {
-        context.read<SignInBloc>().add(const SignInEvent.signedInWithUserEmailAndPassword());
+        context
+            .read<SignInBloc>()
+            .add(const SignInEvent.signedInWithUserEmailAndPassword());
       },
     );
   }
@@ -145,7 +153,7 @@ class ForgetPasswordButton extends StatelessWidget {
     final theme = context.watch<AppTheme>();
     return TextButton(
       style: TextButton.styleFrom(
-        textStyle: const TextStyle(fontSize: 12),
+        textStyle: TextStyles.body1,
       ),
       onPressed: () => router.pushForgetPasswordScreen(context),
       child: Text(
@@ -165,19 +173,26 @@ class PasswordTextField extends StatelessWidget {
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
     return BlocBuilder<SignInBloc, SignInState>(
-      buildWhen: (previous, current) => previous.passwordError != current.passwordError,
+      buildWhen: (previous, current) =>
+          previous.passwordError != current.passwordError,
       builder: (context, state) {
         return RoundedInputField(
           obscureText: true,
-          style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+          style: TextStyles.body1.size(FontSizes.s14),
           obscureIcon: svgWidget("home/hide"),
           obscureHideIcon: svgWidget("home/show"),
           hintText: LocaleKeys.signIn_passwordHint.tr(),
           normalBorderColor: theme.shader4,
           errorBorderColor: theme.red,
           cursorColor: theme.main1,
-          errorText: context.read<SignInBloc>().state.passwordError.fold(() => "", (error) => error),
-          onChanged: (value) => context.read<SignInBloc>().add(SignInEvent.passwordChanged(value)),
+          errorText: context
+              .read<SignInBloc>()
+              .state
+              .passwordError
+              .fold(() => "", (error) => error),
+          onChanged: (value) => context
+              .read<SignInBloc>()
+              .add(SignInEvent.passwordChanged(value)),
         );
       },
     );
@@ -193,16 +208,22 @@ class EmailTextField extends StatelessWidget {
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
     return BlocBuilder<SignInBloc, SignInState>(
-      buildWhen: (previous, current) => previous.emailError != current.emailError,
+      buildWhen: (previous, current) =>
+          previous.emailError != current.emailError,
       builder: (context, state) {
         return RoundedInputField(
           hintText: LocaleKeys.signIn_emailHint.tr(),
-          style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+          style: TextStyles.body1.size(FontSizes.s14),
           normalBorderColor: theme.shader4,
           errorBorderColor: theme.red,
           cursorColor: theme.main1,
-          errorText: context.read<SignInBloc>().state.emailError.fold(() => "", (error) => error),
-          onChanged: (value) => context.read<SignInBloc>().add(SignInEvent.emailChanged(value)),
+          errorText: context
+              .read<SignInBloc>()
+              .state
+              .emailError
+              .fold(() => "", (error) => error),
+          onChanged: (value) =>
+              context.read<SignInBloc>().add(SignInEvent.emailChanged(value)),
         );
       },
     );
diff --git a/frontend/app_flowy/lib/user/presentation/sign_up_screen.dart b/frontend/app_flowy/lib/user/presentation/sign_up_screen.dart
index 75834f3836..b05435703d 100644
--- a/frontend/app_flowy/lib/user/presentation/sign_up_screen.dart
+++ b/frontend/app_flowy/lib/user/presentation/sign_up_screen.dart
@@ -3,6 +3,8 @@ import 'package:app_flowy/user/application/sign_up_bloc.dart';
 import 'package:app_flowy/user/presentation/router.dart';
 import 'package:app_flowy/user/presentation/widgets/background.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/widget/rounded_button.dart';
 import 'package:flowy_infra_ui/widget/rounded_input_field.dart';
@@ -15,6 +17,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:dartz/dartz.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 class SignUpScreen extends StatelessWidget {
   final AuthRouter router;
@@ -36,7 +39,8 @@ class SignUpScreen extends StatelessWidget {
     );
   }
 
-  void _handleSuccessOrFail(BuildContext context, Either<UserProfilePB, FlowyError> result) {
+  void _handleSuccessOrFail(
+      BuildContext context, Either<UserProfilePB, FlowyError> result) {
     result.fold(
       (user) => router.pushWelcomeScreen(context, user),
       (error) => showSnapBar(context, error.msg),
@@ -93,9 +97,10 @@ class SignUpPrompt extends StatelessWidget {
           style: TextStyle(color: theme.shader3, fontSize: 12),
         ),
         TextButton(
-          style: TextButton.styleFrom(textStyle: const TextStyle(fontSize: 12)),
+          style: TextButton.styleFrom(textStyle: TextStyles.body1),
           onPressed: () => Navigator.pop(context),
-          child: Text(LocaleKeys.signIn_buttonText.tr(), style: TextStyle(color: theme.main1)),
+          child: Text(LocaleKeys.signIn_buttonText.tr(),
+              style: TextStyle(color: theme.main1)),
         ),
       ],
     );
@@ -115,7 +120,9 @@ class SignUpButton extends StatelessWidget {
       height: 48,
       color: theme.main1,
       onPressed: () {
-        context.read<SignUpBloc>().add(const SignUpEvent.signUpWithUserEmailAndPassword());
+        context
+            .read<SignUpBloc>()
+            .add(const SignUpEvent.signUpWithUserEmailAndPassword());
       },
     );
   }
@@ -130,19 +137,26 @@ class PasswordTextField extends StatelessWidget {
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
     return BlocBuilder<SignUpBloc, SignUpState>(
-      buildWhen: (previous, current) => previous.passwordError != current.passwordError,
+      buildWhen: (previous, current) =>
+          previous.passwordError != current.passwordError,
       builder: (context, state) {
         return RoundedInputField(
           obscureText: true,
           obscureIcon: svgWidget("home/hide"),
           obscureHideIcon: svgWidget("home/show"),
-          style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+          style: TextStyles.body1.size(FontSizes.s14),
           hintText: LocaleKeys.signUp_passwordHint.tr(),
           normalBorderColor: theme.shader4,
           errorBorderColor: theme.red,
           cursorColor: theme.main1,
-          errorText: context.read<SignUpBloc>().state.passwordError.fold(() => "", (error) => error),
-          onChanged: (value) => context.read<SignUpBloc>().add(SignUpEvent.passwordChanged(value)),
+          errorText: context
+              .read<SignUpBloc>()
+              .state
+              .passwordError
+              .fold(() => "", (error) => error),
+          onChanged: (value) => context
+              .read<SignUpBloc>()
+              .add(SignUpEvent.passwordChanged(value)),
         );
       },
     );
@@ -158,19 +172,26 @@ class RepeatPasswordTextField extends StatelessWidget {
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
     return BlocBuilder<SignUpBloc, SignUpState>(
-      buildWhen: (previous, current) => previous.repeatPasswordError != current.repeatPasswordError,
+      buildWhen: (previous, current) =>
+          previous.repeatPasswordError != current.repeatPasswordError,
       builder: (context, state) {
         return RoundedInputField(
           obscureText: true,
           obscureIcon: svgWidget("home/hide"),
           obscureHideIcon: svgWidget("home/show"),
-          style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+          style: TextStyles.body1.size(FontSizes.s14),
           hintText: LocaleKeys.signUp_repeatPasswordHint.tr(),
           normalBorderColor: theme.shader4,
           errorBorderColor: theme.red,
           cursorColor: theme.main1,
-          errorText: context.read<SignUpBloc>().state.repeatPasswordError.fold(() => "", (error) => error),
-          onChanged: (value) => context.read<SignUpBloc>().add(SignUpEvent.repeatPasswordChanged(value)),
+          errorText: context
+              .read<SignUpBloc>()
+              .state
+              .repeatPasswordError
+              .fold(() => "", (error) => error),
+          onChanged: (value) => context
+              .read<SignUpBloc>()
+              .add(SignUpEvent.repeatPasswordChanged(value)),
         );
       },
     );
@@ -186,7 +207,8 @@ class EmailTextField extends StatelessWidget {
   Widget build(BuildContext context) {
     final theme = context.watch<AppTheme>();
     return BlocBuilder<SignUpBloc, SignUpState>(
-      buildWhen: (previous, current) => previous.emailError != current.emailError,
+      buildWhen: (previous, current) =>
+          previous.emailError != current.emailError,
       builder: (context, state) {
         return RoundedInputField(
           hintText: LocaleKeys.signUp_emailHint.tr(),
@@ -194,8 +216,13 @@ class EmailTextField extends StatelessWidget {
           normalBorderColor: theme.shader4,
           errorBorderColor: theme.red,
           cursorColor: theme.main1,
-          errorText: context.read<SignUpBloc>().state.emailError.fold(() => "", (error) => error),
-          onChanged: (value) => context.read<SignUpBloc>().add(SignUpEvent.emailChanged(value)),
+          errorText: context
+              .read<SignUpBloc>()
+              .state
+              .emailError
+              .fold(() => "", (error) => error),
+          onChanged: (value) =>
+              context.read<SignUpBloc>().add(SignUpEvent.emailChanged(value)),
         );
       },
     );
diff --git a/frontend/app_flowy/lib/user/presentation/skip_log_in_screen.dart b/frontend/app_flowy/lib/user/presentation/skip_log_in_screen.dart
index 6e3ae5ea52..d8f66fd9d2 100644
--- a/frontend/app_flowy/lib/user/presentation/skip_log_in_screen.dart
+++ b/frontend/app_flowy/lib/user/presentation/skip_log_in_screen.dart
@@ -3,6 +3,7 @@ import 'package:app_flowy/user/presentation/router.dart';
 import 'package:app_flowy/user/presentation/widgets/background.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra/uuid.dart';
 import 'package:flowy_infra_ui/widget/rounded_button.dart';
@@ -14,6 +15,7 @@ import 'package:flowy_sdk/protobuf/flowy-error/errors.pb.dart';
 import 'package:flowy_sdk/protobuf/flowy-user/user_profile.pb.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 import 'package:url_launcher/url_launcher.dart';
 import 'package:dartz/dartz.dart' as dartz;
 import 'package:app_flowy/generated/locale_keys.g.dart';
@@ -63,7 +65,7 @@ class _SkipLogInScreenState extends State<SkipLogInScreen> {
             InkWell(
               child: Text(
                 LocaleKeys.githubStarText.tr(),
-                style: const TextStyle(decoration: TextDecoration.underline, color: Colors.blue),
+                style: TextStyles.general(color: Colors.blue).underline,
               ),
               onTap: () {
                 _launchURL('https://github.com/AppFlowy-IO/appflowy');
@@ -72,7 +74,7 @@ class _SkipLogInScreenState extends State<SkipLogInScreen> {
             InkWell(
               child: Text(
                 LocaleKeys.subscribeNewsletterText.tr(),
-                style: const TextStyle(decoration: TextDecoration.underline, color: Colors.blue),
+                style: TextStyles.general(color: Colors.blue).underline,
               ),
               onTap: () {
                 _launchURL('https://www.appflowy.io/blog');
diff --git a/frontend/app_flowy/lib/user/presentation/widgets/background.dart b/frontend/app_flowy/lib/user/presentation/widgets/background.dart
index 225f7f0080..c7d7b25e3c 100644
--- a/frontend/app_flowy/lib/user/presentation/widgets/background.dart
+++ b/frontend/app_flowy/lib/user/presentation/widgets/background.dart
@@ -1,10 +1,9 @@
 import 'dart:math';
 
 import 'package:flowy_infra/image.dart';
-import 'package:flowy_infra/theme.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
-import 'package:provider/provider.dart';
 
 class AuthFormContainer extends StatelessWidget {
   final List<Widget> children;
@@ -37,7 +36,6 @@ class FlowyLogoTitle extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final theme = context.watch<AppTheme>();
     return SizedBox(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
@@ -47,14 +45,10 @@ class FlowyLogoTitle extends StatelessWidget {
             child: svgWidget("flowy_logo"),
           ),
           const VSpace(30),
-          Text(
+          FlowyText.semibold(
             title,
-            style: TextStyle(
-              color: theme.textColor,
-              fontWeight: FontWeight.w600,
-              fontSize: 24,
-            ),
-          )
+            fontSize: 24,
+          ),
         ],
       ),
     );
diff --git a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/create_button.dart b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/create_button.dart
index bd6ab040e1..2db3f66bcf 100644
--- a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/create_button.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/create_button.dart
@@ -17,7 +17,8 @@ class NewAppButton extends StatelessWidget {
   Widget build(BuildContext context) {
     final child = FlowyTextButton(
       LocaleKeys.newPageText.tr(),
-      fontSize: 12,
+      fontSize: FontSizes.s12,
+      fontWeight: FontWeight.w500,
       onPressed: () async => await _showCreateAppDialog(context),
       heading: svgWithSize("home/new_app", const Size(16, 16)),
       padding: EdgeInsets.symmetric(horizontal: Insets.l, vertical: 20),
diff --git a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/header.dart b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/header.dart
index d887b3417e..c7680e8b30 100644
--- a/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/header.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/home/menu/app/header/header.dart
@@ -4,6 +4,7 @@ import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:expandable/expandable.dart';
 import 'package:flowy_infra/icon_data.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_sdk/protobuf/flowy-folder/app.pb.dart';
@@ -13,6 +14,7 @@ import 'package:app_flowy/workspace/application/app/app_bloc.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:flowy_infra/image.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 import '../menu_app.dart';
 import 'add_button.dart';
@@ -102,6 +104,7 @@ class MenuAppHeader extends StatelessWidget {
   Widget _renderCreateViewButton(BuildContext context) {
     return Tooltip(
       message: LocaleKeys.menuAppHeader_addPageTooltip.tr(),
+      textStyle: TextStyles.caption.textColor(Colors.white),
       child: AddButton(
         onSelected: (pluginBuilder) {
           context.read<AppBloc>().add(
diff --git a/frontend/app_flowy/lib/workspace/presentation/home/menu/menu.dart b/frontend/app_flowy/lib/workspace/presentation/home/menu/menu.dart
index 62bcc8084f..bab1e3f9d1 100644
--- a/frontend/app_flowy/lib/workspace/presentation/home/menu/menu.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/home/menu/menu.dart
@@ -2,7 +2,6 @@ export './app/header/header.dart';
 export './app/menu_app.dart';
 
 import 'dart:io' show Platform;
-import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:app_flowy/plugins/trash/menu.dart';
 import 'package:app_flowy/workspace/presentation/home/home_sizes.dart';
 import 'package:app_flowy/workspace/presentation/home/home_stack.dart';
@@ -26,8 +25,8 @@ import 'package:app_flowy/core/frameless_window.dart';
 // import 'package:app_flowy/workspace/presentation/home/home_sizes.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
-import 'package:easy_localization/easy_localization.dart';
 
+import '../navigation.dart';
 import 'app/menu_app.dart';
 import 'app/create_button.dart';
 import 'menu_user.dart';
@@ -222,13 +221,7 @@ class MenuTopBar extends StatelessWidget {
               renderIcon(context),
               const Spacer(),
               Tooltip(
-                  richMessage: TextSpan(children: [
-                    TextSpan(text: "${LocaleKeys.sideBar_closeSidebar.tr()}\n"),
-                    TextSpan(
-                      text: Platform.isMacOS ? "⌘+\\" : "Ctrl+\\",
-                      style: const TextStyle(color: Colors.white60),
-                    ),
-                  ]),
+                  richMessage: sidebarTooltipTextSpan(),
                   child: FlowyIconButton(
                     width: 28,
                     onPressed: () => context
diff --git a/frontend/app_flowy/lib/workspace/presentation/home/menu/menu_user.dart b/frontend/app_flowy/lib/workspace/presentation/home/menu/menu_user.dart
index 12a3114f42..38b096d7f7 100644
--- a/frontend/app_flowy/lib/workspace/presentation/home/menu/menu_user.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/home/menu/menu_user.dart
@@ -4,6 +4,7 @@ import 'package:app_flowy/workspace/presentation/settings/settings_dialog.dart';
 import 'package:app_flowy/workspace/presentation/settings/widgets/settings_user_view.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
@@ -12,6 +13,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 class MenuUser extends StatelessWidget {
   final UserProfilePB user;
@@ -64,7 +66,11 @@ class MenuUser extends StatelessWidget {
     if (name.isEmpty) {
       name = context.read<MenuUserBloc>().state.userProfile.email;
     }
-    return FlowyText(name, fontSize: 12, overflow: TextOverflow.ellipsis);
+    return FlowyText.medium(
+      name,
+      fontSize: FontSizes.s12,
+      overflow: TextOverflow.ellipsis,
+    );
   }
 
   Widget _renderSettingsButton(BuildContext context) {
@@ -72,6 +78,7 @@ class MenuUser extends StatelessWidget {
     final userProfile = context.read<MenuUserBloc>().state.userProfile;
     return Tooltip(
       message: LocaleKeys.settings_menu_open.tr(),
+      textStyle: TextStyles.caption.textColor(Colors.white),
       child: IconButton(
         onPressed: () {
           showDialog(
diff --git a/frontend/app_flowy/lib/workspace/presentation/home/navigation.dart b/frontend/app_flowy/lib/workspace/presentation/home/navigation.dart
index bfdb708013..d502c85f98 100644
--- a/frontend/app_flowy/lib/workspace/presentation/home/navigation.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/home/navigation.dart
@@ -5,6 +5,8 @@ import 'package:app_flowy/workspace/application/home/home_bloc.dart';
 import 'package:app_flowy/workspace/presentation/home/home_stack.dart';
 import 'package:flowy_infra/image.dart';
 import 'package:flowy_infra/notifier.dart';
+import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
@@ -100,13 +102,7 @@ class FlowyNavigation extends StatelessWidget {
             return RotationTransition(
               turns: const AlwaysStoppedAnimation(180 / 360),
               child: Tooltip(
-                  richMessage: TextSpan(children: [
-                    TextSpan(text: "${LocaleKeys.sideBar_openSidebar.tr()}\n"),
-                    TextSpan(
-                      text: Platform.isMacOS ? "⌘+\\" : "Ctrl+\\",
-                      style: const TextStyle(color: Colors.white60),
-                    ),
-                  ]),
+                  richMessage: sidebarTooltipTextSpan(),
                   child: FlowyIconButton(
                     width: 24,
                     onPressed: () {
@@ -198,3 +194,19 @@ class EllipsisNaviItem extends NavigationItem {
   @override
   NavigationCallback get action => (id) {};
 }
+
+TextSpan sidebarTooltipTextSpan() => TextSpan(
+      children: [
+        TextSpan(
+          text: "${LocaleKeys.sideBar_openSidebar.tr()}\n",
+          style: TextStyles.caption,
+        ),
+        TextSpan(
+          text: Platform.isMacOS ? "⌘+\\" : "Ctrl+\\",
+          style: TextStyles.general(
+            fontSize: FontSizes.s11,
+            color: Colors.white60,
+          ),
+        ),
+      ],
+    );
diff --git a/frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart b/frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart
index 42a51b7da1..d64aea7f74 100644
--- a/frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/settings/settings_dialog.dart
@@ -7,6 +7,7 @@ import 'package:app_flowy/workspace/presentation/settings/widgets/settings_user_
 import 'package:app_flowy/workspace/presentation/settings/widgets/settings_menu.dart';
 import 'package:app_flowy/workspace/application/settings/settings_dialog_bloc.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_sdk/protobuf/flowy-user/user_profile.pb.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
@@ -35,11 +36,10 @@ class SettingsDialog extends StatelessWidget {
             builder: (context, state) => ChangeNotifierProvider.value(
                   value: Provider.of<AppearanceSetting>(context, listen: true),
                   child: FlowyDialog(
-                    title: Text(
+                    title: FlowyText(
                       LocaleKeys.settings_title.tr(),
-                      style: const TextStyle(
-                        fontWeight: FontWeight.bold,
-                      ),
+                      fontSize: 20,
+                      fontWeight: FontWeight.w700,
                     ),
                     child: Row(
                       crossAxisAlignment: CrossAxisAlignment.start,
@@ -62,14 +62,12 @@ class SettingsDialog extends StatelessWidget {
                         const SizedBox(width: 10),
                         Expanded(
                           child: getSettingsView(
-                              context
-                                  .read<SettingsDialogBloc>()
-                                  .state
-                                  .viewIndex,
-                              context
-                                  .read<SettingsDialogBloc>()
-                                  .state
-                                  .userProfile),
+                            context.read<SettingsDialogBloc>().state.viewIndex,
+                            context
+                                .read<SettingsDialogBloc>()
+                                .state
+                                .userProfile,
+                          ),
                         )
                       ],
                     ),
diff --git a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart
index 54077135b0..f51b053f2d 100644
--- a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_appearance_view.dart
@@ -2,9 +2,12 @@ import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:app_flowy/workspace/application/appearance.dart';
 import 'package:app_flowy/workspace/presentation/widgets/toggle/toggle_style.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 import '../../widgets/toggle/toggle.dart';
 
@@ -23,10 +26,7 @@ class SettingsAppearanceView extends StatelessWidget {
             children: [
               Text(
                 LocaleKeys.settings_appearance_lightLabel.tr(),
-                style: const TextStyle(
-                  fontSize: 14,
-                  fontWeight: FontWeight.w500,
-                ),
+                style: TextStyles.body1.size(FontSizes.s14),
               ),
               Toggle(
                 value: theme.isDark,
@@ -35,10 +35,7 @@ class SettingsAppearanceView extends StatelessWidget {
               ),
               Text(
                 LocaleKeys.settings_appearance_darkLabel.tr(),
-                style: const TextStyle(
-                  fontSize: 14,
-                  fontWeight: FontWeight.w500,
-                ),
+                style: TextStyles.body1.size(FontSizes.s14),
               ),
             ],
           ),
diff --git a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_language_view.dart b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_language_view.dart
index 457d3b2f59..416e361792 100644
--- a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_language_view.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_language_view.dart
@@ -1,10 +1,13 @@
 import 'package:app_flowy/generated/locale_keys.g.dart';
 import 'package:app_flowy/workspace/application/appearance.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flutter/material.dart';
 import 'package:flowy_infra/language.dart';
 import 'package:provider/provider.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 class SettingsLanguageView extends StatelessWidget {
   const SettingsLanguageView({Key? key}) : super(key: key);
@@ -22,10 +25,7 @@ class SettingsLanguageView extends StatelessWidget {
               children: [
                 Text(
                   LocaleKeys.settings_menu_language.tr(),
-                  style: const TextStyle(
-                    fontSize: 14,
-                    fontWeight: FontWeight.w500,
-                  ),
+                  style: TextStyles.body1.size(FontSizes.s14),
                 ),
                 const LanguageSelectorDropdown(),
               ],
@@ -96,11 +96,7 @@ class _LanguageSelectorDropdownState extends State<LanguageSelectorDropdown> {
                   padding: const EdgeInsets.all(12.0),
                   child: Text(
                     languageFromLocale(locale),
-                    style: TextStyle(
-                      fontSize: 14,
-                      fontWeight: FontWeight.w500,
-                      color: theme.textColor,
-                    ),
+                    style: TextStyles.body1.size(FontSizes.s14),
                   ),
                 ),
               );
diff --git a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_menu_element.dart b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_menu_element.dart
index 80e5c16e42..016d19840e 100644
--- a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_menu_element.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_menu_element.dart
@@ -1,4 +1,6 @@
+import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra/theme.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
@@ -37,13 +39,10 @@ class SettingsMenuElement extends StatelessWidget {
         borderRadius: BorderRadius.circular(5),
       ),
       minLeadingWidth: 0,
-      title: Text(
+      title: FlowyText.semibold(
         label,
-        style: const TextStyle(
-          fontSize: 14,
-          fontWeight: FontWeight.w600,
-          overflow: TextOverflow.ellipsis,
-        ),
+        fontSize: FontSizes.s14,
+        overflow: TextOverflow.ellipsis,
       ),
     );
   }
diff --git a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_user_view.dart b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_user_view.dart
index ceabdd9b7b..a3fba334cd 100644
--- a/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_user_view.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/settings/widgets/settings_user_view.dart
@@ -1,4 +1,5 @@
 import 'package:app_flowy/startup/startup.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/material.dart';
 import 'package:app_flowy/workspace/application/user/settings_user_bloc.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -92,7 +93,7 @@ class _CurrentIcon extends StatelessWidget {
               context: context,
               builder: (BuildContext context) {
                 return SimpleDialog(
-                    title: const Text('Select an Icon'),
+                    title: const FlowyText.medium('Select an Icon'),
                     children: <Widget>[
                       SizedBox(
                           height: 300, width: 300, child: IconGallery(_setIcon))
diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/dialogs.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/dialogs.dart
index 006194fe97..793cc68c27 100644
--- a/frontend/app_flowy/lib/workspace/presentation/widgets/dialogs.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/widgets/dialogs.dart
@@ -11,7 +11,6 @@ import 'package:app_flowy/startup/tasks/app_widget.dart';
 import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra_ui/style_widget/text_input.dart';
 import 'package:flowy_infra_ui/widget/dialog/styled_dialogs.dart';
-import 'package:textstyle_extensions/textstyle_extensions.dart';
 export 'package:flowy_infra_ui/widget/dialog/styled_dialogs.dart';
 import 'package:app_flowy/generated/locale_keys.g.dart';
 
@@ -56,8 +55,10 @@ class _CreateTextFieldDialog extends State<NavigatorTextFieldDialog> {
           FlowyFormTextInput(
             hintText: LocaleKeys.dialogCreatePageNameHint.tr(),
             initialValue: widget.value,
-            textStyle:
-                const TextStyle(fontSize: 24, fontWeight: FontWeight.w400),
+            textStyle: TextStyles.general(
+              fontSize: 24,
+              fontWeight: FontWeight.w400,
+            ),
             autoFocus: true,
             onChanged: (text) {
               newValue = text;
@@ -169,7 +170,7 @@ class NavigatorOkCancelDialog extends StatelessWidget {
             Container(color: theme.bg1, height: 1),
             VSpace(Insets.m * 1.5),
           ],
-          Text(message, style: TextStyles.Body1.textHeight(1.5)),
+          FlowyText.medium(message, fontSize: FontSizes.s12),
           SizedBox(height: Insets.l),
           OkCancelButton(
             onOkPressed: () {
diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart
index 1f8f0b6837..adb1f67f97 100644
--- a/frontend/app_flowy/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/widgets/float_bubble/question_bubble.dart
@@ -3,6 +3,7 @@ import 'package:app_flowy/workspace/presentation/home/toast.dart';
 import 'package:app_flowy/workspace/presentation/widgets/pop_up_action.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra/size.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
@@ -128,8 +129,11 @@ class FlowyVersionDescription extends CustomActionCell {
       builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
         if (snapshot.connectionState == ConnectionState.done) {
           if (snapshot.hasError) {
-            return FlowyText("Error: ${snapshot.error}",
-                fontSize: 12, color: theme.shader4);
+            return FlowyText(
+              "Error: ${snapshot.error}",
+              fontSize: FontSizes.s12,
+              color: theme.shader4,
+            );
           }
 
           PackageInfo packageInfo = snapshot.data;
@@ -147,7 +151,7 @@ class FlowyVersionDescription extends CustomActionCell {
                 const VSpace(6),
                 FlowyText(
                   "$appName $version.$buildNumber",
-                  fontSize: 12,
+                  fontSize: FontSizes.s12,
                   color: theme.shader4,
                 ),
               ],
@@ -170,7 +174,7 @@ class BubbleActionWrapper extends ActionCell {
 
   BubbleActionWrapper(this.inner);
   @override
-  Widget? icon(Color iconColor) => inner.emoji;
+  Widget? icon(Color iconColor) => FlowyText.regular(inner.emoji, fontSize: 12);
 
   @override
   String get name => inner.name;
@@ -188,14 +192,14 @@ extension QuestionBubbleExtension on BubbleAction {
     }
   }
 
-  Widget get emoji {
+  String get emoji {
     switch (this) {
       case BubbleAction.whatsNews:
-        return const Text('⭐️', style: TextStyle(fontSize: 12));
+        return '⭐️';
       case BubbleAction.help:
-        return const Text('👥', style: TextStyle(fontSize: 12));
+        return '👥';
       case BubbleAction.debug:
-        return const Text('🐛', style: TextStyle(fontSize: 12));
+        return '🐛';
     }
   }
 }
diff --git a/frontend/app_flowy/lib/workspace/presentation/widgets/left_bar_item.dart b/frontend/app_flowy/lib/workspace/presentation/widgets/left_bar_item.dart
index 0d06ec56ce..d609ae6566 100644
--- a/frontend/app_flowy/lib/workspace/presentation/widgets/left_bar_item.dart
+++ b/frontend/app_flowy/lib/workspace/presentation/widgets/left_bar_item.dart
@@ -1,15 +1,17 @@
 import 'package:app_flowy/workspace/application/view/view_listener.dart';
 import 'package:app_flowy/workspace/application/view/view_service.dart';
-import 'package:flowy_infra/theme.dart';
+import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_sdk/log.dart';
 import 'package:flowy_sdk/protobuf/flowy-folder/view.pb.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 class ViewLeftBarItem extends StatefulWidget {
   final ViewPB view;
 
-  ViewLeftBarItem({required this.view, Key? key}) : super(key: ValueKey(view.hashCode));
+  ViewLeftBarItem({required this.view, Key? key})
+      : super(key: ValueKey(view.hashCode));
 
   @override
   State<ViewLeftBarItem> createState() => _ViewLeftBarItemState();
@@ -54,7 +56,6 @@ class _ViewLeftBarItemState extends State<ViewLeftBarItem> {
   Widget build(BuildContext context) {
     _controller.text = view.name;
 
-    final theme = context.watch<AppTheme>();
     return IntrinsicWidth(
       key: ValueKey(_controller.text),
       child: TextField(
@@ -66,12 +67,7 @@ class _ViewLeftBarItemState extends State<ViewLeftBarItem> {
           border: InputBorder.none,
           isDense: true,
         ),
-        style: TextStyle(
-          color: theme.textColor,
-          fontSize: 14,
-          fontWeight: FontWeight.w500,
-          overflow: TextOverflow.ellipsis,
-        ),
+        style: TextStyles.body1.size(FontSizes.s14),
         // cursorColor: widget.cursorColor,
         // obscureText: widget.enableObscure,
       ),
diff --git a/frontend/app_flowy/packages/flowy_infra/lib/text_style.dart b/frontend/app_flowy/packages/flowy_infra/lib/text_style.dart
index 9187e17f6e..aea4398f0b 100644
--- a/frontend/app_flowy/packages/flowy_infra/lib/text_style.dart
+++ b/frontend/app_flowy/packages/flowy_infra/lib/text_style.dart
@@ -1,84 +1,73 @@
+import 'package:flowy_infra/size.dart';
 import 'package:flutter/material.dart';
-import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 class Fonts {
-  static const String lato = "Lato";
+  static String general = "Poppins";
 
-  static const String quicksand = "Quicksand";
+  static String monospace = "SF Mono";
 
-  static const String emoji = "OpenSansEmoji";
+  static String emoji = "Noto Color Emoji";
 }
 
-class FontSizes {
-  static double get scale => 1;
-
-  static double get s11 => 11 * scale;
-
-  static double get s12 => 12 * scale;
-
-  static double get s14 => 14 * scale;
-
-  static double get s16 => 16 * scale;
-
-  static double get s18 => 18 * scale;
-}
-
-// ignore: non_constant_identifier_names
 class TextStyles {
-  static const TextStyle lato = TextStyle(
-    fontFamily: Fonts.lato,
-    fontWeight: FontWeight.w400,
-    letterSpacing: 0,
-    height: 1,
-    fontFamilyFallback: [
-      Fonts.emoji,
-    ],
-  );
+  static TextStyle general({
+    double? fontSize,
+    FontWeight fontWeight = FontWeight.w500,
+    Color? color,
+  }) =>
+      TextStyle(
+        fontFamily: Fonts.general,
+        fontSize: fontSize ?? FontSizes.s12,
+        color: color,
+        fontWeight: fontWeight,
+        fontFamilyFallback: [Fonts.emoji],
+        letterSpacing: (fontSize ?? FontSizes.s12) * 0.005,
+      );
 
-  static const TextStyle quicksand = TextStyle(
-    fontFamily: Fonts.quicksand,
-    fontWeight: FontWeight.w400,
-    fontFamilyFallback: [
-      Fonts.emoji,
-    ],
-  );
+  static TextStyle monospace({
+    String? fontFamily,
+    double? fontSize,
+    FontWeight fontWeight = FontWeight.w400,
+  }) =>
+      TextStyle(
+        fontFamily: fontFamily ?? Fonts.monospace,
+        fontSize: fontSize ?? FontSizes.s12,
+        fontWeight: fontWeight,
+        fontFamilyFallback: [Fonts.emoji],
+      );
 
-  // ignore: non_constant_identifier_names
-  static TextStyle get T1 => quicksand.bold.size(FontSizes.s14).letterSpace(.7);
+  static TextStyle get title => general(
+        fontSize: FontSizes.s18,
+        fontWeight: FontWeight.w600,
+      );
 
-  // ignore: non_constant_identifier_names
-  static TextStyle get T2 => lato.bold.size(FontSizes.s12).letterSpace(.4);
+  static TextStyle get subheading => general(
+        fontSize: FontSizes.s16,
+        fontWeight: FontWeight.w600,
+      );
 
-  // ignore: non_constant_identifier_names
-  static TextStyle get H1 => lato.bold.size(FontSizes.s14);
+  static TextStyle get subtitle => general(
+        fontSize: FontSizes.s16,
+        fontWeight: FontWeight.w600,
+      );
 
-  // ignore: non_constant_identifier_names
-  static TextStyle get H2 => lato.bold.size(FontSizes.s12);
+  static TextStyle get body1 => general(
+        fontSize: FontSizes.s12,
+        fontWeight: FontWeight.w500,
+      );
 
-  // ignore: non_constant_identifier_names
-  static TextStyle get Body1 => lato.size(FontSizes.s14);
+  static TextStyle get body2 => general(
+        fontSize: FontSizes.s12,
+        fontWeight: FontWeight.w400,
+      );
 
-  // ignore: non_constant_identifier_names
-  static TextStyle get Body2 => lato.size(FontSizes.s12);
+  static TextStyle get callout => general(
+        fontSize: FontSizes.s11,
+        fontWeight: FontWeight.w600,
+      );
 
-  // ignore: non_constant_identifier_names
-  static TextStyle get Body3 => lato.size(FontSizes.s11);
-
-  // ignore: non_constant_identifier_names
-  static TextStyle get Callout => quicksand.size(FontSizes.s14).letterSpace(1.75);
-
-  // ignore: non_constant_identifier_names
-  static TextStyle get CalloutFocus => Callout.bold;
-
-  // ignore: non_constant_identifier_names
-  static TextStyle get Btn => quicksand.bold.size(FontSizes.s16).letterSpace(1.75);
-
-  // ignore: non_constant_identifier_names
-  static TextStyle get BtnSelected => quicksand.size(FontSizes.s14).letterSpace(1.75);
-
-  // ignore: non_constant_identifier_names
-  static TextStyle get Footnote => quicksand.bold.size(FontSizes.s11);
-
-  // ignore: non_constant_identifier_names
-  static TextStyle get Caption => lato.size(FontSizes.s11).letterSpace(.3);
+  static TextStyle get caption => general(
+        fontSize: FontSizes.s11,
+        fontWeight: FontWeight.w400,
+      );
 }
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart
index 616a012940..f89551626c 100644
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/button.dart
@@ -1,7 +1,9 @@
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/widget/spacing.dart';
 import 'package:flutter/material.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 class FlowyButton extends StatelessWidget {
   final Widget text;
@@ -147,6 +149,7 @@ class FlowyTextButton extends StatelessWidget {
     if (tooltip != null) {
       child = Tooltip(
         message: tooltip!,
+        textStyle: TextStyles.caption.textColor(Colors.white),
         child: child,
       );
     }
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text.dart
index 46bf5eea14..874b88ea2e 100644
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text.dart
@@ -1,3 +1,4 @@
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
@@ -63,11 +64,10 @@ class FlowyText extends StatelessWidget {
       maxLines: maxLines,
       textAlign: textAlign,
       overflow: overflow ?? TextOverflow.clip,
-      style: TextStyle(
-        color: color ?? theme.textColor,
-        fontWeight: fontWeight,
+      style: TextStyles.general(
         fontSize: fontSize,
-        fontFamily: 'Mulish',
+        fontWeight: fontWeight,
+        color: color ?? theme.textColor,
       ),
     );
   }
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text_input.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text_input.dart
index 5e72c30196..e0d90be399 100644
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text_input.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/style_widget/text_input.dart
@@ -10,7 +10,8 @@ import 'package:provider/provider.dart';
 import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 class FlowyFormTextInput extends StatelessWidget {
-  static EdgeInsets kDefaultTextInputPadding = EdgeInsets.only(bottom: Insets.sm, top: 4);
+  static EdgeInsets kDefaultTextInputPadding =
+      EdgeInsets.only(bottom: Insets.sm, top: 4);
 
   final String? label;
   final bool? autoFocus;
@@ -52,7 +53,7 @@ class FlowyFormTextInput extends StatelessWidget {
       initialValue: initialValue,
       onChanged: onChanged,
       onFocusCreated: onFocusCreated,
-      style: textStyle ?? TextStyles.Body1,
+      style: textStyle ?? TextStyles.body1,
       onEditingComplete: onEditingComplete,
       onFocusChanged: onFocusChanged,
       controller: controller,
@@ -60,7 +61,8 @@ class FlowyFormTextInput extends StatelessWidget {
       inputDecoration: InputDecoration(
         isDense: true,
         contentPadding: contentPadding ?? kDefaultTextInputPadding,
-        border: const ThinUnderlineBorder(borderSide: BorderSide(width: 5, color: Colors.red)),
+        border: const ThinUnderlineBorder(
+            borderSide: BorderSide(width: 5, color: Colors.red)),
         //focusedBorder: UnderlineInputBorder(borderSide: BorderSide(width: .5, color: Colors.red)),
         hintText: hintText,
       ),
@@ -141,7 +143,8 @@ class StyledSearchTextInputState extends State<StyledSearchTextInput> {
 
   @override
   void initState() {
-    _controller = widget.controller ?? TextEditingController(text: widget.initialValue);
+    _controller =
+        widget.controller ?? TextEditingController(text: widget.initialValue);
     _focusNode = FocusNode(
       debugLabel: widget.label ?? '',
       onKey: (FocusNode node, RawKeyEvent evt) {
@@ -157,7 +160,8 @@ class StyledSearchTextInputState extends State<StyledSearchTextInput> {
       canRequestFocus: true,
     );
     // Listen for focus out events
-    _focusNode.addListener(() => widget.onFocusChanged?.call(_focusNode.hasFocus));
+    _focusNode
+        .addListener(() => widget.onFocusChanged?.call(_focusNode.hasFocus));
     widget.onFocusCreated?.call(_focusNode);
     if (widget.autoFocus ?? false) {
       scheduleMicrotask(() => _focusNode.requestFocus());
@@ -195,7 +199,7 @@ class StyledSearchTextInputState extends State<StyledSearchTextInput> {
         obscureText: widget.obscureText ?? false,
         autocorrect: widget.autoCorrect ?? false,
         enableSuggestions: widget.enableSuggestions ?? false,
-        style: widget.style ?? TextStyles.Body1,
+        style: widget.style ?? TextStyles.body1,
         cursorColor: theme.main1,
         controller: _controller,
         showCursor: true,
@@ -206,14 +210,15 @@ class StyledSearchTextInputState extends State<StyledSearchTextInput> {
             InputDecoration(
                 prefixIcon: widget.prefixIcon,
                 suffixIcon: widget.suffixIcon,
-                contentPadding: widget.contentPadding ?? EdgeInsets.all(Insets.m),
+                contentPadding:
+                    widget.contentPadding ?? EdgeInsets.all(Insets.m),
                 border: const OutlineInputBorder(borderSide: BorderSide.none),
                 isDense: true,
                 icon: widget.icon == null ? null : Icon(widget.icon),
                 errorText: widget.errorText,
                 errorMaxLines: 2,
                 hintText: widget.hintText,
-                hintStyle: TextStyles.Body1.textColor(theme.shader4),
+                hintStyle: TextStyles.body1.textColor(theme.shader4),
                 labelText: widget.label),
       ),
     );
@@ -254,7 +259,8 @@ class ThinUnderlineBorder extends InputBorder {
   bool get isOutline => false;
 
   @override
-  UnderlineInputBorder copyWith({BorderSide? borderSide, BorderRadius? borderRadius}) {
+  UnderlineInputBorder copyWith(
+      {BorderSide? borderSide, BorderRadius? borderRadius}) {
     return UnderlineInputBorder(
       borderSide: borderSide ?? this.borderSide,
       borderRadius: borderRadius ?? this.borderRadius,
@@ -274,7 +280,8 @@ class ThinUnderlineBorder extends InputBorder {
   @override
   Path getInnerPath(Rect rect, {TextDirection? textDirection}) {
     return Path()
-      ..addRect(Rect.fromLTWH(rect.left, rect.top, rect.width, math.max(0.0, rect.height - borderSide.width)));
+      ..addRect(Rect.fromLTWH(rect.left, rect.top, rect.width,
+          math.max(0.0, rect.height - borderSide.width)));
   }
 
   @override
@@ -285,7 +292,8 @@ class ThinUnderlineBorder extends InputBorder {
   @override
   ShapeBorder? lerpFrom(ShapeBorder? a, double t) {
     if (a is UnderlineInputBorder) {
-      final newBorderRadius = BorderRadius.lerp(a.borderRadius, borderRadius, t);
+      final newBorderRadius =
+          BorderRadius.lerp(a.borderRadius, borderRadius, t);
 
       if (newBorderRadius != null) {
         return UnderlineInputBorder(
@@ -300,7 +308,8 @@ class ThinUnderlineBorder extends InputBorder {
   @override
   ShapeBorder? lerpTo(ShapeBorder? b, double t) {
     if (b is UnderlineInputBorder) {
-      final newBorderRadius = BorderRadius.lerp(b.borderRadius, borderRadius, t);
+      final newBorderRadius =
+          BorderRadius.lerp(b.borderRadius, borderRadius, t);
       if (newBorderRadius != null) {
         return UnderlineInputBorder(
           borderSide: BorderSide.lerp(borderSide, b.borderSide, t),
@@ -326,7 +335,8 @@ class ThinUnderlineBorder extends InputBorder {
     double gapPercentage = 0.0,
     TextDirection? textDirection,
   }) {
-    if (borderRadius.bottomLeft != Radius.zero || borderRadius.bottomRight != Radius.zero) {
+    if (borderRadius.bottomLeft != Radius.zero ||
+        borderRadius.bottomRight != Radius.zero) {
       canvas.clipPath(getOuterPath(rect, textDirection: textDirection));
     }
     canvas.drawLine(rect.bottomLeft, rect.bottomRight, borderSide.toPaint());
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/base_styled_button.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/base_styled_button.dart
index d251f993fd..64e02922dc 100644
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/base_styled_button.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/buttons/base_styled_button.dart
@@ -106,7 +106,7 @@ class BaseStyledBtnState extends State<BaseStyledButton> {
       child: RawMaterialButton(
         focusNode: _focusNode,
         autofocus: widget.autoFocus,
-        textStyle: widget.useBtnText ? TextStyles.Btn : null,
+        textStyle: widget.useBtnText ? TextStyles.body1 : null,
         materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
         // visualDensity: VisualDensity.compact,
         splashColor: Colors.transparent,
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_button.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_button.dart
index 33075f703c..d336205f51 100644
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_button.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_button.dart
@@ -1,4 +1,5 @@
 import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flutter/material.dart';
 
 class RoundedTextButton extends StatelessWidget {
@@ -45,7 +46,10 @@ class RoundedTextButton extends StatelessWidget {
             onPressed: onPressed,
             child: Text(
               title ?? '',
-              style: TextStyle(color: textColor, fontSize: fontSize),
+              style: TextStyles.general(
+                fontSize: fontSize,
+                color: textColor,
+              ),
             ),
           ),
         ),
@@ -80,9 +84,8 @@ class RoundedImageButton extends StatelessWidget {
       child: TextButton(
         onPressed: press,
         style: ButtonStyle(
-            shape: MaterialStateProperty.all<RoundedRectangleBorder>(RoundedRectangleBorder(
-          borderRadius: borderRadius,
-        ))),
+            shape: MaterialStateProperty.all<RoundedRectangleBorder>(
+                RoundedRectangleBorder(borderRadius: borderRadius))),
         child: child,
       ),
     );
diff --git a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart
index e5f6b8899a..9dec787c2e 100644
--- a/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart
+++ b/frontend/app_flowy/packages/flowy_infra_ui/lib/widget/rounded_input_field.dart
@@ -1,8 +1,10 @@
 import 'package:flowy_infra/size.dart';
+import 'package:flowy_infra/text_style.dart';
 import 'package:flowy_infra_ui/widget/rounded_button.dart';
 import 'package:flutter/material.dart';
 import 'package:flowy_infra/time/duration.dart';
 import 'package:flutter/services.dart';
+import 'package:textstyle_extensions/textstyle_extensions.dart';
 
 class RoundedInputField extends StatefulWidget {
   final String? hintText;
@@ -113,7 +115,7 @@ class _RoundedInputFieldState extends State<RoundedInputField> {
           decoration: InputDecoration(
             contentPadding: widget.contentPadding,
             hintText: widget.hintText,
-            hintStyle: TextStyle(color: widget.normalBorderColor),
+            hintStyle: TextStyles.body1.textColor(widget.normalBorderColor),
             enabledBorder: OutlineInputBorder(
               borderSide: BorderSide(
                 color: borderColor,