🐒

Style Guide

Quicksand

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. Not everything is contained in this style guide. CMS pages are a pain in the ass to style specific elements, Webflow selectors will have the CMS-* tag for building specific displays of CMS data. Webflow also has a weird CMS limitation where you can only have 1 multi-CMS item (e.g. Literature with a separate Reference CMS embedded as the author), this limits the Wiki-Profile capability for Media Studies.

Oh well. This is a paragraph example.

যদি তোর ডাক শুনে কেউ না আসে তবে একলা চলো রে । একলা চলো একলা চলো একলা চলো একলা চলো রে ।। যদি কেউ কথা না কয়, ওরে ও অভাগা,যদি সবাই থাকে মুখ ফিরায়ে সবাই করে ভয় তবে পরান খুলে ও তুই মুখ ফুটে তোর মনের কথা একলা বলো রে ।।যদি সবাই ফিরে যায়, ও রে ও অভাগা, যদি গহন পথে যাবার কালে কেউ ফিরে না চায় তবে পথের কাঁটা ও তুই রক্তমাখা চরণতলে একলা দলো রে ।।যদি আলো না ধরে, ওরে ও অভাগা, যদি ঝড়-বাদলে আঁধার রাতে দুয়ার দেয় ঘরে তবে বজ্রানলে আপন বুকের পাঁজর জ্বালিয়ে নিয়ে একলা জ্বলোরে ।।
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

The Radical

Aditi

Emoji

Digital Visual language, refer to Emoji index for current usage. 1/2/3/4 em

🐒
🐒
🐒
🐒

Buttons

To push. Add colored buttons to black backgrounds.

Footer Social Buttons

Icons

Ashtalakshmi or an intersecting Penrose-Carter diagram with a singularity or the Tetrad of Media Effects or a Mandala (you decide).

Represents the Tesseract with interconnecting squares symbolizing Sustainability and Consciousness Raising.

Forms

Contact Form and reCaptcha setup.

Thank you! Your message has been received!
Try again. Name, Email, and Message need to be filled out, or email me: ravi@ravibajnath.design

Components

Repeated components for page structures. Containers for H2 content with H3 wraps.

Wraps

Auto-Justification for container with a 5% bottom margin for space/sequencing. Wrap H2 and H3 headings

wrap : general, non-flex aligned || All purpose div wrapper
wrap, just-mid : Flex - Vertical / Center / Center || Section headers, centered emphasis
wrap, just-right : Flex - Vertical / End / Center || Grids and complex page layout

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.

Basic Card.
just-mid
Journal Card (tag) for CMS background. Connects light primary background from Webflow toggle when embedded in collection. Tagging isn't necessary but signals where there's a journal card in selector menu.

Grids

Grid (2x2 default), Tags: Grid-1x1, Grid-2x1, Grid-3x1, Grid-4x1, Grid-5x1, Grid-6x1, Grid-7x1, Grid-8x1

2x2 (default)

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

1x1

This is some text inside of a div block.

2x1

This is some text inside of a div block.
This is some text inside of a div block.

3x1

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

4x1

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

5x1

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

6x1

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

7x1

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

8x1

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.

Search

JetBoost CMS filters for Media Studies and Explorations Page (when I buy the license, foregoing for now as each filter is a license).

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Reset

Tetrad of Media Effects

Media Studies default review component (built into Airtable and CMS). Used in CMS item page as a default review for Digital technology (rich text bullet points), used metaphorically for literature analysis. Cards are used because 45 degree rectangle doesn't scale with mobile responsiveness and looks ugly in broader context.

Replace text block with Rich Text Block.

Figure: Designed or focused attention
Ground: Supporting context receiving little attention

  • (Figure) What does the medium enhance?
  • (Ground) What does the medium make obsolete?
  • (Figure) What does the medium retrieve that had been obsolesced earlier?
  • (Ground) What does the medium reverse or flip into when pushed to extremes?

Enhances

What does the medium enhance?

Reverses

What does the medium flip into when pushed to extremes?

The Medium is the Message

Retrieves

What does the medium retrieve that had been obsolesced earlier?

Obsolesces

What does the medium make obsolete?

Poe's Media Effects

This is used in the Digital technology CMS for reviews of Apps used in Explorations. Add RTF with conditional visibility in CMS: Digital page.

Accessibility

Accessibility: the cost of getting and using a medium.

Privacy

Privacy: the cost of hiding the identity of users and the content of messages in a medium.

Fidelity

Fidelity: the degree to which data in a medium are coded.

Volume

Volume: the cost of sending messages in a medium relative to size.

Velocity

Velocity: the cost of sending messages in a medium relative to speed.

Range

Range: the cost of sending messages in a medium relative to distance.

Persistence

Persistence: the cost of storing messages in a medium relative to time.

Searchability

Searchability: the cost of finding messages in a medium.

🤝 Praxis

🏗️ Adaptive Program Process

An easy to learn cooperative organizational strategy, starting with your self and ten cooperative friendly categories.

🛠️ Methodologies

Matching the process to custom methodologies in a shared organizational practice enables equal opportunity for free association of time and labor across Sustainable Programs.

🔩 Var Stack

Learn from work examples that generate insights, designs, and resources for community-led programs working towards a Sustainable Future.

📜
Media Studies
Learn New Skills
🛸
Tech Ecosystem
Design New Environments
🌐
Community Network
Federate Co-Operatively
🛍
Local Marketplaces
Eco-Co-Ownership
🧪
Beta Tests
Share Improvements
🌅
Policy Frameworks
Set Communal Norms
🌕
Local Pilots
Organize New Explorations
🎯
Local Implementation
Promote Sustainability

Support

Help build a Sustainable Development Community. Patrons and Donations contribute towards a Sustainable Future

Donate to help Explorations Research

1NZSEWC4MdSDcR7zuKjedat2YjifaXMK4R

$ravaioli

Sign Up For Updates