Style Guide
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Satoshi Variable
Open Sans
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Style Guide is a general reference tool for creating new pages on the site map easily. Copy pasta from this page for ease of page building.
This is a paragraph example. All typo uses REM and scaling height values (0.75 - 1.5) following Finsweet's excellent Client-First Style System.
যদি তোর ডাক শুনে কেউ না আসে তবে একলা চলো রে । একলা চলো একলা চলো একলা চলো একলা চলো রে ।। যদি কেউ কথা না কয়, ওরে ও অভাগা,যদি সবাই থাকে মুখ ফিরায়ে সবাই করে ভয় তবে পরান খুলে ও তুই মুখ ফুটে তোর মনের কথা একলা বলো রে ।।যদি সবাই ফিরে যায়, ও রে ও অভাগা, যদি গহন পথে যাবার কালে কেউ ফিরে না চায় তবে পথের কাঁটা ও তুই রক্তমাখা চরণতলে একলা দলো রে ।।যদি আলো না ধরে, ওরে ও অভাগা, যদি ঝড়-বাদলে আঁধার রাতে দুয়ার দেয় ঘরে তবে বজ্রানলে আপন বুকের পাঁজর জ্বালিয়ে নিয়ে একলা জ্বলোরে ।।Text Link
Colors
Global colors (white, grey, black) show transition of thought to action in section breaks.
Journal + Primary
Four primary colors for quick reference to curriculum domain.
Social Legislation
d.conomy
Soma
Bhavana
Emoji
Digital Visual language, refer to Emoji index for current usage. 1/2/3/4 rem, scaling height values from body settings.
Buttons
To push. Add colored buttons to black backgrounds.
Icons
Main icon represents the Tesseract as intersecting squares symbolizing the four domains of Sustainability and the domains of Consciousness Raising. Inspired by the design of a Dharmachakra via Star of Lakshmi, in black and white with color swap usage.
Forms
Contact Form and reCaptcha setup.
Components
Repeated components for page structures. Containers for H2 content with H3 wraps.
Lists
Small to Large item lists.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Tabs
Menu can be flipped with _display-vertical. Rename tabs in Webflow menu.
Dropdown
8px rounded edges, (on hover, white background on main component wrapper)
🙈 Seeing
🙉 Hearing
🙊 Speaking
Wraps
Auto-Justification for container (MAX: 1440) with a 5% bottom margin for space/sequencing. Wrap H2 and H3 headings
Cards
8px rounded edges, 5/25/-5 #000 (.1) shadow (on hover, .2 ; on press .15), 5% bottom margin.
Note: Circles of Society emojis are in a rounded edge card to represent a thematic usage of the four domains. Circle card will be reserved for profile photos of references (if ever, lol) and web/app designs.
Two most common combo classes
Check back soon!
Grids
.grid (2x2 default block), __elements: __grid1x1, __grid2x1, __grid3x1, __grid4x1, __grid5x1, __grid6x1, __grid7x1, __grid8x1
2x2 (default)
1x1
2x1
3x1
4x1
5x1
6x1
7x1
8x1
Columns
Standard two column and __column_flip display.
Support My Work
See through the illusion
🌿 SuperPeer Membership
Hi, are you interested in learning about Sustainability and helping to improve your community? I'm creating educational content from my Sustainability Academy and using Superpeer for member exclusive content and access.
Join my SuperPeer community and gain premium services to:
🤗 My Gratitude & Thanks
📫 Newsletter
📢 Q&A
🧪 WIP Updates
🎁 Exclusive Content
🎟️ Early Access Content
☄️ Exploration Roadmaps
