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

October 2026
27282930123
45678910
11121314151617
18192021222324
25262728293031

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