← Kairos MBA MasterclassAll programsHomeSearch
Kairos MBA Masterclass·28:15

App Setup: Canvas and Grid, Settings Every App Needs, Typography and Colour Variables, Responsive Text

Mayank Build trainer - co-founder of Epic, a Delhi no-code/low-code product studio (80+ products); builds the real-estate marketplace in Bubble on camera

The short version

  1. Canvas: double-click for page properties, container layout Fixed -> Column, default width 1440 to match Figma, 75% zoom with a 20 px grid; preview at /version-test reloads without publishing (0:00-0:02).
  2. Settings for every new app: favicon and progress-bar colour; SEO site name and description; Open Graph image (paid); API tab - tick Workflow API and Backend workflows now. The app ID cannot be changed later (0:03-0:06).
  3. Styles: font Open Sans -> Manrope; up to 32 colour variables pasted from Figma; H1 46/800/line 1.4/-2% letter spacing, H2 46, H3 36, H4 28, H5 24, H6 22, body 20 regular and semibold; responsive text by a 'page width < 400' condition instead of separate mobile styles (0:08-0:29).

At a glance, three clicks deep

Skim here first: the closed row is the glance, open is the study card with the key points and timestamps, and the ↓ link drops to that concept's full write-up below.

01Canvas setup and the settings every new app needsColumn layout, 1440, 20 px grid;›

Column layout, 1440, 20 px grid; API toggles on.

Canvas (0:00-0:02)

Settings (0:03-0:06)

↓ Full write-up of this concept

02Typography and colour variables, and responsive text via one conditionManrope;›

Manrope; 32 colour vars; H1-H6 sizes; width<400 condition.

Variables (0:08-0:17)

Text styles (0:18-0:24)

Responsive condition (0:25-0:29)

↓ Full write-up of this concept

The concepts in full

01

Canvas setup and the settings every new app needs

Tick Workflow API and Backend workflows on day one. You will need them later and forget where they live.

PROCEDURE, canvas: 1) double-click the canvas -> page properties; 2) page title; 3) Layout: container layout Fixed -> Column; 4) default width 1440; 5) View: zoom 75% (or 60%), Show grid at 20 px. Preview opens /version-test; reload shows changes without publishing. Settings > General: favicon, progress-bar colour; SEO: site name, description; Open Graph image (previews only on a paid plan); API tab: tick Workflow API and Backend workflows. Warning: the app ID is permanent.

Why it matters

Mechanical, and skipped setup is the usual cause of a layout that will not line up with Figma.

02

Typography and colour variables, and responsive text via one condition

One H1 style, one condition for narrow screens. Not two design systems.

Styles > Style variables: change the default font to Manrope; add colour variables by pasting hex from Figma and naming them (dark slate gray, dark 2, dark 3, light 1, light 2, white, danger, danger 50%) - up to 32. Text styles: H1 46 px, weight 800, line height 1.4, letter spacing -2%, primary colour (and the H1 style sets the HTML H1 tag, which matters for SEO); H2 46/800, H3 36/800, H4 28/800, H5 24/~600, H6 22/700; body 20 regular (400) and semibold (600); button and paragraph styles. Responsive: instead of mobile styles add a condition 'when current page width < 400' and override - H1 34, H2 30, H3 28, H4 20, H5 20; H6 and body unchanged. Devices: desktop 1440, mobile ~375-500, tablet ~800-1000 (not supported here). Ctrl + right-click copies and pastes an expression between styles.

Why it matters

Reuse, consistency and correct heading tags from the first element onward.

Tools referenced

ToolCoverageMomentContext
Bubbledemonstrated
Figmademonstrated

Action items

    Resources mentioned

    Resources
    • docLesson page on the platform

    Extraction notes

    This page was built from an auto-generated transcript, which garbles product and people's names. Those were corrected silently in everything above and logged here for transparency. The warnings flag claims that were true on the recording day but change fast.

    Transcript corrections applied

    The transcript saysThe trainer actually means
    real start date / real aesthetics / real staticreal estate
    Type / Cypress / Skype / SykesStripe
    Mando / Mandrope / MangroveManrope (font)
    repeating loop / repeating rowrepeating group
    paid listings nameCurrent page Listing's name

    True on recording day — verify before relying