@ahmed-shareef-ogp/pgo-uif

PGO Design Foundations for Tailwind CSS v4. Provides the full design token layer — colors, typography, spacing, shadows, radii, and grid utilities — as a single CSS import.

Installation

npm install @ahmed-shareef-ogp/pgo-uif

Setup

1. Install Tailwind CSS v4

# Vite
npm install tailwindcss @tailwindcss/vite

# CLI
npm install tailwindcss @tailwindcss/cli

2. Configure Vite (if using Vite)

// vite.config.js
import tailwindcss from '@tailwindcss/vite';

export default {
  plugins: [tailwindcss()],
};

3. Import in your main CSS file

/* app.css */
@import "tailwindcss";
@import "@ahmed-shareef-ogp/pgo-uif";

No tailwind.config.js needed.

Fonts

All font files are bundled with the package — no separate downloads needed. The @font-face declarations in the CSS reference them via relative paths (./fonts/) that resolve correctly once installed.

| File | Family | Usage | |------|--------|-------| | PlusJakartaSans-Regular/Medium/SemiBold/Bold.woff2 | Plus Jakarta Sans | Default UI font (font-sans) | | PGFont-Regular.otf | PG Font | Display/heading font (font-display) | | PGFont-Thaana.ttf | PGFont-Thaana | Thaana script (font-thaana) | | MVFaseyha.woff2 | MVFaseyha | Faseyha script (font-faseyha) |

Token Reference

All tokens are available as Tailwind utilities and as CSS custom properties (var(--color-brand-500), etc.).

Colors

bg-brand-600        text-neutral-900      border-red-500
bg-brand-600/50     <!-- opacity modifier -->
ring-brand-500

Palettes: neutral, brand, golden-oak, graphite, ivory, red, orange, yellow, green, blue

Typography

Size + line-height:

text-xs   (12px/16px)       text-sm    (14px/20px)
text-sm-tight (14px/14px)   text-base  (16px/24px)
text-lg   (18px/28px)       text-xl    (20px/30px)
text-2xl  (24px/32px)       text-3xl   (30px/38px)
text-4xl  (36px/44px)       text-5xl   (48px/60px)
text-6xl  (60px/72px)       text-7xl   (72px/90px)

text-sm-tight is for icon labels and tags (14px with collapsed line-height).

Families:

font-sans       Plus Jakarta Sans (UI default)
font-display    PG Font (headings)
font-thaana     PGFont-Thaana
font-faseyha    MVFaseyha

Weights:

font-regular    font-medium    font-semibold    font-bold

Spacing

Named semantic scale — works with p-, m-, gap-, w-, h-, inset-, etc.

none  xxs(2px)  xs(4px)  sm(6px)  md(8px)  lg(12px)  xl(16px)
2xl(20px)  3xl(24px)  4xl(32px)  5xl(40px)  6xl(48px)
7xl(64px)  8xl(80px)  9xl(96px)  10xl(128px)  11xl(160px)

Border Radius

rounded-none   rounded-xxs(2px)   rounded-xs(4px)   rounded-sm(6px)
rounded-md(8px)   rounded-lg(10px)   rounded-xl(12px)   rounded-2xl(16px)
rounded-3xl(20px)   rounded-4xl(24px)   rounded-full

Shadows

shadow-xs    shadow-sm    shadow-md    shadow-lg    shadow-xl
shadow-2xl   shadow-3xl   shadow-xs-skeuomorphic
shadow-elevation-0  shadow-elevation-1  shadow-elevation-2  shadow-elevation-3  shadow-elevation-4

Focus rings (use as utility classes):

shadow-focus          blue/brand ring for interactive elements
shadow-focus-error    red ring for error state
focus-ring            shorthand utility
focus-ring-error      shorthand utility

Backdrop Blur

backdrop-blur-sm(8px)   backdrop-blur-md(16px)
backdrop-blur-lg(24px)  backdrop-blur-xl(40px)

Responsive Breakpoints

sm:   ≥ 640px
md:   ≥ 768px    ← tablet
lg:   ≥ 1024px
xl:   ≥ 1440px   ← desktop  (shifted from TW default 1280px)
2xl:  ≥ 1920px

Width Tokens

No auto-generated max-w-* to avoid conflicts with TW's built-in scale. Reference via CSS variable syntax:

<div class="max-w-(--width-xl)">...</div>
<div class="w-(--width-md)">...</div>

Available sizes: xxs(320px) xs(384px) sm(480px) md(560px) lg(640px) xl(768px) 2xl(1024px) 3xl(1280px) 4xl(1440px) 5xl(1600px) 6xl(1920px)

Grid

<div class="container">          <!-- responsive horizontal padding -->
<div class="container-content">  <!-- max-width only, no padding -->
<div class="grid-layout">        <!-- responsive 4 / 6 / 12 column grid -->
  <div class="col-span-6">...</div>
  <div class="col-span-full">...</div>
</div>

Dhivehi / RTL Text

Always add dir="rtl" to the element:

<p  class="dhivehi-base" dir="rtl">ދިވެހި</p>
<h1 class="dhivehi-5xl"  dir="rtl">ދިވެހި</h1>