Templota — Premium Design Kit

Typography

Templota-style spacing & hierarchy

Every size is balanced for reading comfort, with tight letter-spacing and generous line height.

The Art of Quiet Design

This is a beautiful paragraph that feels effortless to read, with just the right amount of spacing and contrast.

This is a beautiful paragraph that feels effortless to read.

Subtle & refined

Interface text

Color Palette

Bold, warm & sophisticated

Colors that make a statement — designed with confidence and premium feel.

bg-primary

#f2f4f3 / #0b090a

bg-card

#ffffff / #1a1718

bg-card-hover

#edefee / #242021

text-primary

#1a1817 / #ece8e5

text-secondary

#3d3a36 / #c5c0ba

text-tertiary

#6b6761 / #908b85

accent

#ff6b6b

accent-dim

rgba(255,107,107,0.12)

border

rgba(0,0,0,0.05)

Buttons

Premium, tactile & responsive

Clean, subtle, with meaningful hover and active states — no shadows, just pure design.

Primary

Secondary

Ghost

With icon

Cards

Elevated surfaces for content

Subtle hover states that feel premium — no shadows, just refined borders and background shifts.

Featured

Quiet design

A calm interface that stays out of the way, letting you focus on what matters.

Research

Reading-first

Typography and spacing optimized for hours of comfortable reading.

Glassmorphism

Premium material

A sophisticated glass effect that adds depth without distraction.

Inputs

Clean, calm form fields

Subtle focus states and comfortable padding for effortless data entry.

Email address We'll never share your email.

Search Type to filter results.

Message

Badges

Subtle status indicators

Default Active Premium Soft Subtle

Pagination

Clean navigation controls

Interactions

Meaningful micro-motions

Every interaction has a purpose — subtle elevation, color shifts, and smooth transitions.

Hover me

✦

Button hover

Card hover

Hover card

Subtle elevation on hover.