Do you find all information about us and our store?
01. Colors
Brand Colors
Primary / #1B478A
text-primary
bg-primary
border-primary
Primary light / #179DD8
text-primary-light
bg-primary-light
border-primary-light
Primary lighter / #BFE1F3
text-primary-lighter
bg-primary-lighter
border-primary-lighter
Secondary darker / #333333
text-secondary-darker
bg-secondary-darker
border-secondary-darker
Secondary / #3C3C3C
text-secondary
bg-secondary
border-secondary
Secondary lighter / #D9D9D9
text-secondary-lighter
bg-secondary-lighter
border-secondary-lighter
Service Colors
JaJuMa-Market
Market
#E0921D
text-market
bg-market
border-market
Market Light
#EFC88D
text-market-light
bg-market-light
border-market-light
Market Lighter
#FAEEDC
text-market-lighter
bg-market-lighter
border-market-lighter
JaJuMa-Develop
Develop
#EFB600
text-develop
bg-develop
border-develop
Develop Light
#FFE9A3
text-develop-light
bg-develop-light
border-develop-light
Develop Lighter
#FFF5D5
text-develop-lighter
bg-develop-lighter
border-develop-lighter
JaJuMa-Design
Design
#8DB433
text-design
bg-design
border-design
Design Light
#C6D999
text-design-light
bg-design-light
border-design-light
Design Lighter
#E9F0D7
text-design-lighter
bg-design-lighter
border-design-lighter
JaJuMa-Shop
Shop
#BF4D68
text-shop
bg-shop
border-shop
Shop Light
#F8D7DE
text-shop-light
bg-shop-light
border-shop-light
Shop Lighter
#FDECF0
text-shop-lighter
bg-shop-lighter
border-shop-lighter
JaJuMa-PIM
PIM
#077D99
text-pim
bg-pim
border-pim
PIM Light
#9ADFF0
text-pim-light
bg-pim-light
border-pim-light
PIM Lighter
#DAF3F9
text-pim-lighter
bg-pim-lighter
border-pim-lighter
JaJuMa-Consult
Consult
#9370A4
text-consult
bg-consult
border-consult
Consult Light
#CCBDD0
text-consult-light
bg-consult-light
border-consult-light
Consult Lighter
#E7E1EA
text-consult-lighter
bg-consult-lighter
border-consult-lighter
State Colors
Info
#2F80ED
text-info
bg-info
border-info
Success
#27AE60
text-success
bg-success
border-success
Warning
#27AE60
text-warning
bg-warning
border-warning
Error
#27AE60
text-error
bg-error
border-error
Black Colors
Black 1
#000000
text-black
bg-black
border-black
Black 2
#1D1D1D
text-black-2
bg-black-2
border-black-2
Black 3
#282828
text-black-3
bg-black-3
border-black-3
White
#FFFFFF
text-white
bg-white
border-white
Grey Colors
Grey 2
#4F4F4F
text-grey-2
bg-grey-2
border-grey-2
Grey 3
#828282
text-grey-3
bg-grey-3
border-grey-3
Grey 4
#BDBDBD
text-grey-4
bg-grey-4
border-grey-4
Grey 4
#E0E0E0
text-grey-5
bg-grey-5
border-grey-5
02. Typography
Aa
Heading
Line height and paragraph
spacing for heading is 1.1
x font size
Brown
Web Safe Font
Name
Font size
Line Height
Heading 1
72 px
79.2 px
Heading 2
56 px
61.6 px
Heading 3
40 px
44 px
Heading 4
32 px px
35.2 px
Heading 5
24 px
26.4 px
Heading 6
20 px
22 px
Aa
Body
Line height and paragraph
spacing for body text is : 1.4
x font size
Brown
Web Safe Font
Name
Font size
Line Height
Large Text Bold
Large Text Regular
20 px
28 px
Medium Text Bold
Medium Text Regular
18 px
25.2 px
Normal Text Bold
Normal Text Regular
16 px
22.4 px
Small Text Bold
Small Text Regular
14 px
19.6 px
03. Iconography
Font icons
Font awesome 6
How to use
04. Textfields
Input Rules:
Padding Left
→ 2 x font size
Padding Top-Bottom
→ 1 x font size
Padding Right(icon)
→ 2 x font size
Input Form ( No label & Status )
<input class="py-4 pl-8 bg-shop-lighter border border-shop" type="text" placeholder="Placeholder">
Input Form + Status ( No label )
Status
<input class="py-4 pl-8 bg-shop-lighter border border-shop" type="text" placeholder="Placeholder">
<p class="text-sm text-grey-2 mt-2">Status</p>
Input Form + Label
<label class="text-grey-2 font-bold mb-2 inline-block">Label</label>
<input class="py-4 pl-8 bg-shop-lighter border border-shop" type="text" placeholder="Placeholder">
Input Form + Label & Status
Status
<label class="text-grey-2 font-bold mb-2 inline-block">Label</label>
<input class="py-4 pl-8 bg-shop-lighter border border-shop" type="text" placeholder="Placeholder">
<p class="text-sm text-grey-2 mt-2">Status</p>
Input Icon + Label + Status
Status
<label class="text-grey-2 font-bold mb-2 block">Label</label>
<div class="relative inline-block">
<input class="py-4 pl-8 pr-14 bg-shop-lighter border border-shop" type="text" placeholder="Placeholder">
<div class="w-6 h-6 absolute absolute top-4 right-8 bg-grey-2"></div>
</div>
<p class="text-sm text-grey-2 mt-2">Status</p>
Text Area
<label class="text-grey-2 font-bold mb-2 inline-block">Label</label>
<textarea class="py-4 pl-8 pr-14 bg-shop-lighter border border-shop" cols="5" rows="7" placeholder="Placeholder"></textarea>
05. Selectors
Dropdown
<select class="form-select sorter-options py-4 px-6">
<option value="0" selected="selected">Dropdown</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>
Checkbox
<div class="field mb-4">
<input type="checkbox" value="checkbox3">
<label for="checkbox">Checkbox</label>
</div>
Radio Button
<div class="field mb-4">
<input type="radio" value="radio1">
<label for="radio1">Radio Button</label>
</div>
Toggle
Toggle OFF
Toggle ON
<label class="switch">
<input type="checkbox" checked>
<span class="slider"></span>
</label>
08. Buttons
Button Rules:
Padding Left Right → 5 x font size
Padding Top Bottom → 1 x font size
Full-width Button:
Left Right → determined by the device width
Top Bottom → 1 x font size
Color
Primary
<button type="button" class="btn btn-primary">
<span>Button Sample</span>
</button>
Secondary
<button type="button" class="btn btn-secondary">
<span>Button Sample</span>
</button>
Button with arrow
<button type="button" class="btn btn-primary py-3 justify-center">
<span class="font-bold text-2xl">Button</span>
<span><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 512 512" class="arrow w-8 h-8 ml-5" width="25" height="25"><!--! Font Awesome Free 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path d="M502.6 278.6l-128 128c-12.51 12.51-32.76 12.49-45.25 0c-12.5-12.5-12.5-32.75 0-45.25L402.8 288H32C14.31 288 0 273.7 0 255.1S14.31 224 32 224h370.8l-73.38-73.38c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l128 128C515.1 245.9 515.1 266.1 502.6 278.6z"></path></svg>
</span>
</button>
Size
Small
<button type="button" class="btn btn-small btn-primary">
<span>Button Sample</span>
</button>
Normal
<button type="button" class="btn btn-primary">
<span>Button Sample</span>
</button>
Medium
<button type="button" class="btn btn-medium btn-primary">
<span>Button Sample</span>
</button>
Large
<button type="button" class="btn btn-large btn-primary">
<span>Button Sample</span>
</button>
Full-width
Default
<button type="button" class="btn btn-primary">
<span>Button Sample</span>
</button>
Normal
<button type="button" class="btn btn-primary" style="background-color: #0f1f34;">
<span>Button Sample</span>
</button>
Active
<button type="button" class="btn btn-primary" style="background-color: #5a6b81;">
<span>Button Sample</span>
</button>
Disable
<button type="button" class="btn btn-primary" style="background-color: #E0E0E0;">
<span>Button Sample</span>
</button>
JaJuMa PIM
For All: Who Really Want To Go High With Their Online Business.
Quis tellus eget adipiscing convallis sit sit eget aliquet quis. Suspendisse eget egestas a elementum pulvinar et feugiat blandit at. In mi viverra elit nunc.
LEARN MORE- Push to deploy
- Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi. Odio urna massa nunc massa.
- SSL certificates
- Sit quis amet rutrum tellus ullamcorper ultricies libero dolor eget. Sem sodales gravida quam turpis enim lacus amet.
- Simple queues
- Quisque est vel vulputate cursus. Risus proin diam nunc commodo. Lobortis auctor congue commodo diam neque.
- Advanced security
- Arcu egestas dolor vel iaculis in ipsum mauris. Tincidunt mattis aliquet hac quis. Id hac maecenas ac donec pharetra eget.
<div class="hero-sections pb-10" style="background-image: linear-gradient(to left bottom, var(--bg-primary), var(--bg-primary-light), var(--bg-primary-lighter))">
<div class="container bg-transparent mx-auto py-12">
<div class="mx-auto flex flex-col items-start gap-10 px-6 lg:flex-row lg:px-8">
<div class="w-full lg:sticky top-28 lg:h-[68vh] 2xl:h-[75vh] shadow-lg rounded-3xl bg-white p-10 lg:w-1/3 bg-white/30 backdrop-blur-sm">
<h2 class="text-2xl mt-0 2xl:mt-10 font-semibold leading-8 tracking-tight text-primary">JaJuMa PIM</h2>
<p class="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">For All: Who Really Want To Go High With Their Online Business.</p>
<p class="mt-6 mb-2 text-base leading-7 text-gray-600">Quis tellus eget adipiscing convallis sit sit eget aliquet quis. Suspendisse eget egestas a elementum pulvinar et feugiat blandit at. In mi viverra elit nunc.</p>
<a href="#" class="mt-6 inline-flex pt-3 pb-2.5 text-lg px-8 btn btn-primary border-primary bg-primary hover:bg-primary-lighter hover:text-primary">LEARN MORE</a>
</div>
<div class="mt-5 w-full min-w-0 flex-1 md:mt-0 lg:w-2/3">
<dl class="grid grid-cols-1 gap-y-10 gap-x-8 lg:gap-y-16">
<div class="sticky top-28 lg:h-[68vh] 2xl:h-[75vh] shadow-lg rounded-3xl border border-gray-200 bg-white p-10">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary">
<!-- Heroicon name: outline/cloud-arrow-up -->
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z" />
</svg>
</div>
<dt class="mt-4 text-lg font-semibold leading-7 text-gray-900">Push to deploy</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">Morbi viverra dui mi arcu sed. Tellus semper adipiscing suspendisse semper morbi. Odio urna massa nunc massa.</dd>
</div>
<div class="sticky top-28 lg:h-[68vh] 2xl:h-[75vh] shadow-lg rounded-3xl border border-gray-200 bg-white p-10">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary">
<!-- Heroicon name: outline/lock-closed -->
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
</svg>
</div>
<dt class="mt-4 text-lg font-semibold leading-7 text-gray-900">SSL certificates</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">Sit quis amet rutrum tellus ullamcorper ultricies libero dolor eget. Sem sodales gravida quam turpis enim lacus amet.</dd>
</div>
<div class="sticky top-28 lg:h-[68vh] 2xl:h-[75vh] shadow-lg rounded-3xl border border-gray-200 bg-white p-10">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary">
<!-- Heroicon name: outline/arrow-path -->
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />
</svg>
</div>
<dt class="mt-4 text-lg font-semibold leading-7 text-gray-900">Simple queues</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">Quisque est vel vulputate cursus. Risus proin diam nunc commodo. Lobortis auctor congue commodo diam neque.</dd>
</div>
<div class="sticky top-28 lg:h-[68vh] 2xl:h-[75vh] shadow-lg rounded-3xl border border-gray-200 bg-white p-10">
<div class="flex h-10 w-10 items-center justify-center rounded-lg bg-primary">
<!-- Heroicon name: outline/finger-print -->
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M7.864 4.243A7.5 7.5 0 0119.5 10.5c0 2.92-.556 5.709-1.568 8.268M5.742 6.364A7.465 7.465 0 004.5 10.5a7.464 7.464 0 01-1.15 3.993m1.989 3.559A11.209 11.209 0 008.25 10.5a3.75 3.75 0 117.5 0c0 .527-.021 1.049-.064 1.565M12 10.5a14.94 14.94 0 01-3.6 9.75m6.633-4.596a18.666 18.666 0 01-2.485 5.33" />
</svg>
</div>
<dt class="mt-4 text-lg font-semibold leading-7 text-gray-900">Advanced security</dt>
<dd class="mt-2 text-base leading-7 text-gray-600">Arcu egestas dolor vel iaculis in ipsum mauris. Tincidunt mattis aliquet hac quis. Id hac maecenas ac donec pharetra eget.</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
Full Page