Style Guide
Discover exquisite design and effortlessly craft the cocktail bar Framer website of your dreams—designed to captivate and impress every visitor.
Purchase the Template
Display
Aa Bb
Heading Display - 112px / 90% (Inter Tight)
Heading 1
Aa Bb
Heading 1 - 102px / 120% (Inter Tight)
Heading 2
Aa Bb Cc
Heading 2 - 42px / 122% (Inter Tight)
Heading 3
Aa Bb Cc
Heading 3 - 35px / 122% (Inter Tight)
Heading 4
Aa Bb Cc
Heading 4 - 26px / 122% (Inter Tight)
Heading 4B
Aa Bb Cc
Heading 4b - 26px / 100% (Inter Tight)
Heading 5
Aa Bb Cc
Heading 5 - 22px / 122% (Inter Tight)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Body XXL - 24px / 120% (Inter Tight)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Body XL Medium - 20px / 125% (Inter Tight)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Body XL - 20px / 120% (Inter Tight)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Body L Medium - 18px / 120% (Inter Tight)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Body Underline - 18px / 120% (Inter Tight)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Body Medium - 16px / 120% (Inter Tight)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Body Regular - 16px / 120% (Inter Tight)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Body S - 14px / 120% (Inter Tight)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Body XS Medium Up - 13px / 120% (Inter Tight)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Body XXS - 11px / 120% (Inter Tight)
What is a Rich Text element?
The Rich Text element allows you to compose and style headings, paragraphs, block quotes, images, and video all in one elegant place, rather than adding and formatting each individually. Simply double-click to create refined content with ease.
Editing static and dynamic content
A rich text element may be used with static or dynamic content. For static content, simply place it on any page and begin editing.
For dynamic content, simply add a rich text field to any collection, then connect a rich text element to it in the settings panel. Voilà!
How to customize the formatting of each rich text element
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be elegantly styled once a class has been added to the rich text element, using the "When inside of" nested selector system.
Elegant Text Example
Colors
Deep Charcoal / #0f100a
Light / #e6e0c6/
White / #ffffff
Black / #1A1A13
Charcoal Olive / #f2f2f2a
Smoky Olive / #504e42
Icons
All icons featured in the Koda Studio Template are sourced from the open-source icon library - Remix. They are therefore free for both personal and commercial use.
Fonts
The Velvet Shaker Template features a single Google Font, Inter Tight. This Google Font is entirely free for both personal and commercial use.
Buttons
Read more
Link with arrow
Complete CTA