Style Guide

Typography & Elements

Heading 1 (h1)

Heading 2 (h2)

Heading 3 (h3)

Heading 4 (h4)

Heading 5 (h5)
Heading 6 (h6)

This is a standard paragraph of text. Bold, italic, underline, small, sub, sup, inline code, and a link are all shown here.

Blockquote: “Design is not just what it looks like and feels like. Design is how it works.”
  • Unordered list item one
  • Unordered list item two
  • Unordered list item three
  1. Ordered list item one
  2. Ordered list item two
  3. Ordered list item three
// Block code sample
function helloWorld() {
  console.log('Hello, world!');
}

Horizontal rule above.
Line break here.

Color Theme

Primary
.primary
Secondary
.secondary
Accent
.accent
Destructive
.destructive
Muted
.muted
Card
.card
Background
.background
Border
.border

Button

Badge

Default
Secondary
Destructive
Outline

Input

Textarea

Card

Default

Card content

Hovered

Card content

Disabled

Card content

Tabs

Tab 1 content

Switch

Checkbox

Label

Accordion

Avatar

JDAB

Tooltip

Theme Toggle

Calendar

March 2026
1234567
891011121314
15161718192021
22232425262728
2930311234

Bento Grid

Demo

Timeline

Our Collaboration Process

A systematic approach to transform your digital product from concept to reality.

2020

Foundation

2021

Growth

Testimonial

Verified Customer
UI/UX DesignProject Duration: 6 months
"This is a testimonial."
J
Jane Doe
Designer · Acme Inc.
NY, USA
Tech

Service Buttons

Marquee

Scrolling content here
Scrolling content here

Flags

Language Switcher

Timezone Selector

Currency Selector