About this page

This page is a live reference for the @kartikarora brand design system — a unified visual language used across all of Kartik's personal projects, talks, and web properties. Every component, color token, and typography rule shown here is driven by the brand CDN, with no local overrides.

Use this page to verify how components render in context, check color and spacing tokens, and copy-paste markup for new branded pages.

AI Agent Skill Installation

Install the official @kartikarora brand skills to give your AI coding agent (Antigravity, Claude Code, Cursor, Codex, etc.) full knowledge of the design system and Material 3 Compose theme definitions.

The skills enforce CDN-first usage, CSS variable tokens, semantic brand classes, system color schemes, and native Material 3 theme mapping for Jetpack Compose & Compose Multiplatform (CMP).

npx skills install https://distribute.kartikarora.me/ai/kartikarora-brand.skill

npx skills install https://distribute.kartikarora.me/ai/kartikarora-compose-theme.skill

npx skills install -g https://distribute.kartikarora.me/ai/kartikarora-brand.skill

npx skills install -g https://distribute.kartikarora.me/ai/kartikarora-compose-theme.skill

Hero Section

Standard hero section for landing pages with profile image, title, and optional typing animation.

Kartik Arora

Brand Demo Page

Showcasing the standardized brand components for a consistent design system.

Generic Card - Grid

Used for project grids and other multi-column content layouts.

Demo Project

2026

A sample project description showcasing the grid card layout and its internal structure.

Android Kotlin Compose

code Code open_in_new Demo

Analytics Tool

2025

Another example of a grid-based card with multiple tags and links.

TypeScript Node.js

code Code

Glassmorphic Card info This is a premium translucent card demonstrating the new v1.6.0 upgrades (Glassmorphism, Tooltips & Badges).

Win

A beautiful translucent card utilizing backdrop blur filters and translucent state badges.

Glassmorphism CSS Tooltips

v1.6.0 Upgrade

Generic Card - List

Used for talks, articles, or other chronological list content.

Exploring Gemini CLI

AI Tooling

Delivered at:

• location_on Google I/O '25 (May 2025)

Future of Android Development

Android Kotlin

Delivered at:

• location_on DevFest Sydney (Nov 2024)

Navigation

The brand navigation is fixed to the top of the page with a blur effect and adapts to mobile screens automatically.

Layout & Sections

Standard containers and sectioning for consistent vertical and horizontal rhythm.

Typography

Heading 1 - Main Title

Heading 2 - Section Title

Heading 3 - Subsection

Heading 4 - Small Section

Heading 5 - Minor Section

Heading 6 - Smallest

This is a regular paragraph with a hyperlink. The quick brown fox jumps over the lazy dog. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is muted text for secondary information using .text-muted.

Buttons

Translucent Badges & Tooltips

Newly added v1.6.0 design elements for highlighting states and accessible floating descriptions.

Active Focus Outlines

Custom focus outline specifications targeting `:focus-visible` to satisfy brand guidelines and accessibility requirements.

Tabs

A toggleable control for switching between mutually exclusive options. It features a sliding background indicator for smooth transitions.

Selected: All Projects

Color Palette

Code Blocks & Highlighting

Automatic syntax highlighting for various languages using the brand palette.

// Example JavaScript code
function greet(name) {
  const message = `Hello, ${name}!`;
  console.log(message);
  return message;
}

const result = greet('World');

// Example Kotlin code
@Composable
data class User(val name: String)

fun greetUser(user: User): String {
    return "Hello, ${user.name}!"
}

val user = User(name = "Kartik")
println(greetUser(user))

// Example Swift code
import SwiftUI

struct User: Identifiable {
    let id = 1_000
    var name: String
}

@MainActor
func greetUser(_ user: User) -> String {
    guard !user.name.isEmpty else { return "Hello, World!" }
    return "Hello, \(user.name)!"
}

let user = User(name: "Kartik")
print(greetUser(user))

Quick Start Steps

Footer

Standardized footer with social links and copyright information.