Heading 1 (4xl, bold)

Used for page titles

Heading 2 (3xl, semibold)

Used for section titles

Heading 3 (2xl, medium)

Used for subsection titles

Heading 4 (xl, medium)

Used for card titles

Body Large (lg) - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Used for intro paragraphs

Body (base) - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Default body text

Small (sm) - Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Used for captions and metadata

Extra Small (xs) - Lorem ipsum dolor sit amet

Used for labels and fine print

Carousel Navigation Buttons

Social Links (Magnetic)

Disabled State

Project Tags (Current Style)

Experience Card (with Spotlight)

Simple Card (no spotlight)

Projects Carousel

Operations copilot (secondary to the core dashboard)

BeyondAIIndustrial AICopilot

BeyondAI — KIRA POC: agentic copilot for Operations Advisor beside the core dashboard. Expert queries, in-chat charts, duplicate-live-to-draft and condition edits, Beyond Search FAQ in progress, explicit blocked paths (autonomy, empty plans, draft deletes). Qatar Energy and QatarCool; pipeline and two ongoing pilots.

1 of 7

Toolkit Carousel

TextEffect - Fade (per word)

This is a fade text effect that animates word by wordThis is a fade text effect that animates word by word

TextEffect - Blur (per char)

Blur effect per characterBlur effect per character

TextEffect - Slide (per word)

Slide effect per wordSlide effect per word

TextMorph

Morphing text effect

TextLoop

Project Link (with underline animation)

Standard Link

Sidebar Navigation (Collapsible)

On This Page (Quick Jump)

Animated Background (Tabs)

Spotlight Effect (Hover to see)

Magnetic Elements