Every band of the origin page, in order: what the section is, what it is
for, and the exact doc.json that reproduces it — element by element,
with the placement, typography and colour each one carries, set beside the origin it was
read from.
Viewport
1512×982@2×
Origin
17,250px
Build
16,011px
Δ
-1,239px
Sections
19
Elements
170
Assets
30
Platform
Showit
How to read this
Each entry pairs the origin band with the build of it, both
cut from full-page shots taken at 1512×982@2×,
then gives the document subtree underneath. The document is not a copy — it is a
recomposition into a fixed vocabulary of five categories, seventeen section layouts and
seven element types. Where the two diverge, the divergence is named.
Why 1512 scripts/tools/config.ts defines this project's desktop viewport as
1512×982@2×; the capture was recorded at it and doc.json was authored
against it. The grid is proportional, so a shot at any other width shows a page whose row
arithmetic no longer matches the placements written in the document.
Every number here is generated
Placements, footprints, type blocks, band heights and element counts are read out of
doc.json, bands.json and measured.json when this page is
built. Only the readings — what a band is, why a layout was chosen — are authored, and they
live in prose.ts. Re-run bun docs/references/jennakutcher.com/build.ts after
any change to the document and the numbers follow.
The data structure
A document is five things: a grid, a brand, an assets
table, and a page holding sections holding elements. Everything visual derives from
those — no stylesheets, and no arbitrary values to reach for.
"assets": { …30 entries, keyed by id — each { name, type, data } with the bytes base64'd… },
"page": {…}{3 keys
"id": "jk0053",
"type": "page",
"kids": [ …19 sections, each one walked below… ]
}
}
Grid — what a placement means
Key
Value
Resolves at 1512 to
cols
24
24 equal columns, no column gap
mobileCols
8
below the 768px breakpoint
maxWidth / capContent
1200 / undefined
min(100vw − 32px, 1200px) → 1200px,
156px margins
gutter
16
page margin, not a column gap
— column width
derived
1200 ÷ 24 = 50px
rowPct / rowMin
2.15 / 1.9rem
max(2.15% × 1200, 30.4px) →
30.4px — the floor engages
Every element carries at: [colStart, colEnd, rowStart, rowEnd], end-exclusive,
emitted as grid-column: colStart / colEnd. So [1, 25]
is the full 1200px column; [1, 12] and [14, 25] are the library's
two-up, 550px each with a 100px channel between them.
Brand — colours, in the order they were given
colours is an ordered list, not a palette with roles. The builder classifies it:
accents split from neutrals at a chroma threshold, missing roles collapse onto the one before,
and the structural light and dark come from the curated pair named by
variant: 0. The only thing the order decides is which accent leads.
#eb6c2f
#6579be
#eec3e5
#f2dc53
#ffffff
#f2efe8
#18161b
Surface and ink roles — the whole colour vocabulary
A surface is a scope, not a value: naming one on a section rebinds what every ink role
means inside it. That is why ink-strong is near-black on cream and white on the deep
band, with nothing in the document saying so.
Surface
ground
ink-strong
ink-body
Bands using it
canvas
#ffffff
#18161b
#453935
the four course bands
raised
#f2efe8
#18161b
#3c302c
Flodesk bar, footer
deep
#18161b
#ffffff
#d6c8c2
hero, Favorite Things
primary
#eb6c2f
rebound per scope
quiz, book, orange bands
secondary
#6579be
rebound per scope
positioning, stats, blog
tertiary
#eec3e5
rebound per scope
freebies, podcast
Type — a bounded scale, and the origin's own faces
There is no text-[17px]. 8 rungs, each a
[size, leading] pair, every rung above lg a clamp() so the
scale tracks the viewport rather than the row.
Rung
Declared
At 1512
Leading
sm
0.875rem
14px
1.6
base
1rem
16px
1.7
lg
1.1875rem
19px
1.6
xl
clamp()
clamped
1.35
2xl
clamp()
clamped
1.25
3xl
clamp()
clamped
1.12
4xl
clamp()
clamped
1.05
5xl
clamp()
clamped
1
Family
Weight
File
Reckless Neue
300
247b773492a73006.woff
Reckless Neue
400
3f270964bd25b551.woff
Reckless Neue
500
790ba558abfe85f5.woff
Circular
400
5d99f452314f691b.woff
Circular
700
592791c1c9185abe.woff
Maison Mono
400
09c84fcd02266f59.woff
Moderat Condensed
900
a6918a8afe888946.woff
Two families, four faces
A Brand holds display and body. Mono and condensed reach the page through
brand.type.families. Weight on this origin is carried by the family name —
Circular Bold and Circular Book are two @font-face families
both at weight 400 — so they are re-declared as one family with real weights, or nothing
downstream can select a cut.
The extended vocabulary
This document uses fifteen proposed additions to the model, each a new field beside the
existing ones rather than a rewrite of one, and none of them a setting — the
validator bounds those strictly. The document still validates, and
--no-extensions still renders a whole page. They appear in the
Extensions column of every element table below.
Boundaries in document pixels, from the top-level children of outline.json,
confirmed against a background change in resting.png. Build heights are measured live
off dist/index.html. A reader would name 20 bands; the document has
19 sections, and band 05 is where the two differ.
ORIGIN · y 0–246 · 246px · cream #f2efe8BUILD · y 0–274 · 274px · jk0005
What this band is
A paid-partnership strip sitting above everything, including the navigation.
A tablet photograph turned a few degrees off square, a question set large in the serif
with blank page picked out in an underlined italic, the offer in small bold
sans, and a solid orange call to action. It is an advertisement, and the page treats it
as one — cream ground, no relationship to the hero below it.
Why this category and layout
Nothing in the vocabulary is for an announcement bar, so the question is
which layout is nearest in arrangement: media on the left, words in the
middle, action on the right, all in one shallow full-width band.
hero.banner is that shape. The hero category is a claim about
arrangement rather than about importance — this band is not the page's hero and does not
pretend to be.
The section node
The whole subtree, exactly as it sits in doc.json. Collapsed to
the top level — open settings for the ground and the room below it, or
kids for the 4 elements the table below summarises.
Tired of staring at a blank page every time you sit down to email your list?
—
jk0003 text.small
subhead
[16, 25, 2, 5] 450×91px
3×1 stretch
body · bold · lg · lh 1.4 · ls 0.01em
#191816
That stops here. Start your free Flodesk trial and get 4 done-for-you email s…
ink
jk0004 button.solid
action
[16, 24, 5, 7] 400×61px
2×1 stretch
body · bold · sm · lh 1.6 · ls 0.1em · uppercase
#222222
I'M IN! BLANK PAGE, BE GONE!
ink
Element-scope extensions in this band: node.fit, node.rotate, node.typography, node.ink
Render against origin
The build runs 28px taller. The type, the rotation and the artwork all trace;
the extra height is the grid rounding a 246px band up to whole rows.
The tablet is an animated GIF, and stays one flodesk-tablet is image/gif. An earlier extraction
flattened five animated GIFs on this page to PNG, which keeps one frame and silently
discards the rest. The document now embeds the file in the format the origin served,
and doc:render reports any mismatch between an asset's name and its type.
02
Hero — wordmark, cut-out, AS SEEN IN
herohero.photojk000k
Origin y
246–1214
Origin height
968px
Build height
1395px
Δ
+427px
Ground
deep + photo
space
0 rows
Elements
14
ORIGIN · y 246–1214 · 968px · purple photographBUILD · y 274–1669 · 1395px · jk000k
What this band is
The page's actual opening: a photographic purple ground, the serif wordmark
"Jenna Kutcher" set enormous, a cut-out of Jenna on a stool composited over it, eight
navigation links across the top, two taglines flanking her at the waist, and an
AS SEEN IN strip in the bottom left. The wordmark and the cut-out deliberately
overlap — the letterforms run behind her.
Why this category and layout
hero.photo: a full-bleed photographic ground with content placed over
it. The alternative, hero.split, would have put the photograph beside the
words rather than under them, which is a different page. The ground is
deep, and that is what buys light type over the photograph — naming the
surface rebinds every ink inside the band without a single element saying so.
The section node
The whole subtree, exactly as it sits in doc.json. Collapsed to
the top level — open settings for the ground and the room below it, or
kids for the 14 elements the table below summarises.
mono · normal · base · lh 1.8 · ls 0.2em · uppercase
#ffffff
As seen in
ink
jk000j image.plain
eyebrowMedia
[1, 4, 31, 34] 150×91px
2×2 stretch
layout default
—
as-seen-in05cc6a5cf551ebce.gif · image/gif
fit=contain
Element-scope extensions in this band: node.typography, node.underline, node.fit, node.float, node.z, node.runs, node.ink
Render against origin
The build is 427px taller, the largest positive divergence on
the page. Fourteen elements placed over a photograph need more rows than the origin's
absolutely-positioned Showit layout does, and the grid cannot overlap two elements into
the same cells the way the origin overlaps the wordmark and the cut-out.
The circular badge is not in the document "NICE TO MEET YOU! I'M JENNA." curved around a K monogram, sitting at the
hero's bottom edge. The origin builds it from two stacked Showit elements — a ring
and a monogram — and an image element carries one photograph. It is left out rather
than shown cropped. In the origin crop above it is the shape straddling the band
boundary; its bottom half appears at the top of band 03.
The AS SEEN IN strip names one publication, and the origin names nine It is a 17-frame GIF cycling Forbes, TODAY, Women's Health, Target, Inc.,
Glamour, Allure, USA Today and Entrepreneur. A screenshot can only ever catch one
frame — this capture caught Allure. Whichever frame is packed, the document asserts
one masthead where the page claims nine, and the band is unmeasurable by any single
diff number.
03
I help Creative, Multi-Passionate Women…
featuresfeatures.threejk000o
Origin y
1214–2236
Origin height
1022px
Build height
905px
Δ
-117px
Ground
secondary
space
3 rows · 91px
Elements
3
ORIGIN · y 1214–2236 · 1022px · periwinkle #6579beBUILD · y 1668–2573 · 905px · jk000o
What this band is
One sentence, set very large in the serif, doing the whole job of saying what the
business is: I help Creative, Multi-Passionate Women turn their Ideas into Steady
Income while keeping their Freedom, Peace, and Joy intact. Six phrases inside it are
picked out in pink, yellow and orange, and three of those carry a hand-drawn underline.
Below it a paragraph of body copy and a pink pill button.
Why this category and layout
features.three by arrangement, though the band holds three elements
rather than three columns — a headline, a paragraph and an action, stacked and centred on
a periwinkle ground. The category is features because the band's job is to
say what she does.
The section node
The whole subtree, exactly as it sits in doc.json. Collapsed to
the top level — open settings for the ground and the room below it, or
kids for the 3 elements the table below summarises.
"body": "<p>If you want a business that aligns with your values and fuels the life you actually *want,* you're in the right place. You don't need a huge audience or endless hours to succeed. You need a plan that cuts through the overwhelm and gives you the next right step. I've been where you are and I know how to guide you toward results that <strong>matter.</strong></p><p>Here you'll find tools, strategies, courses, podcast episodes, and trainings designed to help you take action and build a business that <strong>supports your dreams</strong> AND your <strong>life.</strong></p>",
I help Creative, Multi-Passionate Women turn their Ideas into Steady Income w…
runs×7
jk000m text.lead
body
[6, 20, 14, 24] 700×304px
3×1 stretch
layout default
ink-body
If you want a business that aligns with your values and fuels the life you ac…
—
jk000n button.pill
action
[9, 17, 25, 27] 400×61px
2×1 stretch
body · bold · lg · lh 1.8 · ls 0.15em · uppercase
#6579be
See what's new!
ink
Element-scope extensions in this band: node.typography, node.runs, node.ink
Render against origin
The build comes in 117px short. The sentence itself traces word for word,
including all six accent runs.
Six colours inside one sentence A text element has one colour setting, and this sentence needs
six. node.runs — [{ text, ink?, family? }] — is the
extension that carries them: the fragment, not the element, owns the colour. Before
iteration 8 the whole sentence was set near-black, which is the contrast layer
refusing what the base vocabulary cannot express.
04
Quiz — ARE YOU READY TO LEVEL UP?
featuresfeatures.splitjk000u
Origin y
2236–3179
Origin height
943px
Build height
1070px
Δ
+127px
Ground
primary
space
0 rows
Elements
5
ORIGIN · y 2236–3179 · 943px · orange photographBUILD · y 2574–3644 · 1070px · jk000u
What this band is
A quiz invitation over a photographic orange ground. A mono eyebrow reading
FREE QUIZ, then ARE YOU READY TO LEVEL UP? in heavy condensed caps, a
short paragraph, and an arrow link. The photograph of Jenna occupies the right half.
Why this category and layout
features.split — words on one side, photograph on the other. The
eyebrow/headline/body/action stack is exactly the features slot vocabulary,
so every piece of content has somewhere to go.
The section node
The whole subtree, exactly as it sits in doc.json. Collapsed to
the top level — open settings for the ground and the room below it, or
kids for the 5 elements the table below summarises.
"body": "<p>Except instead of a video game, this is you <em>IRL</em>. Take this quick 5-question quiz so I can hand over laser-focused, curated resources specific to your goals and how YOU want to grow!</p>",
mono · normal · lg · lh 1.8 · ls 0.15em · uppercase
ink-strong
Free quiz
floatz=2
jk000r text.title
headline
[2, 11, 7, 13] 450×182px
4×1 stretch
layout default
ink-strong
Are you ready to level up?
—
jk000s text.body
body
[2, 10, 14, 21] 400×213px
3×1 stretch
body · normal · xl · lh 1.8 · ls normal
ink-body
Except instead of a video game, this is you IRL. Take this quick 5-question q…
—
jk000t button.pill
action
[2, 10, 22, 26] 400×122px
2×1 stretch
body · bold · lg · lh 1.8 · ls 0.15em · uppercase
#6579be
Curious? Take the quiz →
ink
Element-scope extensions in this band: node.typography, node.float, node.z, node.ink
Render against origin
The build runs 127px taller. The condensed face is the origin's own Moderat
Condensed at weight 900, reaching the page through
brand.type.families.condensed.
05
Freebies — 3 cards, and Looking For More?
featuresfeatures.threejk001b
Origin y
3179–5197
Origin height
2018px
Build height
2071px
Δ
+53px
Ground
tertiary
space
3 rows · 91px
Elements
22
ORIGIN · y 3179–5197 · 2018px · pink #eec3e5BUILD · y 3644–5715 · 2071px · jk001b
Two origin bands, one section 3179–4893 Freebies + 4893–5197 Looking For More? — 4 links
What this band is
Two origin bands, and the longest stretch of the page: three free downloads laid
out as a checkerboard of white cards on pink — an eyebrow naming the format, a title,
and a photograph each — followed by Looking For More? I Got You. and four quiet
links to further freebie collections.
Why this category and layout
features.three, three content units across a band. The four links
below are placed as a row of button.quiet at rows 61–64, inside the same
section rather than in one of their own.
The section node
The whole subtree, exactly as it sits in doc.json. Collapsed to
the top level — open settings for the ground and the room below it, or
kids for the 22 elements the table below summarises.
Write Your Own Definition of Success (and Build an Action Plan for Living It …
underline
jkp002 divider.line
—
[5, 13, 26, 40] 400×426px
1×1 stretch
layout default
line
rule
panel #fffffffloatz=-1mobile
jk0010 image.plain
media
[13, 21, 26, 40] 400×426px
2×2 stretch
layout default
—
freebie-podcast0c7ddcb2bf9881c6.jpg · image/jpeg
—
jkp003 divider.line
—
[7, 12, 28, 30] 250×61px
1×1 stretch
layout default
line
rule
panel #6579befloatz=-1mobile
jk0011 text.eyebrow
subhead
[7, 12, 28, 30] 250×61px
3×1 stretch
body · bold · sm · lh 1.8 · ls 0.15em · uppercase
#ffffff
Free download
ink
jk0012 text.subheading
body
[6, 12, 31, 37] 300×182px
3×1 stretch
body · normal · 2xl · lh 1.4 · ls normal
ink-strong
How to Start a Podcast from Scratch (in 3 Easy Steps!)
underline
jk0013 image.plain
media
[5, 13, 40, 54] 400×426px
2×2 stretch
layout default
—
freebie-list49052507ecd04ad2.jpg · image/jpeg
—
jkp004 divider.line
—
[13, 21, 40, 54] 400×426px
1×1 stretch
layout default
line
rule
panel #fffffffloatz=-1mobile
jkp005 divider.line
—
[15, 20, 42, 44] 250×61px
1×1 stretch
layout default
line
rule
panel #eec3e5floatz=-1mobile
jk0014 text.eyebrow
subhead
[15, 20, 42, 44] 250×61px
3×1 stretch
body · bold · sm · lh 1.8 · ls 0.15em · uppercase
ink-strong
Free mini-course
—
jk0015 text.subheading
body
[14, 20, 45, 51] 300×182px
3×1 stretch
body · normal · 2xl · lh 1.4 · ls normal
ink-strong
My 5-Day FREE Email List Building Mini-Course
underline
jk0016 text.heading
headline
[6, 20, 58, 61] 700×91px
4×1 stretch
display · normal · 3xl · lh 1.1 · ls normal
#6579be
Looking For More? I Got You.
ink
jk0017 button.quiet
action
[4, 8, 61, 64] 200×91px
2×1 stretch
body · normal · 2xl · lh 1.4 · ls normal
#6579be
Goal-Setting Freebies
inkunderline
jk0018 button.quiet
action
[9, 13, 61, 64] 200×91px
2×1 stretch
body · normal · 2xl · lh 1.4 · ls normal
#6579be
List-Building Freebies
inkunderline
jk0019 button.quiet
action
[14, 18, 61, 64] 200×91px
2×1 stretch
body · normal · 2xl · lh 1.4 · ls normal
#6579be
Podcasting Freebies
inkunderline
jk001a button.quiet
action
[19, 23, 61, 64] 200×91px
2×1 stretch
body · normal · 2xl · lh 1.4 · ls normal
#6579be
Pinterest Freebies
inkunderline
Element-scope extensions in this band: node.typography, node.ink, node.panel, node.float, node.z, node.mobile, node.underline
Render against origin
The build runs 53px long over 2,018px of origin — the closest proportional match
of any long band on the page.
This is where 20 bands became 19 "Looking For More? I Got You." is a band a reader would name, on the same pink
ground as the freebies above it. It has no ground change to divide it, so it lives
inside jk001b as four more placed children. Every other band on the page
maps one-to-one to a section; this one is the exception, and it is the whole of the
20 → 19 discrepancy.
The white cards are panels, not sections The origin is a checkerboard of white card faces on a pink ground. Read as
columns of content on the band's own ground they render — they just say something
else, and the tell is contrast: text that comes out white-on-white means the colour
is right and the ground is missing. node.panel —
{ fill, radius? } — paints the card face. The registry has no panel
primitive, which is the single largest structural gap this page found.
06
Podcast stats — 115M / 900+ / 12,000+
featuresfeatures.statsjk001j
Origin y
5197–6072
Origin height
875px
Build height
875px
Δ
0px
Ground
secondary
space
0 rows
Elements
2
ORIGIN · y 5197–6072 · 875px · periwinkle #6579be, photograph belowBUILD · y 5715–6590 · 875px · jk001j
What this band is
Three figures for the podcast — 115 million downloads, 900+ shows, 12,000+ five-star
reviews — over a periwinkle ground with a photograph below them. Crucially, the origin
sets them small: 20px mono, three lines, one text node, left-aligned.
The size of an eyebrow, not of a statistic.
Why this category and layout
features.stats by arrangement. But arrangement alone gets this band
wrong, and did: an earlier round gave it three oversize numerals spread across the grid,
which is what a stat block looks like and not what this band is. A band of three numbers
is a stat block only if the origin sets the numbers like stats.
The section node
The whole subtree, exactly as it sits in doc.json. Collapsed to
the top level — open settings for the ground and the room below it, or
kids for the 2 elements the table below summarises.
"alt": "Jenna Kutcher in a yellow dress wearing headphones"
}
},
"at": [1, 25, 11, 29],
"slot": "media"
}
]
}
Every element in it
Element
Slot
at → box
min / derive
Typography
Colour
Content
Extensions
jk001c text.eyebrow
stat
[1, 14, 3, 8] 650×152px
3×1 stretch
mono · normal · lg · lh 1.8 · ls 0.05em · uppercase
ink-body
115 million downloads / 900+ shows / 12,000+ 5 star reviews
—
jk001i image.plain
media
[1, 25, 11, 29] 1200×547px
2×2 stretch
layout default
—
podcast07b5256e078739a7.jpg · image/jpeg
—
Element-scope extensions in this band: node.typography
Render against origin
875px against 875px — exact. The only band on the page that
lands on the origin's height to the pixel, and it got there by being rebuilt from the
origin's own type and geometry rather than from the layout's defaults.
It is also the band that proved the exact match is a property of the
grid rather than of this section: turning the maxWidth cap off for
one round took the content column from 1200px to 1480px and the row from 30.4px to
31.8px, and this band went to +40 without a single field on it changing.
Read type.size before naming a layout If the biggest thing in a band is set at body size, the band is not about it.
This is the band that proved it — the fix was to stop asking what the layout is
called and start reading what the origin sets its text at.
Matching height is not matching band Put the pair side by side and the thing the ±0px never told you is immediately
visible: the origin's photograph is full-bleed and the build's is
inset. jk001i is placed at [1, 25, 11, 29] — every one of
the 24 columns, and still only 1200px against an origin of 1512px. Nothing placed on
this grid can escape the content column, so full bleed is not a placement this
document can express.
Uncapping the grid does not fix it, it only moves the number: the photograph
becomes 1480px at this viewport and 1888px at 1920, overshooting instead of falling
short. A section background image is genuinely full-bleed; an element in the
grid never is, at any cap. The real gap is an image that must bleed and
occupy only part of the band's height.
07
Podcast — two columns + episode list
featuresfeatures.listjk0023
Origin y
6072–7061
Origin height
989px
Build height
1027px
Δ
+38px
Ground
tertiary
space
1 rows · 30px
Elements
19
ORIGIN · y 6072–7061 · 989px · pink→blue gradientBUILD · y 6590–7617 · 1027px · jk0023
What this band is
The Goal Digger podcast: a headline and paragraph in the left column, a
Click here to tune in link, and a numbered list of the most popular episodes —
750, 752 and the rest — each with its title. The ground is not a colour but a gradient
running pink to blue.
Why this category and layout
features.list — a heading with a repeated set of items under it. The
episode list traces one for one.
The section node
The whole subtree, exactly as it sits in doc.json. Collapsed to
the top level — open settings for the ground and the room below it, or
kids for the 19 elements the table below summarises.
"body": "The #1 marketing and business podcast serving up the BEST mini-marketing trainings and can’t-stop-listening interviews with the most inspiring, people from around the world.",
"body": "<p>With 115+ million downloads, 900+ episodes, 12,000+ five-star reviews, The Goal Digger Podcast has become a go-to library for entrepreneurs at every stage. Want to learn how to start your business, grow your influence, or straight up figure out what you want to do with your life? The Goal Digger Podcast is ready for your binge-listening pleasure! All are welcome.</p>",
"body": "<a href="https://jennakutcherblog.com/5thingsig/">5 Things That Work On Instagram Right Now</a>",
"align": "left",
"colour": "ink-strong"
},
"at": [4, 22, 30, 32],
"slot": "body",
"typography": {…}{6 keys
"family": "display",
"weight": "normal",
"size": "2xl",
"leading": "1.2",
"tracking": "normal",
"transform": "normal-case"
},
"underline": false
},
{…}{9 keys
"id": "jk0022",
"type": "divider",
"layout": "divider.line",
"tree": {…}{3 keys
"tag": "div",
"class": "flex h-full w-full items-center",
"children": […][1 item
{…}{2 keys
"tag": "div",
"class": "h-px w-full bg-@colour"
}
]
},
"min": [1, 1],
"derive": "stretch",
"settings": {…}{1 key
"colour": "line"
},
"at": [1, 22, 32, 33],
"slot": "divider"
}
],
"gradient": {…}{2 keys
"angle": "300deg",
"stops": ["#f5f195", "#cee8f3", "#eec3e5"]
}
}
Section-scope extensions in use: section.gradient
Every element in it
Element
Slot
at → box
min / derive
Typography
Colour
Content
Extensions
jk001k text.heading
headline
[1, 13, 3, 11] 600×243px
4×1 stretch
display · medium · 2xl · lh 1.5 · ls normal
ink-strong
The #1 marketing and business podcast serving up the BEST mini-marketing trai…
—
jk001l text.body
body
[15, 25, 3, 14] 500×334px
3×1 stretch
layout default
ink-body
With 115+ million downloads, 900+ episodes, 12,000+ five-star reviews, The Go…
—
jk001m button.pill
action
[1, 9, 12, 14] 400×61px
2×1 stretch
body · bold · base · lh 1.8 · ls 0.15em · uppercase
#6579be
Click here to tune in →
ink
jk001n text.eyebrow
subhead
[1, 9, 16, 17] 400×30px
3×1 stretch
mono · normal · base · lh 1.8 · ls 0.15em · uppercase
#111111
Most popular episodes
ink
jk001o text.small
label
[1, 4, 18, 19] 150×30px
3×1 stretch
body · bold · base · lh 1.6 · ls 0.05em · uppercase
#6579be
750
ink
jk001p text.subheading
body
[4, 22, 18, 20] 900×61px
3×1 stretch
display · normal · 2xl · lh 1.2 · ls normal
ink-strong
10 Business Tools I Can't Live Without
underline
jk001q divider.line
divider
[1, 22, 20, 21] 1050×30px
1×1 stretch
layout default
line
rule
—
jk001r text.small
label
[1, 4, 21, 22] 150×30px
3×1 stretch
body · bold · base · lh 1.6 · ls 0.05em · uppercase
#6579be
752
ink
jk001s text.subheading
body
[4, 22, 21, 23] 900×61px
3×1 stretch
display · normal · 2xl · lh 1.2 · ls normal
ink-strong
120X Your Content’s Lifespan in Just an Hour per Week
underline
jk001t divider.line
divider
[1, 22, 23, 24] 1050×30px
1×1 stretch
layout default
line
rule
—
jk001u text.small
label
[1, 4, 24, 25] 150×30px
3×1 stretch
body · bold · base · lh 1.6 · ls 0.05em · uppercase
#6579be
718
ink
jk001v text.subheading
body
[4, 22, 24, 26] 900×61px
3×1 stretch
display · normal · 2xl · lh 1.2 · ls normal
ink-strong
How to ACTUALLY Make Money As A Podcaster
underline
jk001w divider.line
divider
[1, 22, 26, 27] 1050×30px
1×1 stretch
layout default
line
rule
—
jk001x text.small
label
[1, 4, 27, 28] 150×30px
3×1 stretch
body · bold · base · lh 1.6 · ls 0.05em · uppercase
#6579be
772
ink
jk001y text.subheading
body
[4, 22, 27, 29] 900×61px
3×1 stretch
display · normal · 2xl · lh 1.2 · ls normal
ink-strong
Why You Shouldn't Wait to Start Your Email List
underline
jk001z divider.line
divider
[1, 22, 29, 30] 1050×30px
1×1 stretch
layout default
line
rule
—
jk0020 text.small
label
[1, 4, 30, 31] 150×30px
3×1 stretch
body · bold · base · lh 1.6 · ls 0.05em · uppercase
#6579be
720
ink
jk0021 text.subheading
body
[4, 22, 30, 32] 900×61px
3×1 stretch
display · normal · 2xl · lh 1.2 · ls normal
ink-strong
5 Things That Work On Instagram Right Now
underline
jk0022 divider.line
divider
[1, 22, 32, 33] 1050×30px
1×1 stretch
layout default
line
rule
—
Element-scope extensions in this band: node.typography, node.ink, node.underline
Render against origin
The build runs 38px long. The gradient is the origin's own declaration rather
than an approximation to a flat fill.
A ground that is not a colour A section background names a surface role, and a role is one value. This band's
ground is a two-stop gradient, carried by section.gradient —
{ angle, stops[] }. Rendered as the nearest flat fill it reads as a
different band.
08
Blog — NOT YOUR AVERAGE BIZ BLOG
featuresfeatures.listjk002l
Origin y
7061–8374
Origin height
1313px
Build height
1148px
Δ
-165px
Ground
secondary
space
3 rows · 91px
Elements
17
ORIGIN · y 7061–8374 · 1313px · periwinkle #6579beBUILD · y 7617–8765 · 1148px · jk002l
What this band is
NOT YOUR AVERAGE BIZ BLOG in heavy condensed caps, then five posts, each
a small category eyebrow — Personal, Health, Beauty, Productivity — above its title, with
a thumbnail. An Explore the posts link closes the band.
Why this category and layout
features.list again, for the same reason: one heading, a repeated item
shape beneath it. Seventeen children, of which fifteen are the list.
The section node
The whole subtree, exactly as it sits in doc.json. Collapsed to
the top level — open settings for the ground and the room below it, or
kids for the 17 elements the table below summarises.
"body": "<a href="http://jennakutcherblog.com/curvy-woman-opens-up-about-having-mr-six-pack-as-her-husband-inspiring-thousands/">That Time I Went Viral for Being Curvy (with Mr. Six Pack)</a>",
"body": "<a href="https://jennakutcherblog.com/8-ways-i-transformed-my-skin-and-how-much-it-cost/">8 Ways I Transformed My Skin and How Much it Cost</a>",
"body": "<a href="https://jennakutcherblog.com/5-creative-ways-to-use-pinterest-for-your-business/">5 Creative Ways to Use Pinterest for Your Business</a>",
condensed · black · 5xl · lh 1 · ls 0.05em · uppercase
#eec3e5
Not your average biz blog
ink
jk0025 image.rounded
media
[2, 11, 10, 26] 450×486px
2×2 stretch
layout default
—
blog-viral20018221f8f505e6.jpg · image/jpeg
—
jk0026 text.eyebrow
subhead
[2, 8, 27, 28] 300×30px
3×1 stretch
body · bold · sm · lh 1.6 · ls 0.1em · uppercase
#eeb19a
Personal
ink
jk0027 text.subheading
body
[2, 11, 28, 32] 450×122px
3×1 stretch
display · normal · 2xl · lh 1.2 · ls normal
ink-strong
That Time I Went Viral for Being Curvy (with Mr. Six Pack)
underline
jk0028 image.circle
media
[12, 15, 10, 13] 150×91px
2×2 intrinsic
layout default
—
blog-health1380e0a3f832adb8.jpg · image/jpeg
—
jk0029 text.eyebrow
subhead
[15, 25, 10, 11] 500×30px
3×1 stretch
body · bold · lg · lh 1.6 · ls 0.1em · uppercase
#f2dc53
Health
ink
jk002a text.subheading
body
[15, 25, 11, 14] 500×91px
3×1 stretch
display · normal · 2xl · lh 1.2 · ls normal
ink-strong
My Current Health Routine (and What’s Next!)
underline
jk002b image.circle
media
[12, 15, 14, 17] 150×91px
2×2 intrinsic
layout default
—
blog-beauty873fba693ea2bbca.jpg · image/jpeg
—
jk002c text.eyebrow
subhead
[15, 25, 14, 15] 500×30px
3×1 stretch
body · bold · lg · lh 1.6 · ls 0.1em · uppercase
#eeb19a
Beauty
ink
jk002d text.subheading
body
[15, 25, 15, 18] 500×91px
3×1 stretch
display · normal · 2xl · lh 1.2 · ls normal
ink-strong
8 Ways I Transformed My Skin and How Much it Cost
underline
jk002e image.circle
media
[12, 15, 18, 21] 150×91px
2×2 intrinsic
layout default
—
blog-aib3302070d9394783.jpg · image/jpeg
—
jk002f text.eyebrow
subhead
[15, 25, 18, 19] 500×30px
3×1 stretch
body · bold · sm · lh 1.6 · ls 0.1em · uppercase
#eec3e5
Productivity
ink
jk002g text.subheading
body
[15, 25, 19, 22] 500×91px
3×1 stretch
display · normal · 2xl · lh 1.2 · ls normal
ink-strong
A Beginner’s Guide to Building an AI Business Strategy
underline
jk002h image.circle
media
[12, 15, 22, 25] 150×91px
2×2 intrinsic
layout default
—
blog-pinterestd5f5f60cababb8ea.jpg · image/jpeg
—
jk002i text.eyebrow
subhead
[15, 25, 22, 23] 500×30px
3×1 stretch
body · bold · sm · lh 1.6 · ls 0.1em · uppercase
#f2dc53
Business
ink
jk002j text.subheading
body
[15, 25, 23, 26] 500×91px
3×1 stretch
display · normal · 2xl · lh 1.2 · ls normal
ink-strong
5 Creative Ways to Use Pinterest for Your Business
underline
jk002k button.pill
action
[9, 17, 33, 35] 400×61px
2×1 stretch
body · bold · lg · lh 1.8 · ls 0.15em · uppercase
#6579be
Explore the posts →
ink
Element-scope extensions in this band: node.typography, node.ink, node.underline
Render against origin
The build is 165px short. Every post title and category traces; the shortfall is
the origin's generous leading between items.
09
Book — Worldwide Bestseller
featuresfeatures.splitjk002p
Origin y
8374–9140
Origin height
766px
Build height
905px
Δ
+139px
Ground
primary + photo
space
4 rows · 122px
Elements
4
ORIGIN · y 8374–9140 · 766px · orange photographBUILD · y 8766–9671 · 905px · jk002p
What this band is
The book band. Get My Heartfelt Worldwide Bestseller, How Are You, Really?
over an orange photographic ground, a paragraph, and an Order today! action.
Why this category and layout
features.split — the book beside the words.
The section node
The whole subtree, exactly as it sits in doc.json. Collapsed to
the top level — open settings for the ground and the room below it, or
kids for the 4 elements the table below summarises.
{…}{8 keys
"id": "jk002p",
"type": "section",
"layout": "features.split",
"category": "features",
"tree": {…}{2 keys
"tag": "section",
"class": "py-3"
},
"settings": {…}{3 keys
"background": "primary",
"image": {…}{2 keys
"src": "asset:book",
"alt": "Jenna Kutcher holding her book against an orange wall"
"body": "<p>Forget hustle harder. Want to build a vision for your life that's unapologetically true to who you are and what you *actually* want? Here's how you start.</p>",
Get My Heartfelt Worldwide Bestseller, How Are You,
—
jk002n text.body
body
[2, 13, 16, 23] 550×213px
3×1 stretch
body · normal · xl · lh 1.8 · ls normal
ink-body
Forget hustle harder. Want to build a vision for your life that's unapologeti…
—
jk002o button.pill
action
[15, 21, 24, 26] 300×61px
2×1 stretch
body · bold · base · lh 1.2 · ls 0.1em · uppercase
—
Order today!
—
jkl000 image.plain
—
[11, 16, 9, 13] 250×122px
2×2 stretch
layout default
—
reallyreally1.png · image/png
fit=contain
Element-scope extensions in this band: node.typography, node.fit
Render against origin
The build runs 139px taller.
The last word is a drawing, not type The headline reads "…How Are You, Really?" on screen and ends at the
comma in outline.json. The outline is right: really1.png is
hand-lettered artwork positioned over the type. An earlier extraction read the word
off the screenshot and typed it into the headline — the right instinct applied to the
wrong thing, because the document then set in a serif what the origin drew by hand,
and nothing in the pipeline could say so. It is now placed as the image it is.
10
Course 01 — The Content Lab
featuresfeatures.splitjk002x
Origin y
9140–10178
Origin height
1038px
Build height
541px
Δ
-497px
Ground
canvas + photo
space
0 rows
Elements
8
ORIGIN · y 9140–10178 · 1038px · photograph, white cardBUILD · y 9671–10212 · 541px · jk002x
What this band is
The first of four course cards. A mono eyebrow reading THE JK COURSE
LIBRARY, a large numeral 01, a tagline, the course name
The Content Lab, a paragraph, a More info action, and a coloured folder
tab. Card 01 sits over its photograph; the other three sit on white.
Why this category and layout
features.split, on a canvas ground. All four cards share
one shape, so they share one layout and differ only in content.
The section node
The whole subtree, exactly as it sits in doc.json. Collapsed to
the top level — open settings for the ground and the room below it, or
kids for the 8 elements the table below summarises.
{…}{8 keys
"id": "jk002x",
"type": "section",
"layout": "features.split",
"category": "features",
"tree": {…}{2 keys
"tag": "section",
"class": "py-3"
},
"settings": {…}{2 keys
"background": "canvas",
"image": {…}{2 keys
"src": "asset:courses-ground",
"alt": "Jenna Kutcher sitting on the floor with a laptop and printed photographs"
"body": "<p>Snag my exact 5-step plan to learn how to intentionally create one piece of content and repurpose and promote it 10 different ways to get results for the next 90 days!</p>",
condensed · black · xl · lh 1.2 · ls 0.05em · uppercase
#ffffff
The JK Course Library
ink
jk002r divider.line
divider
[5, 25, 2, 4] 1000×61px
1×1 stretch
layout default
primary
rule
panel #eb6c2ffloatz=-1mobile
jk002s text.title
label
[5, 9, 5, 8] 200×91px
4×1 stretch
condensed · black · 3xl · lh 1.2 · ls 0.05em · uppercase
#eb6c2f
01
ink
jk002t text.eyebrow
subhead
[9, 24, 5, 6] 750×30px
3×1 stretch
mono · normal · lg · lh 1.3 · ls 0.05em · uppercase
#222222
Level up your content game:
ink
jk002u text.heading
headline
[5, 22, 8, 11] 850×91px
4×1 stretch
display · normal · 4xl · lh 1.2 · ls normal
ink-strong
The Content Lab
—
jk002v text.body
body
[5, 19, 11, 16] 700×152px
3×1 stretch
body · normal · xl · lh 1.8 · ls normal
#222222
Snag my exact 5-step plan to learn how to intentionally create one piece of c…
ink
jk002w button.quiet
action
[18, 24, 16, 18] 300×61px
2×1 stretch
body · bold · sm · lh 1.2 · ls 0.15em · uppercase
—
More info
underline
jkc000 divider.line
—
[5, 25, 4, 18] 1000×426px
1×1 stretch
layout default
line
rule
panel #fffffffloatz=-1mobile
Element-scope extensions in this band: node.typography, node.ink, node.panel, node.float, node.z, node.mobile, node.underline
Render against origin
The build is 497px short — the largest shortfall on the page,
and not a fault. See the flag.
These four bands are caught mid-animation The cards are scroll-pinned: they slide over one pinned photograph as the page
moves. resting.png is a single full-page shot with no scroll position
and no elapsed time, so it linearises the stack — card 01 over its
photograph, cards 02–04 on white with several hundred pixels of empty band around
them. That dead space is the animation, not padding. The four bands are 365–497px
short in the build because the build does not reproduce it, which is the correct
decision and the reason 1,724px of the page's 1,239px total height difference sits
right here.
11
Course 02 — The Pinterest Lab
featuresfeatures.splitjk0035
Origin y
10178–11160
Origin height
982px
Build height
561px
Δ
-421px
Ground
canvas
space
0 rows
Elements
8
ORIGIN · y 10178–11160 · 982px · whiteBUILD · y 10212–10773 · 561px · jk0035
What this band is
The Pinterest Lab — number 02, tagline Make Pinterest your secret
weapon. Identical card shape to 01, on white.
Why this category and layout
The same features.split, the same eight children in the same slots.
The section node
The whole subtree, exactly as it sits in doc.json. Collapsed to
the top level — open settings for the ground and the room below it, or
kids for the 8 elements the table below summarises.
"body": "<p>Ready to leverage the internet’s favorite inspo board to be your #1 driver of web traffic? Get my 4-step, no-fluff process to drive a waterfall of traffic to your website with under 1 hour of work per week.</p>",
condensed · black · xl · lh 1.2 · ls 0.05em · uppercase
#ffffff
The JK Course Library
ink
jk002z divider.line
divider
[5, 25, 2, 4] 1000×61px
1×1 stretch
layout default
secondary
rule
panel #6579befloatz=-1mobile
jk0030 text.title
label
[5, 9, 5, 8] 200×91px
4×1 stretch
condensed · black · 3xl · lh 1.2 · ls 0.05em · uppercase
#6579be
02
ink
jk0031 text.eyebrow
subhead
[9, 24, 5, 6] 750×30px
3×1 stretch
mono · normal · lg · lh 1.3 · ls 0.05em · uppercase
#222222
Make Pinterest your secret weapon
ink
jk0032 text.heading
headline
[5, 22, 8, 11] 850×91px
4×1 stretch
display · normal · 4xl · lh 1.2 · ls normal
ink-strong
The Pinterest Lab
—
jk0033 text.body
body
[5, 19, 11, 16] 700×152px
3×1 stretch
body · normal · xl · lh 1.8 · ls normal
#222222
Ready to leverage the internet’s favorite inspo board to be your #1 driver of…
ink
jk0034 button.quiet
action
[18, 24, 16, 18] 300×61px
2×1 stretch
body · bold · sm · lh 1.2 · ls 0.15em · uppercase
—
More info
underline
jkc001 divider.line
—
[5, 25, 4, 18] 1000×426px
1×1 stretch
layout default
line
rule
panel #fffffffloatz=-1mobile
Element-scope extensions in this band: node.typography, node.ink, node.panel, node.float, node.z, node.mobile, node.underline
Render against origin
421px short, for the same scroll-pinning reason as 01.
12
Course 03 — The Podcast Lab
featuresfeatures.splitjk003d
Origin y
11160–12142
Origin height
982px
Build height
541px
Δ
-441px
Ground
canvas
space
0 rows
Elements
8
ORIGIN · y 11160–12142 · 982px · whiteBUILD · y 10773–11314 · 541px · jk003d
What this band is
The Podcast Lab — number 03, Build your podcast empire.
Why this category and layout
The same layout again.
The section node
The whole subtree, exactly as it sits in doc.json. Collapsed to
the top level — open settings for the ground and the room below it, or
kids for the 8 elements the table below summarises.
"body": "<p>Take my easy-to-learn 5-Step system to plan, record, launch, market, and monetize your podcast in 30 Days to GROW your business (or BECOME your business!)</p>",
condensed · black · xl · lh 1.2 · ls 0.05em · uppercase
#6579be
The JK Course Library
ink
jk0037 divider.line
divider
[5, 25, 2, 4] 1000×61px
1×1 stretch
layout default
tertiary
rule
panel #eec3e5floatz=-1mobile
jk0038 text.title
label
[5, 9, 5, 8] 200×91px
4×1 stretch
condensed · black · 3xl · lh 1.2 · ls 0.05em · uppercase
#6579be
03
ink
jk0039 text.eyebrow
subhead
[9, 24, 5, 6] 750×30px
3×1 stretch
mono · normal · lg · lh 1.3 · ls 0.05em · uppercase
#222222
Build your podcast empire
ink
jk003a text.heading
headline
[5, 22, 8, 11] 850×91px
4×1 stretch
display · normal · 4xl · lh 1.2 · ls normal
ink-strong
The Podcast Lab
—
jk003b text.body
body
[5, 19, 11, 16] 700×152px
3×1 stretch
body · normal · xl · lh 1.8 · ls normal
#222222
Take my easy-to-learn 5-Step system to plan, record, launch, market, and mone…
ink
jk003c button.quiet
action
[18, 24, 16, 18] 300×61px
2×1 stretch
body · bold · sm · lh 1.2 · ls 0.15em · uppercase
—
More info
underline
jkc002 divider.line
—
[5, 25, 4, 18] 1000×426px
1×1 stretch
layout default
line
rule
panel #fffffffloatz=-1mobile
Element-scope extensions in this band: node.typography, node.ink, node.panel, node.float, node.z, node.mobile, node.underline
Render against origin
441px short.
13
Course 04 — The List to Launch Lab
featuresfeatures.splitjk003l
Origin y
12142–13068
Origin height
926px
Build height
561px
Δ
-365px
Ground
canvas
space
0 rows
Elements
8
ORIGIN · y 12142–13068 · 926px · whiteBUILD · y 11314–11875 · 561px · jk003l
What this band is
The List to Launch Lab — number 04, Grow (or start) your email
list. Its folder tab is the yellow one.
Why this category and layout
The same layout, closing the set.
The section node
The whole subtree, exactly as it sits in doc.json. Collapsed to
the top level — open settings for the ground and the room below it, or
kids for the 8 elements the table below summarises.
"body": "<p>My exact email system and blueprint for starting, nurturing, and monetizing your very own email list. Designed for entrepreneurs who want to drive results—no matter what industry they serve or what offers they have to sell.</p>",
condensed · black · xl · lh 1.2 · ls 0.05em · uppercase
#6579be
The JK Course Library
ink
jk003f divider.line
divider
[5, 25, 2, 4] 1000×61px
1×1 stretch
layout default
secondary
rule
panel #f2dc53floatz=-1mobile
jk003g text.title
label
[5, 9, 5, 8] 200×91px
4×1 stretch
condensed · black · 3xl · lh 1.2 · ls 0.05em · uppercase
#6579be
04
ink
jk003h text.eyebrow
subhead
[9, 24, 5, 6] 750×30px
3×1 stretch
mono · normal · lg · lh 1.3 · ls 0.05em · uppercase
#222222
Grow (or start) your email list
ink
jk003i text.heading
headline
[5, 22, 8, 11] 850×91px
4×1 stretch
display · normal · 4xl · lh 1.2 · ls normal
ink-strong
The List to Launch Lab
—
jk003j text.body
body
[5, 19, 11, 16] 700×152px
3×1 stretch
body · normal · xl · lh 1.8 · ls normal
#222222
My exact email system and blueprint for starting, nurturing, and monetizing y…
ink
jk003k button.quiet
action
[18, 24, 16, 18] 300×61px
2×1 stretch
body · bold · sm · lh 1.2 · ls 0.15em · uppercase
—
More info
underline
jkc003 divider.line
—
[5, 25, 4, 18] 1000×426px
1×1 stretch
layout default
line
rule
panel #fffffffloatz=-1mobile
Element-scope extensions in this band: node.typography, node.ink, node.panel, node.float, node.z, node.mobile, node.underline
Render against origin
365px short.
The yellow has no surface role #f2dc53 is the seventh colour in the brand and the sixth surface
role is already taken. It survives here only because this card's tab names it
directly through node.panel. A brand of seven colours meeting a
vocabulary of six roles is the cleanest example on the page of a value that has
nowhere structural to live.
14
Favorite Things
featuresfeatures.splitjk003q
Origin y
13068–14040
Origin height
972px
Build height
778px
Δ
-194px
Ground
deep
space
6 rows · 182px
Elements
4
ORIGIN · y 13068–14040 · 972px · near-black #18161b (video)BUILD · y 11875–12653 · 778px · jk003q
What this band is
A near-black band. Favorite Things in the serif, a wry line —
Will I belt Julie Andrews? Maybe. — a paragraph, and a
Put on your comfy pants & go action.
Why this category and layout
features.split on a deep ground, which flips every ink in
the band to its light values without any element declaring it.
The section node
The whole subtree, exactly as it sits in doc.json. Collapsed to
the top level — open settings for the ground and the room below it, or
kids for the 4 elements the table below summarises.
"body": "<p>What does an entrepreneur / mom / midwestern role model come to love? Here’s where you find out! This is everything I have tested and loved, from <strong>my wellness and beauty holy grails</strong>, to what I’ll never stop reaching for in my closet. If you crave a life that’s <em>less</em> complicated you’re going to love what I’m loving.</p>",
What does an entrepreneur / mom / midwestern role model come to love? Here’s …
ink
jk003p button.pill
action
[3, 12, 17, 19] 450×61px
2×1 stretch
body · bold · base · lh 1.8 · ls 0.15em · uppercase
—
Put on your comfy pants & go →
—
Element-scope extensions in this band: node.typography, node.ink
Render against origin
194px short.
The ground is a video, and nothing can see inside it This band's backdrop is a near-black <video> element. No file
in origin/img/ matches it, so the band is deep with no
image — at that darkness it loses very little, but the document is asserting a flat
fill where the origin plays footage. Every DOM detector returns clean on a video,
so silence here is not evidence of stillness.
15
Beauty / Business / Health
featuresfeatures.threejk0040
Origin y
14040–14576
Origin height
536px
Build height
662px
Δ
+126px
Ground
primary
space
2 rows · 61px
Elements
10
ORIGIN · y 14040–14576 · 536px · orange #eb6c2fBUILD · y 12653–13315 · 662px · jk0040
What this band is
Three tiles on orange — Beauty, Business, Health — each a photograph with a title
and a one-line description.
Why this category and layout
features.three, and for once literally three columns of three content
units. The layout's authored placements are used unchanged.
The section node
The whole subtree, exactly as it sits in doc.json. Collapsed to
the top level — open settings for the ground and the room below it, or
kids for the 10 elements the table below summarises.
"body": "<p>Taking care of what I've been given.</p>",
"align": "center",
"colour": "ink-body"
},
"at": [19, 25, 18, 20],
"slot": "body",
"typography": {…}{6 keys
"family": "body",
"weight": "normal",
"size": "base",
"leading": "1.4",
"tracking": "normal",
"transform": "normal-case"
},
"ink": "#2b2b2b"
},
{…}{12 keys
"id": "jkf000",
"type": "divider",
"layout": "divider.line",
"tree": {…}{3 keys
"tag": "div",
"class": "flex h-full w-full items-center",
"children": […][1 item
{…}{2 keys
"tag": "div",
"class": "h-px w-full bg-@colour"
}
]
},
"min": [1, 1],
"derive": "stretch",
"settings": {…}{1 key
"colour": "line"
},
"at": [2, 24, 14, 20],
"float": true,
"z": -1,
"panel": {…}{1 key
"fill": "#ffffff"
},
"mobile": {…}{1 key
"at": [1, 9, 46, 58]
}
}
],
"ink": {…}{3 keys
"strong": "#6579be",
"body": "#6579be",
"muted": "#6579be"
}
}
Section-scope extensions in use: section.ink
Every element in it
Element
Slot
at → box
min / derive
Typography
Colour
Content
Extensions
jk003r image.plain
media
[1, 7, 3, 15] 300×365px
2×2 stretch
layout default
—
fave-beauty5040557bfd1a5ca2.jpg · image/jpeg
—
jk003s text.subheading
subhead
[1, 7, 16, 18] 300×61px
3×1 stretch
body · bold · lg · lh 1.6 · ls 0.1em · uppercase
ink-strong
Beauty
underline
jk003t text.small
body
[1, 7, 18, 20] 300×61px
3×1 stretch
body · normal · base · lh 1.4 · ls normal
#2b2b2b
Clean & simple. Just the way I like it.
ink
jk003u image.plain
media
[10, 16, 3, 15] 300×365px
2×2 stretch
layout default
—
fave-business4543ff7f61f7e9b5.jpg · image/jpeg
—
jk003v text.subheading
subhead
[10, 16, 16, 18] 300×61px
3×1 stretch
body · bold · lg · lh 1.6 · ls 0.1em · uppercase
ink-strong
Business
underline
jk003w text.small
body
[10, 16, 18, 20] 300×61px
3×1 stretch
body · normal · base · lh 1.4 · ls normal
#2b2b2b
The tools I use to get it all done.
ink
jk003x image.plain
media
[19, 25, 3, 15] 300×365px
2×2 stretch
layout default
—
fave-health007159afbbece2fb.jpg · image/jpeg
—
jk003y text.subheading
subhead
[19, 25, 16, 18] 300×61px
3×1 stretch
body · bold · lg · lh 1.6 · ls 0.1em · uppercase
ink-strong
Health
underline
jk003z text.small
body
[19, 25, 18, 20] 300×61px
3×1 stretch
body · normal · base · lh 1.4 · ls normal
#2b2b2b
Taking care of what I've been given.
ink
jkf000 divider.line
—
[2, 24, 14, 20] 1100×182px
1×1 stretch
layout default
line
rule
panel #fffffffloatz=-1mobile
Element-scope extensions in this band: node.typography, node.underline, node.ink, node.panel, node.float, node.z, node.mobile
Render against origin
The build runs 126px taller.
16
Ultimate Guide to Pinterest
featuresfeatures.imageLeftjk0045
Origin y
14576–15284
Origin height
708px
Build height
689px
Δ
-19px
Ground
primary
space
3 rows · 91px
Elements
4
ORIGIN · y 14576–15284 · 708px · orange #eb6c2fBUILD · y 13315–14004 · 689px · jk0045
What this band is
Your ultimate guide to Pinterest, with a screenshot of the guide's cover
on the left, a paragraph, and a Gimme that guide action.
Why this category and layout
features.imageLeft — the one layout in the category that names the
side the media sits on, and the origin puts it on the left.
The section node
The whole subtree, exactly as it sits in doc.json. Collapsed to
the top level — open settings for the ground and the room below it, or
kids for the 4 elements the table below summarises.
Everything you need to make the most powerful platform in my business go to w…
—
jk0044 button.pill
action
[14, 22, 16, 18] 400×61px
2×1 stretch
body · bold · sm · lh 1.8 · ls 0.15em · uppercase
—
Gimme that guide
—
Element-scope extensions in this band: node.typography
Render against origin
19px short. The closest match on the page after the stats band.
17
Bringing Real to Your Inbox — signup
contactcontact.simplejk0049
Origin y
15284–16048
Origin height
764px
Build height
670px
Δ
-94px
Ground
secondary + photo
space
4 rows · 122px
Elements
3
ORIGIN · y 15284–16048 · 764px · purple photographBUILD · y 14005–14675 · 670px · jk0049
What this band is
Bringing Real to Your Inbox over a purple photographic ground, a paragraph
about what the list actually sends, and a signup control.
Why this category and layout
contact.simple. This is the first band whose job is to collect
something rather than to explain something, and the category changes with it.
The section node
The whole subtree, exactly as it sits in doc.json. Collapsed to
the top level — open settings for the ground and the room below it, or
kids for the 3 elements the table below summarises.
{…}{8 keys
"id": "jk0049",
"type": "section",
"layout": "contact.simple",
"category": "contact",
"tree": {…}{2 keys
"tag": "section",
"class": "py-3"
},
"settings": {…}{3 keys
"background": "secondary",
"image": {…}{2 keys
"src": "asset:inbox",
"alt": "Jenna Kutcher in a blue suit against a purple wall"
"body": "<p>Screw the junk mail, I'm bringing "real" right to your inbox. Deep encouragement, tough questions, needle-moving challenges, and smart strategies to help you make your <strong>dream work</strong>. You in?</p>",
Screw the junk mail, I'm bringing "real" right to your inbox. Deep encouragem…
—
jk0048 button.solid
action
[9, 17, 16, 18] 400×61px
2×1 stretch
body · normal · sm · lh 1.2 · ls 0.1em · uppercase
—
I'M INTO IT. SIGN ME UP.
—
Element-scope extensions in this band: node.typography
Render against origin
94px short.
There is no form element The origin's signup is two inputs and a submit. The registry has seven element
types and none of them is a form control, so only the submit survives — as a
button. The band still reads as a signup because the words around it
say so, but the document cannot collect an email address.
18
Footer — signature, bio, socials, Get Around
contactcontact.splitjk004t
Origin y
16048–16592
Origin height
544px
Build height
601px
Δ
+57px
Ground
raised
space
2 rows · 61px
Elements
19
ORIGIN · y 16048–16592 · 544px · cream #f2efe8BUILD · y 14675–15276 · 601px · jk004t
What this band is
Cream ground. A signature in Jenna's own handwriting, a portrait masked into a
flower shape, a short bio, four social links, and a Get Around column of
navigation.
Why this category and layout
contact.split — two columns, identity on one side and navigation on
the other. Nineteen children, the most of any band except the freebies.
The section node
The whole subtree, exactly as it sits in doc.json. Collapsed to
the top level — open settings for the ground and the room below it, or
kids for the 19 elements the table below summarises.
I’m a small-town Minnesota photographer, podcaster, educator, and author with…
—
jk004d button.outline
action
[6, 12, 14, 16] 300×61px
2×1 stretch
mono · normal · sm · lh 1.8 · ls normal · uppercase
—
Over 1M followers?!
—
jk004e button.outline
action
[12, 18, 14, 16] 300×61px
2×1 stretch
mono · normal · sm · lh 1.8 · ls normal · uppercase
—
Listen to my #1 podcast
—
jk004f button.outline
action
[6, 12, 16, 18] 300×61px
2×1 stretch
mono · normal · sm · lh 1.8 · ls normal · uppercase
—
I wanna be your friend
—
jk004g button.outline
action
[12, 18, 16, 18] 300×61px
2×1 stretch
mono · normal · sm · lh 1.8 · ls normal · uppercase
—
I freaking love Pinterest
—
jk004h text.heading
headline
[19, 25, 3, 6] 300×91px
4×1 stretch
condensed · black · 3xl · lh 1.2 · ls 0.01em · uppercase
#eb6c2f
Get Around
ink
jk004i divider.line
divider
[19, 24, 6, 7] 250×30px
1×1 stretch
layout default
ink-strong
rule
—
jk004j text.small
body
[19, 22, 8, 10] 150×61px
3×1 stretch
display · normal · lg · lh 1.4 · ls normal
ink-body
Home
underline
jk004k text.small
body
[22, 25, 8, 10] 150×61px
3×1 stretch
display · normal · lg · lh 1.4 · ls normal
ink-body
Courses
underline
jk004l text.small
body
[19, 22, 9, 11] 150×61px
3×1 stretch
display · normal · lg · lh 1.4 · ls normal
ink-body
About
underline
jk004m text.small
body
[22, 25, 9, 11] 150×61px
3×1 stretch
display · normal · lg · lh 1.4 · ls normal
ink-body
Favorites
underline
jk004n text.small
body
[19, 22, 11, 13] 150×61px
3×1 stretch
display · normal · lg · lh 1.4 · ls normal
ink-body
Podcast
underline
jk004o text.small
body
[22, 25, 11, 13] 150×61px
3×1 stretch
display · normal · lg · lh 1.4 · ls normal
ink-body
The Shop
underline
jk004p text.small
body
[19, 22, 13, 15] 150×61px
3×1 stretch
display · normal · lg · lh 1.4 · ls normal
ink-body
Blog
underline
jk004q text.small
body
[22, 25, 13, 15] 150×61px
3×1 stretch
display · normal · lg · lh 1.4 · ls normal
ink-body
Speaking
underline
jk004r text.small
body
[19, 22, 15, 17] 150×61px
3×1 stretch
display · normal · lg · lh 1.4 · ls normal
ink-body
Contact
underline
jk004s text.small
body
[22, 25, 15, 17] 150×61px
3×1 stretch
display · normal · lg · lh 1.4 · ls normal
ink-body
Partnerships
underline
Element-scope extensions in this band: node.fit, node.typography, node.ink, node.underline
Render against origin
The build runs 57px taller.
One text run on the page is not in the document "BACK TO TOP", rotated against the footer's right edge. It is a scroll affordance
with no anchor behaviour available in the builder, so it is the single piece of the
origin's text that does not trace. 123 of 124 runs in outline.json reach
doc.json; this is the one.
19
Instagram strip + caption + copyright
contactcontact.simplejk0052
Origin y
16592–17250
Origin height
658px
Build height
734px
Δ
+76px
Ground
primary
space
1 rows · 30px
Elements
8
ORIGIN · y 16592–17250 · 658px · orange #eb6c2fBUILD · y 15277–16011 · 734px · jk0052
What this band is
The closing strip: @jennakutcher, an invitation to follow, a row of feed
tiles, and the copyright line.
Why this category and layout
contact.simple — an identity, an invitation, and a way through.
The section node
The whole subtree, exactly as it sits in doc.json. Collapsed to
the top level — open settings for the ground and the room below it, or
kids for the 8 elements the table below summarises.
"body": "<p>Join over 1 million followers on <a href="https://www.instagram.com/jennakutcher/">Instagram</a>, where I'm your mom friend with the backyard garden who also runs a multi-million dollar business, bakes gluten-free sourdough, and builds big dreams in the margins of nap time.</p>",
Element-scope extensions in this band: node.typography, node.ink, node.underline, node.runs
Render against origin
The build runs 76px taller.
The feed is live, and this band self-diffs The five tiles are pulled from Instagram at load. All five in the document are
the origin's own, in the origin's order, taken from this capture — but two loads of
the page a day apart show different photographs. This band and the AS SEEN IN strip
are why the whole page self-diffs around 2.7% between two shots of the
same URL, and why a diff percentage here has to be read as a pointer rather
than a score.
