diff --git a/src/documentation/atom/_atom.scss b/src/documentation/atom/_atom.scss
index 9d3d656..3c4e686 100644
--- a/src/documentation/atom/_atom.scss
+++ b/src/documentation/atom/_atom.scss
@@ -1,9 +1,9 @@
-@import 'button/button';
-@import 'header-item/header-item';
-@import 'image/image';
-@import 'link/link';
-@import 'logo/logo';
-@import 'nav-item/nav-item';
-@import 'paragraph/paragraph';
-@import 'quote/quote';
-@import 'title/title';
+@use 'button/button';
+@use 'header-item/header-item';
+@use 'image/image';
+@use 'link/link';
+@use 'logo/logo';
+@use 'nav-item/nav-item';
+@use 'paragraph/paragraph';
+@use 'quote/quote';
+@use 'title/title';
diff --git a/src/documentation/atom/button/_button.scss b/src/documentation/atom/button/_button.scss
index 78337ee..350225e 100644
--- a/src/documentation/atom/button/_button.scss
+++ b/src/documentation/atom/button/_button.scss
@@ -1,3 +1,5 @@
+@use '../../token/color/color' as color-color;
+@use '../../token/font-family/font-family';
 @use 'sass:color';
 
 $tikui-button-border-width: 1px !default;
@@ -10,19 +12,19 @@ $tikui-button-line-height-small: 16px !default;
 $tikui-button-font-size: 16px !default;
 $tikui-button-font-size-small: 12px !default;
 $tikui-button-radius: 30px !default;
-$tikui-button-font-family: $tikui-font-family-main !default;
-$tikui-button-color-background: $tikui-color-secondary !default;
-$tikui-button-color-border: $tikui-color-secondary !default;
-$tikui-button-color-text: $tikui-color-text-dark !default;
+$tikui-button-font-family: font-family.$tikui-font-family-main !default;
+$tikui-button-color-background: color-color.$tikui-color-secondary !default;
+$tikui-button-color-border: color-color.$tikui-color-secondary !default;
+$tikui-button-color-text: color-color.$tikui-color-text-dark !default;
 $tikui-button-focus-blur-radius: 5px !default;
-$tikui-button-focus-color-shadow: $tikui-color-primary !default;
+$tikui-button-focus-color-shadow: color-color.$tikui-color-primary !default;
 $tikui-button-hover-color-background: color.scale(
   $tikui-button-color-background,
   $lightness: -10%
 ) !default;
