example/lib/colors_section.dart

@@ -0,0 +1,46 @@
+import 'package:flutter/material.dart';
+import 'package:ui_kit/ui_kit.dart';
+
+class ColorsSection extends StatelessWidget {
+  const ColorsSection({super.key});
+
+  static final colorsList = [
+    primaryColor,
+    primaryHoverColor,
+    blackColor,
+    whiteColor,
+    errorColor,
+    successColor,
+    inputBgColor,
+    inputStrokeColor,
+    inputIcon,
+    placeholderColor,
+    descColor,
+    cardColor,
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: width(context) * 100,
+      height: height(context) * 10,
+      margin: EdgeInsets.only(top: height(context) * 5),
+      child: ListView.builder(
+        itemCount: colorsList.length,
+        scrollDirection: Axis.horizontal,
+        itemBuilder: (BuildContext context, int index) {
+          final currentItem = colorsList[index];
+          return Container(
+            width: 40,
+            height: 40,
+            margin: EdgeInsets.only(right: 10),
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(360),
+              color: currentItem,
+            ),
+          );
+        },
+      ),
+    );
+  }
+}

example/lib/fonts_section.dart

@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+import 'package:ui_kit/ui_kit.dart';
+
+class FontsSection extends StatelessWidget {
+  const FontsSection({super.key});
+
+  static final typographyText = [
+    title1Semibold,
+    title1ExtraBold,
+    title2Regular,
+    title2Semibold,
+    title2ExtraBold,
+    title3Regular,
+    title3Medium,
+    title3Semibold,
+    headlineRegular,
+    headlineMedium,
+    textRegular,
+    textMedium,
+    captionRegular,
+    captionSemibold,
+    caption2Regular,
+    caption2Bold,
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: width(context) * 100,
+      height: height(context) * 50,
+      child: ListView.builder(
+        itemCount: typographyText.length,
+        itemBuilder: (BuildContext context, int index) {
+          final currentItem = typographyText[index];
+          return Text('FontTypographyTest', style: currentItem);
+        },
+      ),
+    );
+  }
+}

example/lib/main.dart

@@ -1,4 +1,7 @@
+import 'package:example/colors_section.dart';
+import 'package:example/fonts_section.dart';
 import 'package:flutter/material.dart';
+import 'package:ui_kit/ui_kit.dart';
 
 void main() {
   runApp(const MainApp());
@@ -9,8 +12,16 @@ class MainApp extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return const MaterialApp(
+    return MaterialApp(
-      home: Scaffold(body: Center(child: Text('Hello World!'))),
+      debugShowCheckedModeBanner: false,
+      home: Scaffold(
+        body: SingleChildScrollView(
+          child: Container(
+            margin: EdgeInsets.symmetric(horizontal: width(context) * 5),
+            child: Column(children: [ColorsSection(), FontsSection()]),
+          ),
+        ),
+      ),
     );
   }
 }

lib/utils.dart

@@ -1,3 +1,9 @@
 // ignore_for_file: prefer_function_declarations_over_variables
 
+import 'package:flutter/widgets.dart';
+
 final letterSpacing = (fontSize, percent) => fontSize * percent / 100;
+
+final width = (context) => MediaQuery.of(context).size.width / 100;
+
+final height = (context) => MediaQuery.of(context).size.height / 100;