Core Components - Narek Ch

Core Foundation Components

Plate, Typography, and Icon
Building Blocks of Inked Colibri: Essential Components with Dynamic Color Control

Introduction

The Plate, Typography, and Icon components are the core foundation components of the Inked Colibri design system. Each of these components is crafted with a focus on dynamic color shading through opacity, allowing for a flexible and consistent approach to design. By using opacity as a method for color shading, these core components provide adaptability and clarity across various themes and backgrounds, ensuring our design system is both versatile and accessible.

Plate Component: Provides the base structure for backgrounds and borders with opacity-adjusted shading.
Typography Component: Controls text size, color, and opacity to ensure readability and consistency.
Icon Component: A flexible icon component that includes layered structure, opacity-based color variations, size adjustments, and the ability to swap icons from a predefined collection.

Together, these components form the backbone of Inked Colibri’s design principles, providing a consistent foundation for all future components in the system.

Plate Component

The Plate component serves as a foundational building block in our design system, designed to maintain visual consistency and prevent unintended blending with the background. It consists of three layers that work together to provide structure, color, and clarity, especially when transparency is involved.

Component Structure

Top Layer – Border
This layer provides the border for the final component, giving it a defined edge that helps separate it from surrounding elements. The border ensures the component maintains its shape and structure.
Middle Layer – Background Color
The background color layer adds the primary color to the component, which can be customized based on the design needs. This layer is key to the visual identity of the Plate and allows for flexible color changes.
Bottom Layer – Black/White Base
This base layer is set to black or white, depending on the theme (dark or light). It serves as a fallback background when the middle layer is transparent, ensuring that the Plate doesn’t visually merge with the background it’s placed on. This prevents blending issues, maintaining the component's visibility and clarity.

Plate Collection

In the Figma file, we’ve created separate background plates and border plates for each of our five essential colors: text, background, primary, secondary, and accent. This initial collection allows for flexible configuration at the foundational level, with individual plates designated specifically for backgrounds and borders. These variations form the basis for the final component, which will be assembled later. Each plate can be easily adjusted using Figma’s component properties, ensuring consistency as we move toward more complex components.

Core Plate Component

The Core Plate component is the foundational element in our design system, built with Boolean properties and adjustable controls to provide maximum flexibility. This component features:

Toggle options for White and Black bases to prevent unintended blending with backgrounds.
Background and Border controls with dropdowns for color and opacity, allowing for a wide range of configurations to suit different design needs.

With these properties, the Core Plate component includes 100 variants of background and 100 variants of border, creating a vast range of possible combinations when combined with the Boolean base toggles. This component will serve as the base plate for other components we’ll develop in the design system, ensuring a consistent look while maintaining adaptability for diverse contexts.

Typography Components

The Typography Component follows similar principles to the Plate component, though it’s more simplified in terms of layers. This component is designed to provide flexibility and readability control through three main variations.

Master Typography Component Structure

Top Layer: This layer represents the text color based on our five main colors with various opacity levels. These color and opacity variations will control the visual consistency in our next components.
Base Layer: Underneath, there is a black or white base to control opacity and prevent blending issues, similar to the Plate component but with a more straightforward setup.

Variations

We’ve created three variations for the Typography Component to handle different text fitting requirements:

Hug This variation allows the text to fit tightly within the container without any extra spacing.
Ellipsis The ellipsis variation will truncate the text with an ellipsis (...) if it overflows the container, ensuring a clean and controlled appearance.
Break Word In cases where text needs to wrap within a limited space, the Break Word variation allows the text to continue onto the next line.

These variations provide adaptable solutions for different design needs, making the Typography Component a versatile master component in our design system.

Typography Collection

Using our Typography Master Component, we’ve created a comprehensive collection of type styles aligned with the principles outlined in our design foundation. This collection includes:

Five opacity variations applied to each font size.
All available font size options in the system.
Five main colors (Text, Background, Accent, Primary, Secondary) applied across all font sizes and opacity levels.

By standardizing these variations, we ensure consistency and flexibility throughout the design system, enabling quick adaptation to diverse design contexts while maintaining the visual integrity of our typography.

Final Text Component

Our Final Text Component is built to provide full flexibility and control over typography settings, leveraging the Typography Master Component. This component includes all the options necessary for consistent and adaptable text styling across the design system.

In the Figma properties panel, this component allows adjustments for:

Size: Select from all font sizes defined in our type collection.
Color: Choose from the five main colors—Text, Background, Accent, Primary, and Secondary.
Opacity: Adjust the opacity levels to one of the five variations we’ve standardized.
Text Size Option: Choose between different layout settings, such as "Hug," which controls the text fitting.
Base Toggle: A Boolean option to show or hide the White Base, ensuring text clarity on any background.

This Final Text Component combines all variations in our collection, making it versatile and ready for use across different contexts in the design system.

Icon Components

This component completes the core set of elements that make up the design system’s foundation, making it adaptable for diverse design requirements.

Icon Component

The Icon Component follows the same layered principle as the Plate and Typography components, ensuring consistency across the design system. This component includes:

General Colors: Supports all five main colors—Text, Background, Accent, Primary, and Secondary.
Size Variations: Offers multiple size options that match the Typography component, ensuring visual harmony.
Opacity Levels: Each icon can be adjusted with different opacity levels to match the other core components.
Icon Swapping: Allows icons to be swapped from a predefined collection, providing flexibility in design without sacrificing consistency.