-$tikui-button-secondary-color-background: $tikui-color-shade-100 !default;
-$tikui-button-secondary-color-border: $tikui-color-secondary !default;
-$tikui-button-secondary-color-text: $tikui-color-text-dark !default;
+$tikui-button-secondary-color-background: color-color.$tikui-color-shade-100 !default;
+$tikui-button-secondary-color-border: color-color.$tikui-color-secondary !default;
+$tikui-button-secondary-color-text: color-color.$tikui-color-text-dark !default;
 $tikui-button-secondary-hover-color-background: $tikui-button-color-background !default;
 
 .tikui-button {
diff --git a/src/documentation/atom/header-item/_header-item.scss b/src/documentation/atom/header-item/_header-item.scss
index e96c3a5..3b8d889 100644
--- a/src/documentation/atom/header-item/_header-item.scss
+++ b/src/documentation/atom/header-item/_header-item.scss
@@ -1,13 +1,17 @@
-$tikui-header-item-color-text: $tikui-color-text-dark !default;
-$tikui-header-item-font-family: $tikui-font-family-main !default;
+@use '../../token/breakpoint/breakpoint';
+@use '../../token/color/color';
+@use '../../token/font-family/font-family';
+
+$tikui-header-item-color-text: color.$tikui-color-text-dark !default;
+$tikui-header-item-font-family: font-family.$tikui-font-family-main !default;
 $tikui-header-item-spacing: 6px !default;
 $tikui-header-item-feedback-size: 9px !default;
-$tikui-header-item-feedback-color: $tikui-color-tertiary !default;
-$tikui-header-item-focus-color-shadow: $tikui-color-primary !default;
+$tikui-header-item-feedback-color: color.$tikui-color-tertiary !default;
+$tikui-header-item-focus-color-shadow: color.$tikui-color-primary !default;
 $tikui-header-item-focus-radius-shadow: 5px !default;
 $tikui-header-item-font-size: 16px !default;
 $tikui-header-item-text-radius: 3px !default;
-$tikui-header-item-large-breakpoint: $tikui-breakpoint-large !default;
+$tikui-header-item-large-breakpoint: breakpoint.$tikui-breakpoint-large !default;
 $tikui-header-item-small-font-size: 5vw !default;
 $tikui-header-item-padding-bottom: $tikui-header-item-spacing + $tikui-header-item-feedback-size;
 
diff --git a/src/documentation/atom/link/_link.scss b/src/documentation/atom/link/_link.scss
index 723a1fc..c56656d 100644
--- a/src/documentation/atom/link/_link.scss
+++ b/src/documentation/atom/link/_link.scss
@@ -1,3 +1,5 @@
+@use '../../quark/link/link';
+
 .tikui-link {
-  @include tikui-link;
+  @include link.tikui-link;
 }
diff --git a/src/documentation/atom/nav-item/_nav-item.scss b/src/documentation/atom/nav-item/_nav-item.scss
index 0419f97..3a3fa77 100644
--- a/src/documentation/atom/nav-item/_nav-item.scss
+++ b/src/documentation/atom/nav-item/_nav-item.scss
@@ -1,5 +1,8 @@
-$tikui-nav-item-color-text: $tikui-color-text-dark !default;
-$tikui-nav-item-font-family: $tikui-font-family-main !default;
+@use '../../token/color/color';
+@use '../../token/font-family/font-family';
+
+$tikui-nav-item-color-text: color.$tikui-color-text-dark !default;
+$tikui-nav-item-font-family: font-family.$tikui-font-family-main !default;
 $tikui-nav-item-font-size: 16px !default;
 $tikui-nav-item-main-font-size: 24px !default;
 
diff --git a/src/documentation/atom/paragraph/_paragraph.scss b/src/documentation/atom/paragraph/_paragraph.scss
index 339e93a..f19ad6a 100644
--- a/src/documentation/atom/paragraph/_paragraph.scss
+++ b/src/documentation/atom/paragraph/_paragraph.scss
@@ -1,3 +1,5 @@
+@use '../../quark/paragraph/paragraph';
+
 .tikui-paragraph {
-  @include tikui-paragraph;
+  @include paragraph.tikui-paragraph;
 }
diff --git a/src/documentation/atom/quote/_quote.scss b/src/documentation/atom/quote/_quote.scss
index b8e76eb..e0a1ac6 100644
--- a/src/documentation/atom/quote/_quote.scss
+++ b/src/documentation/atom/quote/_quote.scss
@@ -1,5 +1,8 @@
-$tikui-quote-text-color: $tikui-color-text-dark !default;
-$tikui-quote-font-family: $tikui-font-family-main !default;
+@use '../../token/color/color';
+@use '../../token/font-family/font-family';
+
+$tikui-quote-text-color: color.$tikui-color-text-dark !default;
+$tikui-quote-font-family: font-family.$tikui-font-family-main !default;
 $tikui-quote-text-font-size: 16px;
 $tikui-quote-author-font-size: 14px;
 $tikui-quote-author-margin-left: 24px;
diff --git a/src/documentation/atom/title/_title.scss b/src/documentation/atom/title/_title.scss
index 008f00b..4abe855 100644
--- a/src/documentation/atom/title/_title.scss
+++ b/src/documentation/atom/title/_title.scss
@@ -1,4 +1,4 @@
-@import 'title-main/title-main';
-@import 'title-brand/title-brand';
-@import 'title-section/title-section';
-@import 'title-part/title-part';
+@use 'title-main/title-main';
+@use 'title-brand/title-brand';
+@use 'title-section/title-section';
+@use 'title-part/title-part';
diff --git a/src/documentation/atom/title/title-brand/_title-brand.scss b/src/documentation/atom/title/title-brand/_title-brand.scss
index be17501..98ace9c 100644
--- a/src/documentation/atom/title/title-brand/_title-brand.scss
+++ b/src/documentation/atom/title/title-brand/_title-brand.scss
@@ -1,11 +1,15 @@
-$tikui-title-brand-large-breakpoint: $tikui-breakpoint-large !default;
+@use '../../../quark/title/title-brand';
+@use '../../../token/breakpoint/breakpoint';
+@use '../../header-item/header-item';
+
+$tikui-title-brand-large-breakpoint: breakpoint.$tikui-breakpoint-large !default;
 $tikui-title-brand-small-font-size: 7vw;
 
 .tikui-title-brand {
-  @include tikui-title-brand;
+  @include title-brand.tikui-title-brand;
 }
 
-@media screen and (max-width: $tikui-header-item-large-breakpoint) {
+@media screen and (max-width: header-item.$tikui-header-item-large-breakpoint) {
   .tikui-title-brand {
     font-size: $tikui-title-brand-small-font-size;
   }
diff --git a/src/documentation/atom/title/title-main/_title-main.scss b/src/documentation/atom/title/title-main/_title-main.scss
index 5fad6e0..a38294e 100644
--- a/src/documentation/atom/title/title-main/_title-main.scss
+++ b/src/documentation/atom/title/title-main/_title-main.scss
@@ -1,3 +1,5 @@
+@use '../../../quark/title/title-main';
+
 .tikui-title-main {
-  @include tikui-title-main;
+  @include title-main.tikui-title-main;
 }
diff --git a/src/documentation/atom/title/title-part/_title-part.scss b/src/documentation/atom/title/title-part/_title-part.scss
index 4d28f04..4f25436 100644
--- a/src/documentation/atom/title/title-part/_title-part.scss
+++ b/src/documentation/atom/title/title-part/_title-part.scss
@@ -1,3 +1,5 @@
+@use '../../../quark/title/title-part';
+
 .tikui-title-part {
-  @include tikui-title-part;
+  @include title-part.tikui-title-part;
 }
diff --git a/src/documentation/atom/title/title-section/_title-section.scss b/src/documentation/atom/title/title-section/_title-section.scss
index 47d2be1..c923ed8 100644
--- a/src/documentation/atom/title/title-section/_title-section.scss
+++ b/src/documentation/atom/title/title-section/_title-section.scss
@@ -1,3 +1,5 @@
+@use '../../../quark/title/title-section';
+
 .tikui-title-section {
-  @include tikui-title-section;
+  @include title-section.tikui-title-section;
 }
diff --git a/src/documentation/molecule/_molecule.scss b/src/documentation/molecule/_molecule.scss
index 8102728..4d02591 100644
--- a/src/documentation/molecule/_molecule.scss
+++ b/src/documentation/molecule/_molecule.scss
@@ -1,5 +1,5 @@
-@import 'atom/atom';
-@import 'component/component';
-@import 'header-navigation/header-navigation';
-@import 'list/list';
-@import 'nav-vertical/nav-vertical';
+@use 'atom/atom';
+@use 'component/component';
+@use 'header-navigation/header-navigation';
+@use 'list/list';
+@use 'nav-vertical/nav-vertical';
diff --git a/src/documentation/molecule/atom/_atom.scss b/src/documentation/molecule/atom/_atom.scss
index 553c095..38329d0 100644
--- a/src/documentation/molecule/atom/_atom.scss
+++ b/src/documentation/molecule/atom/_atom.scss
@@ -1,7 +1,9 @@
+@use '../../token/color/color';
+
 $tikui-atom-outer-space: 60px !default;
 $tikui-atom-inner-space: 16px !default;
-$tikui-atom-color-outline: $tikui-color-background-secondary !default;
-$tikui-atom-color-background: $tikui-color-background-secondary !default;
+$tikui-atom-color-outline: color.$tikui-color-background-secondary !default;
+$tikui-atom-color-background: color.$tikui-color-background-secondary !default;
 
 .tikui-atom {
   box-sizing: border-box;
diff --git a/src/documentation/molecule/component/_component.scss b/src/documentation/molecule/component/_component.scss
index 10747e7..410e02b 100644
--- a/src/documentation/molecule/component/_component.scss
+++ b/src/documentation/molecule/component/_component.scss
@@ -1,3 +1,10 @@
+@use '../../quark/link/link';
+@use '../../quark/list/list';
+@use '../../quark/paragraph/paragraph';
+@use '../../quark/title/title-main';
+@use '../../quark/title/title-part';
+@use '../../quark/title/title-section';
+
 @mixin tikui-component-spacing($spacing) {
   & {
     margin-bottom: $spacing * 1px;
@@ -19,32 +26,32 @@
 
   &--markdown {
     h1 {
-      @include tikui-title-main;
+      @include title-main.tikui-title-main;
       @include tikui-component-spacing(24);
     }
 
     h2 {
-      @include tikui-title-section;
+      @include title-section.tikui-title-section;
       @include tikui-component-spacing(24);
     }
 
     h3 {
-      @include tikui-title-part;
+      @include title-part.tikui-title-part;
       @include tikui-component-spacing(24);
     }
 
     p {
-      @include tikui-paragraph;
+      @include paragraph.tikui-paragraph;
       @include tikui-component-spacing(16);
     }
 
     a {
-      @include tikui-link;
+      @include link.tikui-link;
     }
 
     ul,
     ol {
-      @include tikui-list;
+      @include list.tikui-list;
       @include tikui-component-spacing(16);
     }
   }
diff --git a/src/documentation/molecule/header-navigation/_header-navigation.scss b/src/documentation/molecule/header-navigation/_header-navigation.scss
index cb916fd..0f94c0a 100644
--- a/src/documentation/molecule/header-navigation/_header-navigation.scss
+++ b/src/documentation/molecule/header-navigation/_header-navigation.scss
@@ -1,5 +1,7 @@
+@use '../../token/breakpoint/breakpoint';
+
 $tikui-header-navigation-spacing: 80px !default;
-$tikui-header-navigation-large-breakpoint: $tikui-breakpoint-large !default;
+$tikui-header-navigation-large-breakpoint: breakpoint.$tikui-breakpoint-large !default;
 
 .tikui-header-navigation {
   display: flex;
diff --git a/src/documentation/molecule/list/_list.scss b/src/documentation/molecule/list/_list.scss
index 65e3182..f19cccb 100644
--- a/src/documentation/molecule/list/_list.scss
+++ b/src/documentation/molecule/list/_list.scss
@@ -1,3 +1,5 @@
+@use '../../quark/list/list';
+
 .tikui-list {
-  @include tikui-list;
+  @include list.tikui-list;
 }
diff --git a/src/documentation/molecule/nav-vertical/_nav-vertical.scss b/src/documentation/molecule/nav-vertical/_nav-vertical.scss
index fca988f..22e7d4d 100644
--- a/src/documentation/molecule/nav-vertical/_nav-vertical.scss
+++ b/src/documentation/molecule/nav-vertical/_nav-vertical.scss
@@ -1,5 +1,7 @@
+@use '../../token/color/color';
+
 $tikui-nav-vertical-padding: 32px !default;
-$tikui-nav-vertical-color-background: $tikui-color-background-secondary !default;
+$tikui-nav-vertical-color-background: color.$tikui-color-background-secondary !default;
 $tikui-nav-vertical-item-spacing: 16px !default;
 $tikui-nav-vertical-item-level-1-spacing: 24px !default;
 $tikui-nav-vertical-item-indent-space: 16px !default;
diff --git a/src/documentation/organism/_organism.scss b/src/documentation/organism/_organism.scss
index 7f035c2..b5cd134 100644
--- a/src/documentation/organism/_organism.scss
+++ b/src/documentation/organism/_organism.scss
@@ -1,5 +1,5 @@
-@import 'dual-section/dual-section';
-@import 'line-section/line-section';
-@import 'header/header';
-@import 'linear-molecule/linear-molecule';
-@import 'spacing/spacing';
+@use 'dual-section/dual-section';
+@use 'line-section/line-section';
+@use 'header/header';
+@use 'linear-molecule/linear-molecule';
+@use 'spacing/spacing';
diff --git a/src/documentation/organism/dual-section/_dual-section.scss b/src/documentation/organism/dual-section/_dual-section.scss
index 3e46d23..d5b57c5 100644
--- a/src/documentation/organism/dual-section/_dual-section.scss
+++ b/src/documentation/organism/dual-section/_dual-section.scss
@@ -1,6 +1,8 @@
+@use '../../token/breakpoint/breakpoint';
+
 $tikui-dual-section-horizontal-spacing: 200px !default;
 $tikui-dual-section-vertical-spacing: 100px !default;
-$tikui-dual-section-medium-breakpoint: $tikui-breakpoint-medium !default;
+$tikui-dual-section-medium-breakpoint: breakpoint.$tikui-breakpoint-medium !default;
 
 @mixin tikui-dual-section-size($size) {
   $size-pixel: $size * 1px;
diff --git a/src/documentation/organism/header/_header.scss b/src/documentation/organism/header/_header.scss
index becd56a..694e694 100644
--- a/src/documentation/organism/header/_header.scss
+++ b/src/documentation/organism/header/_header.scss
@@ -1,6 +1,9 @@
-$tikui-header-height: $tikui-size-header-height !default;
+@use '../../token/breakpoint/breakpoint';
+@use '../../token/size/size';
+
+$tikui-header-height: size.$tikui-size-header-height !default;
 $tikui-header-spacing: 80px !default;
-$tikui-header-large-breakpoint: $tikui-breakpoint-large !default;
+$tikui-header-large-breakpoint: breakpoint.$tikui-breakpoint-large !default;
 $tikui-header-small-spacing: 10px !default;
 
 .tikui-header {
diff --git a/src/documentation/organism/line-section/_line-section.scss b/src/documentation/organism/line-section/_line-section.scss
index b384a1b..528b971 100644
--- a/src/documentation/organism/line-section/_line-section.scss
+++ b/src/documentation/organism/line-section/_line-section.scss
@@ -1,4 +1,7 @@
-$tikui-line-section-breakpoint: $tikui-breakpoint-large !default;
+@use '../../token/breakpoint/breakpoint';
+@use '../../token/size/size';
+
+$tikui-line-section-breakpoint: breakpoint.$tikui-breakpoint-large !default;
 
 @mixin tikui-line-section-spacing($spacing) {
   $pixel-spacing: $spacing * 1px;
@@ -28,7 +31,7 @@ $tikui-line-section-breakpoint: $tikui-breakpoint-large !default;
   display: flex;
   flex-direction: row;
 
-  @each $size in $tikui-size-spacing {
+  @each $size in size.$tikui-size-spacing {
     @include tikui-line-section-spacing($size);
   }
 
@@ -43,7 +46,7 @@ $tikui-line-section-breakpoint: $tikui-breakpoint-large !default;
   .tikui-line-section {
     flex-direction: column;
 
-    @each $size in $tikui-size-spacing {
+    @each $size in size.$tikui-size-spacing {
       @include tikui-line-section-small-spacing($size);
     }
 
diff --git a/src/documentation/organism/linear-molecule/_linear-molecule.scss b/src/documentation/organism/linear-molecule/_linear-molecule.scss
index 042fd88..30af599 100644
--- a/src/documentation/organism/linear-molecule/_linear-molecule.scss
+++ b/src/documentation/organism/linear-molecule/_linear-molecule.scss
@@ -1,5 +1,7 @@
+@use '../../token/breakpoint/breakpoint';
+
 $tikui-linear-molecule: 30px !default;
-$tikui-linear-molecule-medium-breakpoint: $tikui-breakpoint-medium !default;
+$tikui-linear-molecule-medium-breakpoint: breakpoint.$tikui-breakpoint-medium !default;
 
 .tikui-linear-molecule {
   display: flex;
diff --git a/src/documentation/organism/spacing/_spacing.scss b/src/documentation/organism/spacing/_spacing.scss
index b61b35f..57ce69c 100644
--- a/src/documentation/organism/spacing/_spacing.scss
+++ b/src/documentation/organism/spacing/_spacing.scss
@@ -1,2 +1,2 @@
-@import 'horizontal-spacing/horizontal-spacing';
-@import 'vertical-spacing/vertical-spacing';
+@use 'horizontal-spacing/horizontal-spacing';
+@use 'vertical-spacing/vertical-spacing';
diff --git a/src/documentation/organism/spacing/horizontal-spacing/_horizontal-spacing.scss b/src/documentation/organism/spacing/horizontal-spacing/_horizontal-spacing.scss
index c0bb2fa..11e04f3 100644
--- a/src/documentation/organism/spacing/horizontal-spacing/_horizontal-spacing.scss
+++ b/src/documentation/organism/spacing/horizontal-spacing/_horizontal-spacing.scss
@@ -1,3 +1,5 @@
+@use '../../../token/size/size';
+
 @mixin tikui-horizontal-spacing-column-size($size) {
   &.-s#{$size} > &--column {
     margin-right: $size * 1px;
@@ -11,7 +13,7 @@
 .tikui-horizontal-spacing {
   display: flex;
 
-  @each $size in $tikui-size-spacing {
+  @each $size in size.$tikui-size-spacing {
     @include tikui-horizontal-spacing-column-size($size);
   }
 
diff --git a/src/documentation/organism/spacing/vertical-spacing/_vertical-spacing.scss b/src/documentation/organism/spacing/vertical-spacing/_vertical-spacing.scss
index cf867d5..c5ebe73 100644
--- a/src/documentation/organism/spacing/vertical-spacing/_vertical-spacing.scss
+++ b/src/documentation/organism/spacing/vertical-spacing/_vertical-spacing.scss
@@ -1,3 +1,5 @@
+@use '../../../token/size/size';
+
 @mixin tikui-vertical-spacing-line-size($size) {
   &.-s#{$size} > &--line {
     margin-bottom: $size * 1px;
@@ -9,7 +11,7 @@
 }
 
 .tikui-vertical-spacing {
-  @each $size in $tikui-size-spacing {
+  @each $size in size.$tikui-size-spacing {
     @include tikui-vertical-spacing-line-size($size);
   }
 }
diff --git a/src/documentation/quark/_quark.scss b/src/documentation/quark/_quark.scss
index d4a40b4..fba5cea 100644
--- a/src/documentation/quark/_quark.scss
+++ b/src/documentation/quark/_quark.scss
@@ -1,5 +1,5 @@
-@import 'link/link';
-@import 'list/list';
-@import 'paragraph/paragraph';
-@import 'text/text';
-@import 'title/title';
+@use 'link/link';
+@use 'list/list';
+@use 'paragraph/paragraph';
+@use 'text/text';
+@use 'title/title';
diff --git a/src/documentation/quark/list/_list.scss b/src/documentation/quark/list/_list.scss
index a60bdb8..6e758ab 100644
--- a/src/documentation/quark/list/_list.scss
+++ b/src/documentation/quark/list/_list.scss
@@ -1,7 +1,11 @@
-$tikui-list-color-text: $tikui-color-text-dark !default;
-$tikui-list-font-family: $tikui-font-family-main !default;
+@use '../../token/color/color';
+@use '../../token/font-family/font-family';
+@use '../../token/size/size';
+
+$tikui-list-color-text: color.$tikui-color-text-dark !default;
+$tikui-list-font-family: font-family.$tikui-font-family-main !default;
 $tikui-list-font-size: 16px !default;
-$tikui-list-line-height: $tikui-size-line-standard !default;
+$tikui-list-line-height: size.$tikui-size-line-standard !default;
 
 %tikui-list {
   margin: 0;
diff --git a/src/documentation/quark/paragraph/_paragraph.scss b/src/documentation/quark/paragraph/_paragraph.scss
index 8be1ad7..c083817 100644
--- a/src/documentation/quark/paragraph/_paragraph.scss
+++ b/src/documentation/quark/paragraph/_paragraph.scss
@@ -1,7 +1,12 @@
-$tikui-paragraph-color-text: $tikui-color-text-dark !default;
-$tikui-paragraph-font-family: $tikui-font-family-main !default;
+@use '../../token/color/color';
+@use '../../token/font-family/font-family';
+@use '../../token/size/size';
+@use '../text/text';
+
+$tikui-paragraph-color-text: color.$tikui-color-text-dark !default;
+$tikui-paragraph-font-family: font-family.$tikui-font-family-main !default;
 $tikui-paragraph-font-size: 16px !default;
-$tikui-paragraph-line-height: $tikui-size-line-standard !default;
+$tikui-paragraph-line-height: size.$tikui-size-line-standard !default;
 
 %tikui-paragraph {
   margin: 0;
@@ -14,5 +19,5 @@ $tikui-paragraph-line-height: $tikui-size-line-standard !default;
 
 @mixin tikui-paragraph {
   @extend %tikui-paragraph;
-  @include tikui-q-text-bold;
+  @include text.tikui-q-text-bold;
 }
diff --git a/src/documentation/quark/title/_title-base.scss b/src/documentation/quark/title/_title-base.scss
new file mode 100644
index 0000000..0683cf3
--- /dev/null
+++ b/src/documentation/quark/title/_title-base.scss
@@ -0,0 +1,19 @@
+@use '../../token/font-family/font-family';
+@use '../../token/size/size';
+@use '../../token/color/color';
+
+$tikui-title-line-height: size.$tikui-size-line-standard !default;
+$tikui-title-font-family: font-family.$tikui-font-family-main !default;
+$tikui-title-color-text: color.$tikui-color-text-dark !default;
+
+%tikui-title {
+  margin: 0;
+  padding: 0;
+  line-height: $tikui-title-line-height;
+  white-space: pre-line;
+  color: $tikui-title-color-text;
+  font-family: $tikui-title-font-family;
+  font-weight: bold;
+  hyphens: auto;
+  overflow-wrap: anywhere;
+}
diff --git a/src/documentation/quark/title/_title-brand.scss b/src/documentation/quark/title/_title-brand.scss
index 44338b3..7efbe05 100644
--- a/src/documentation/quark/title/_title-brand.scss
+++ b/src/documentation/quark/title/_title-brand.scss
@@ -1,3 +1,5 @@
+@use 'title-base';
+
 $tikui-title-brand-font-size: 24px !default;
 
 %tikui-title-brand {
diff --git a/src/documentation/quark/title/_title-main.scss b/src/documentation/quark/title/_title-main.scss
index f8c6769..e867e02 100644
--- a/src/documentation/quark/title/_title-main.scss
+++ b/src/documentation/quark/title/_title-main.scss
@@ -1,3 +1,5 @@
+@use 'title-base';
+
 $tikui-title-main-font-size: 76px !default;
 $tikui-title-main-bordered-border-width: 1px !default;
 
@@ -8,8 +10,10 @@ $tikui-title-main-bordered-border-width: 1px !default;
 }
 
 %tikui-title-main-bordered {
-  @supports (-webkit-text-stroke: $tikui-title-main-bordered-border-width $tikui-title-color-text) {
-    -webkit-text-stroke: $tikui-title-main-bordered-border-width $tikui-title-color-text;
+  @supports (
+    -webkit-text-stroke: $tikui-title-main-bordered-border-width title-base.$tikui-title-color-text
+  ) {
+    -webkit-text-stroke: $tikui-title-main-bordered-border-width title-base.$tikui-title-color-text;
     -webkit-text-fill-color: transparent;
   }
 }
diff --git a/src/documentation/quark/title/_title-part.scss b/src/documentation/quark/title/_title-part.scss
index 62966a0..9453724 100644
--- a/src/documentation/quark/title/_title-part.scss
+++ b/src/documentation/quark/title/_title-part.scss
@@ -1,3 +1,5 @@
+@use 'title-base';
+
 $tikui-title-part-font-size: 24px !default;
 
 %tikui-title-part {
diff --git a/src/documentation/quark/title/_title-section.scss b/src/documentation/quark/title/_title-section.scss
index 7c3ad9f..9ab7253 100644
--- a/src/documentation/quark/title/_title-section.scss
+++ b/src/documentation/quark/title/_title-section.scss
@@ -1,5 +1,6 @@
-$tikui-title-section-font-size: 46px !default;
+@use 'title-base';
 
+$tikui-title-section-font-size: 46px !default;
 %tikui-title-section {
   @extend %tikui-title;
 
diff --git a/src/documentation/quark/title/_title.scss b/src/documentation/quark/title/_title.scss
index c8b28da..b7ba364 100644
--- a/src/documentation/quark/title/_title.scss
+++ b/src/documentation/quark/title/_title.scss
@@ -1,20 +1,4 @@
-$tikui-title-line-height: $tikui-size-line-standard !default;
-$tikui-title-font-family: $tikui-font-family-main !default;
-$tikui-title-color-text: $tikui-color-text-dark !default;
-
-%tikui-title {
-  margin: 0;
-  padding: 0;
-  line-height: $tikui-title-line-height;
-  white-space: pre-line;
-  color: $tikui-title-color-text;
-  font-family: $tikui-title-font-family;
-  font-weight: bold;
-  hyphens: auto;
-  overflow-wrap: anywhere;
-}
-
-@import 'title-brand';
-@import 'title-main';
-@import 'title-part';
-@import 'title-section';
+@use 'title-brand';
+@use 'title-main';
+@use 'title-part';
+@use 'title-section';
diff --git a/src/documentation/style.scss b/src/documentation/style.scss
index 9944e59..74306c0 100644
--- a/src/documentation/style.scss
+++ b/src/documentation/style.scss
@@ -1,9 +1,9 @@
-@import 'token/token';
-@import 'quark/quark';
-@import 'atom/atom';
-@import 'molecule/molecule';
-@import 'organism/organism';
-@import 'template/template';
+@use 'token/token';
+@use 'quark/quark';
+@use 'atom/atom';
+@use 'molecule/molecule';
+@use 'organism/organism';
+@use 'template/template';
 
 .doc-iframe {
   border: 1px solid #000;
diff --git a/src/documentation/template/_template.scss b/src/documentation/template/_template.scss
index 53d6aac..9b36089 100644
--- a/src/documentation/template/_template.scss
+++ b/src/documentation/template/_template.scss
@@ -1 +1 @@
-@import 'template-page/template-page';
+@use 'template-page/template-page';
diff --git a/src/documentation/template/template-page/_template-page.scss b/src/documentation/template/template-page/_template-page.scss
index 2514c23..629d84e 100644
--- a/src/documentation/template/template-page/_template-page.scss
+++ b/src/documentation/template/template-page/_template-page.scss
@@ -1,4 +1,7 @@
-$tikui-template-page-large-breakpoint: $tikui-breakpoint-large !default;
+@use '../../token/breakpoint/breakpoint';
+@use '../../token/color/color';
+
+$tikui-template-page-large-breakpoint: breakpoint.$tikui-breakpoint-large !default;
 $tikui-template-page-spacing: 80px !default;
 $tikui-template-page-small-spacing: 2vw !default;
 $tikui-template-page-container-width: 1232px !default;
@@ -28,7 +31,7 @@ $tikui-template-page-nav-width: 340px !default;
     display: flex;
     flex-basis: 0;
     flex-grow: 1;
-    background-color: $tikui-color-background;
+    background-color: color.$tikui-color-background;
     padding: 0;
     min-height: 0;
     overflow: auto;
@@ -59,7 +62,7 @@ $tikui-template-page-nav-width: 340px !default;
   }
 
   &--header {
-    background-color: $tikui-color-shade-100;
+    background-color: color.$tikui-color-shade-100;
   }
 
   &.-atomized &--body {
diff --git a/src/documentation/token/_token.scss b/src/documentation/token/_token.scss
index 8149aa5..cd2e61c 100644
--- a/src/documentation/token/_token.scss
+++ b/src/documentation/token/_token.scss
@@ -1,4 +1,4 @@
-@import 'breakpoint/breakpoint';
-@import 'color/color';
-@import 'font-family/font-family';
-@import 'size/size';
+@use 'breakpoint/breakpoint';
+@use 'color/color';
+@use 'font-family/font-family';
+@use 'size/size';