Color Palette

Our color palette is designed to reflect our brand values of innovation, trust, and reliability.

Primary Colors

Primary

oklch(69.07% 0.1428 160.38)

#2A9D8F

Secondary

oklch(92.8% 0 0)

#EDEDED

Accent

oklch(97.02% 0 0)

#F7F7F7

Destructive

oklch(56.94% 0.1779 29.23)

#E76F51

Background Colors

Background

oklch(98.51% 0 0)

#FCFCFC

Foreground

oklch(23.93% 0 0)

#3D3D3D

Card

oklch(92.8% 0 0)

#EDEDED

Border

oklch(91.58% 0 0)

#E9E9E9

Chart Colors

Chart 1

oklch(69.07% 0.1428 160.38)

#2A9D8F

Chart 2

oklch(56.68% 0.1428 160.38)

#1F7A70

Chart 3

oklch(52.23% 0.1428 160.38)

#186A62

Chart 4

oklch(48.07% 0.1428 160.38)

#145B54

Chart 5

oklch(37.39% 0.1428 160.38)

#0D3F3A

Typography

Our typography system uses Reem Kufi, a modern Arabic sans serif font with Latin support, designed for clarity and readability across all platforms.

Brand Font: Reem Kufi

Import URL:

@import url("https://fonts.googleapis.com/css2?family=Reem+Kufi:[email protected]&display=swap");

HTML Link:

CSS Usage:

font-family: 'Reem Kufi', sans-serif;

Regular (400)

The quick brown fox jumps over the lazy dog.

Medium (500)

The quick brown fox jumps over the lazy dog.

Semibold (600)

The quick brown fox jumps over the lazy dog.

Bold (700)

The quick brown fox jumps over the lazy dog.

Headings

Heading 1

Font: Reem Kufi | Size: 3rem (48px) | Weight: Bold (700)

Heading 2

Font: Reem Kufi | Size: 2.25rem (36px) | Weight: Bold (700)

Heading 3

Font: Reem Kufi | Size: 1.875rem (30px) | Weight: Bold (700)

Heading 4

Font: Reem Kufi | Size: 1.5rem (24px) | Weight: Semibold (600)

Heading 5

Font: Reem Kufi | Size: 1.25rem (20px) | Weight: Semibold (600)

Body Text

Large Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Font: Reem Kufi | Size: 1.125rem (18px) | Weight: Regular (400)

Regular Body Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Font: Reem Kufi | Size: 1rem (16px) | Weight: Regular (400)

Small Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Font: Reem Kufi | Size: 0.875rem (14px) | Weight: Regular (400)

UI Components

Standardized components for creating consistent user interfaces.

Buttons

Primary Button Secondary Button Destructive Button Muted Button

Cards

Basic Card

Simple card component for displaying content.

Feature Card

Highlight key features with these cards.

Learn More

Accent Card

For highlighting important information.

Usage Guidelines

Best practices for applying the ForgeX brand consistently.

Do's

✓ Use the primary color for main CTAs and important UI elements
✓ Always use Reem Kufi font for all text elements
✓ Apply the correct border-radius to all components
✓ Follow the typography hierarchy for clear content structure

Don'ts

✗ Use fonts other than Reem Kufi for any branded materials
✗ Use colors outside of the defined palette
✗ Modify the logo or apply effects that alter its appearance
✗ Mix different font weights inappropriately