Premium HTML / CSS / JavaScript template ecosystem

PADEV Zenith

Built for speed. Designed to scale. A comprehensive collection of premium UI components for building future-ready digital experiences — in Zenith Night and Zenith Day.

Explore system View foundation

120+ Components

35+ Pages

99 Performance

Section A

Design foundation

Palette, type, rhythm, grid and geometry — identical anatomy in both modes.

01Colour palette

Primary

Sky Cyan#00E5FF

Zenith Blue#0066FF

Aurora Indigo#7B5CFF

Magenta#FF4DFF

Sunset Orange#FF7A00

Zenith Yellow#FFD600

Neutrals

#0A0F1C

#151C2E

#2A324D

#0F172A

#334155

#CBD5E1

Semantic

Success

Error

Warning

Info

Accent

Soft Violet

02Typography system

Space Grotesk Display · Headlines 300 · 400 · 500 · 600 · 700

DM Sans / Inter Body · Interface Clean · Geometric · Highly readable

Display weights

Light · Regular · Medium · Semibold · Bold

Body specimen

ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789

Night pairs Space Grotesk with DM Sans; Day switches the body face to Inter. Both families are installed locally under an SIL OFL licence.

03Type scale

Display 164 / 72 · -2%

Display 248 / 56 · -1%

Heading 1

36 / 44 · 0%

Body large16 / 24 · +2%

Body base14 / 20 · +2%

Small12 / 16 · +3%

04Spacing rhythm · 8pt

4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128

Section padding120px

Container1320px

Gutter24px

05Grid system

12 column · Desktop ≥ 1280px

8 column · Tablet ≥ 768px

4 column · Mobile ≥ 360px

06Border radius logic

4px · Tight

8px · Small

12px · Medium

16px · Large

24px · X-Large

Full · Pill

Section B

Material & lighting

Night composes deep glass and luminous rims; Day composes frosted glass and ambient shadow.

01Shadow language

Soft glowAmbient depth

ElevatedFloating cards

Deep glowFocus & hierarchy

CinematicHigh contrast

02Glass materials

Low

Medium

High

Deep

Tinted

Backdrop blur 20px · border 1px at 10% white · inner highlight on the top edge.

03Gradient system · Aurora

#00E5FF

#0066FF

#7B5CFF

#FF4DFF

#FF7A00

#FFD600

04Lighting principles

Aurora rimEdge highlights

Soft bloomSubtle glow

Neon accentsFocus points

ContrastLight vs dark

Section C

Complete UI kit

Every canonical component with its real states, wired and keyboard operable.

01Buttons

Default Hover Focus Active Disabled Loading Primary Secondary Outline Ghost Gradient Icon

Sizes

02Inputs

Default

SuccessLooks good.

ErrorThis field is required.

Disabled

03Textarea

Default

Filled

04Select

Default

Filled

Multi select Components Motion

Disabled

05Checkbox & radio

Unchecked Checked Indeterminate Disabled Radio Unselected Selected Disabled

06Switch

Off On Disabled

07Slider

Intensity

Value 72

08Progress

Linear72%

Striped45%

72%Circular

09Tabs

All projects

Explore limitless possibilities with a powerful, flexible and scalable component set.

10Cards

Glass card

Elegant glass surface with subtle depth.

Learn more

Gradient card

Vibrant gradients for emphasis.

Learn more

Outline card

Clean outline style with precision.

Learn more

Image card

Image content with overlay.

11Pricing cards

Starter $19 /mo Perfect for individuals

1 project
5 GB storage
Basic support

Popular Pro $49 /mo Best for professionals

10 projects
50 GB storage
Priority support

Enterprise $99 /mo For large teams

Unlimited projects
200 GB storage
24/7 support

12Feature cards

Lightning fast

Optimised for speed and performance.

Secure by design

Built with modern security standards.

Fully customisable

Easily customise to fit your brand.

13Statistic cards

12.4KUsers+12.5%

98.6%Uptime+2.4%

1.2MRequests+15.3%

320Projects-8.1%

14Table

Project delivery status
#	Project	Status	Team	Due date
01	Padev Website	In progress	AVMK+3	May 25, 2024
02	Zenith Dashboard	Completed	SLDK	May 21, 2024
03	Marketing Site	Review	JC+2	May 28, 2024
04	Mobile App	In progress	RM+4	Jun 02, 2024

15Timeline

Project startedMay 10, 2024
Design phaseMay 12, 2024
DevelopmentMay 15, 2024
LaunchMay 25, 2024

16Accordion

What is PADEV Zenith?

A premium frontend template ecosystem built for modern web applications.

Is it customisable?

Every surface is driven by semantic tokens, so rebranding is a token change.

Which technologies are used?

Semantic HTML, Bootstrap 5.3 behaviour and modular vanilla JavaScript.

17Drawer

Drawer title

A panel that slides in from the edge with useful actions.

18Sidebar

19Mega menu

20Navigation

PADEV HomeFeaturesDocsPricing Get started

21Modal

22Popover & tooltip

23Toast

SuccessYour changes have been saved.

ErrorSomething went wrong.

24Dropdown

25Avatar

PAAVMK+5 ADMK+3

26Badge

New Popular Beta Hot Sale

12 17 99+ 3

27Pagination

28Calendar

May 2024

29Date picker & search

Date

30Command palette

Go to dashboard ⌘ D Search projects ⌘ P Create new project ⌘ N Settings ⌘ ,

31Empty states

No data found There is no data to display. Create something amazing.

No results found Try adjusting your search or filters.

32Loading & skeleton

65%

33Blog cards

Design Building better UI with Zenith May 20, 2024 · 6 min read

Development JavaScript tips for 2024 May 18, 2024 · 8 min read

34Data visualisation

Area

Bars

72% Desktop 45% Tablet 25% Mobile 30%

35Testimonials

“PADEV Zenith has completely streamlined our workflow. The components are beautiful and incredibly easy to use.”

★★★★★

SJ Sarah JohnsonProduct Designer

36FAQ

Is PADEV Zenith free?

Licensing tiers are defined at release; the foundation is an internal product asset.

Can I use it commercially?

Commercial tiers are pending the owner's release decision.

Is dark mode included?

Zenith Night is the default; Zenith Day is a complete second material system.

37Iconography

Outline

Glass

Filled

38Footer

39Responsive behaviour

Mobile320 – 767px

4 columns · display 28/1.2 · navigation collapses to a drawer · focal mark stays above the fold.

Tablet768 – 1023px

8 columns · display 36/1.15 · matrices scroll horizontally instead of wrapping.

Laptop1024 – 1279px

Balanced spacing · panels regroup to keep dominant/secondary ratio.

Desktop1280px +

12 columns · container 1320px · full showroom density.

Section D

Motion design system

Movement is meaning. Every interaction has purpose.

01Global motion tokens

Ease defaultcubic-bezier(.22,1,.36,1)

Ease softcubic-bezier(.25,.46,.45,.94)

Ease bouncecubic-bezier(.68,-.55,.27,1.55)

Duration base600ms

Stagger base80ms

Glow intensity60%

02Duration scale

XS0.15s

S0.3s

M0.6s

L1.0s

XL1.6s +

03Interaction cues

Hover lift

Elevate, glow and focus — 220ms.

Glass reflection

Light sweep across premium surfaces — 3.2s.

Magnetic

Float

04Infinite marquee

All ambient loops pause when the tab is hidden and stop entirely under prefers-reduced-motion.