KataCSS — Style Showcase

Padding Scale

kata-p-{n} · kata-px-{n} · kata-py-{n} · kata-pt/pb/pl/pr-{n} — scale: n × 0.25rem

p-1

p-2

p-4

p-8

p-12

p-16

p-24

kata-p-2

kata-p-4

kata-p-6

kata-px-8 kata-py-2

kata-pt-6 kata-pb-2 kata-px-4

Margin Scale + Auto

kata-m-{n} · kata-mx-auto · kata-ml/mr-auto — same 0.25rem scale

kata-mx-auto (centered)

m-2

m-4

m-8

kata-ml-auto →

Width Utilities

kata-w-{n} · kata-w-full · kata-w-half · kata-w-auto · kata-w-screen · kata-w-min · kata-w-max · kata-w-fit

kata-w-full

kata-w-half

kata-w-48 (12rem)

kata-w-fit

Height Utilities

kata-h-{n} · kata-h-full · kata-h-auto · kata-h-fit · kata-h-screen

h-8

h-16

h-24

h-32

h-fit

Flex Direction & Wrap

kata-flex · kata-flex-row · kata-flex-col · kata-flex-wrap · kata-flex-nowrap

flex-row

A

B

C

flex-col

A

B

C

Justify & Align

kata-justify-start · center · end · between · around · evenly | kata-items-start · center · end · baseline · stretch

justify-between

A

B

C

justify-center

A

B

items-center

A

B

Gap

kata-gap-{n} · kata-gap-x-{n} · kata-gap-y-{n}

gap-2 (0.5rem)

1

2

3

gap-6 (1.5rem)

1

2

3

gap-x-8 gap-y-2

1

2

3

Font Size

kata-text-xs · sm · base · lg · xl · 2xl · 3xl · 4xl · 5xl · 6xl

kata-text-xs — 0.75rem / 1rem

kata-text-sm — 0.875rem

kata-text-base — 1rem

kata-text-lg — 1.125rem

kata-text-xl — 1.25rem

kata-text-2xl — 1.5rem

kata-text-3xl — 1.875rem

kata-text-4xl

kata-text-5xl

Font Weight

kata-font-thin → black (100–900)

Thin XLight Light Normal Medium SemiBold Bold X-Bold

Font Family

kata-font-sans · kata-font-serif · kata-font-mono

kata-font-sans — The quick brown fox

kata-font-serif — The quick brown fox

kata-font-mono — The quick brown fox

Text Alignment

kata-text-left · center · right · justify

kata-text-left — Left aligned text

kata-text-center — Centered text

kata-text-right — Right aligned

Text Decoration & Style

kata-underline · kata-overline · kata-line-through · kata-italic · kata-decoration-wavy & more

kata-underline kata-overline kata-line-through decoration-wavy decoration-dashed kata-italic

Line Height & Letter Spacing

kata-leading-{none|tight|snug|normal|relaxed|loose} · kata-tracking-{tighter…widest}

leading-none

Line height
set to one.
Very tight.

leading-relaxed

Line height
set to 1.625.
Much airier.

leading-loose

Line height
set to 2.
Very open.

tracking scale

tracking-tighter

tracking-normal

tracking-wide

tracking-widest

Background Colors

kata-bg-{color} · kata-text-{color} · kata-border-{color}

gray-100

gray-300

gray-500

gray-700

gray-900

red-100

red-300

red-500

red-700

red-900

orange-100

orange-300

orange-500

orange-700

yellow-100

yellow-300

yellow-500

yellow-700

green-100

green-300

green-500

green-700

green-900

teal-100

teal-300

teal-500

teal-700

blue-100

blue-300

blue-500

blue-700

blue-900

indigo-100

indigo-300

indigo-500

indigo-700

purple-100

purple-300

purple-500

purple-700

pink-100

pink-300

pink-500

pink-700

black

white

transparent

Text Color Samples

kata-text-red-500 kata-text-blue-700 kata-text-green-500 kata-text-purple-500 kata-text-orange-500 kata-text-teal-500 kata-text-pink-500 kata-text-gray-400

Border Color

border-red-500

border-blue-500

border-green-500

border-4 purple-500

border-8 orange-500

50+ Tea & Chai Named Colors

kata-bg-kata-chai-{name} · kata-text-kata-chai-{name} · kata-border-kata-chai-{name}

South Asian Chais

masala

karak

kashmiri

noon

ginger

cardamom

elaichi

black

saffron

tulsi

foam

Japanese Greens

matcha

matcha-latte

ceremonial

sencha

hojicha

genmaicha

gyokuro

Oolong & Chinese

oolong-light

oolong-dark

dahongpao

puerh

longjing

tieguanyin

chrysanthemum

baimudan

yinzhen

Blacks · African · Western · Herbal

assam

darjeeling

ceylon

nilgiri

kenya

rooibos

earl-grey

eng-breakfast

chamomile

peppermint

hibiscus

lavender

rosehip

Middle Eastern · South American

moroccan-mint

irani

samovar

saffron-persian

yerba-mate

mate-amargo

cascara

masala matcha kashmiri saffron earl-grey hibiscus

Border Width & Style

kata-border-{0|1|2|4|8} · kata-border-{t|r|b|l} · kata-border-{solid|dashed|dotted|double|none}

border
solid

border-2
dashed

border-4
dotted

border-4
double

border-8
red-500

border-t
only

border-b
red

border-l
blue

Border Radius

kata-rounded-{none|sm|md|lg|xl|2xl|3xl|full}

pill shape

Position Utilities

kata-static · kata-relative · kata-absolute · kata-fixed · kata-sticky · kata-top/right/bottom/left-{n} · kata-inset-0

relative + absolute

parent (relative)

kata-top-2 kata-right-2

absolute + inset-0

kata-inset-0

Z-Index Stack

kata-z-{0…96} · kata-z-auto

z-10

z-20

z-30 (top)

Box Sizing

kata-box-border · kata-box-content

kata-box-border (padding inside)

width:160px total

kata-box-content (padding outside)

width:160px + padding

Background Utilities

kata-bg-cover · kata-bg-contain · kata-bg-center · kata-bg-no-repeat · kata-bg-none

bg-cover

bg-contain

kata-bg-none

Cursor Variants

kata-cursor-{auto|default|pointer|wait|text|move|not-allowed|grab}

pointer

wait

text

move

not-allowed

grab

default

Visibility

kata-visible · kata-invisible

kata-visible — I am visible

kata-invisible — (takes space but invisible)

element here is invisible (takes up space)

Cards, Badges & Buttons built with kata-* only

All styles below applied exclusively using kata-* class utilities

🍵

Matcha Latte

japanese green

Shade-grown ceremonial grade. Whisked to a frothy finish.

organic japan

exclusive blend

Karak Chai

Gulf-style strong brew. Heavy milk, simmered low.

Order Now

Status Badges

● active ● pending ● error ● inactive

Buttons