PREMM ANAND — SECTION STYLE REFERENCE
Every distinct section pattern from the site HTML. Use this page as a design reference for spacing, typography hierarchy, and layout patterns.
STYLE 01 — PAGE HERO
Page Title
The H1 headline — large, measured, never rushed.
Body-large descriptor. Sits beneath the divider rule. Max-width 560px. Used on every page hero to frame the page's intent without overpowering the headline.
STYLE 02 — TWO-COLUMN TITLE SPLIT
Section Eyebrow Label
The section H2 — 1fr column, max-width 520px.
The right column is always exactly 375px wide. It sits aligned to the bottom of the left column (stackAlignment="end"). Used for an intro sentence, pull statement, or contextual note.
STYLE 03 — DIVIDER ROW / 160px LABEL COLUMN
Label column
Row title or service name goes here
The content column is 1fr and takes all remaining width. Label column is fixed at 160px with a 60px gap. Row padding is 50px top and bottom. Dividers are /Black 20 at 1px height.
Second row
Each row is separated by a /Black 20 divider. This pattern is used for service listings, outcomes, principles, and any tabular content that needs a structured left-aligned label.
STYLE 04 — PULL QUOTE
A pull quote lifts one sentence from the surrounding content. It appears in /Heading 2 style, full-width, left-aligned. No border. Emphasis through scale alone. Typically max-width 720px.
The difference was rarely talent. It was rarely commitment. It was the conditions — what the environment was doing to both.
Normal body text resumes after the pull quote. Used on the Work page Outcomes section and the Home page scenario blocks. The contrast between body-regular and /Heading 2 creates the visual pause.
STYLE 05 — STANZA PROSE
Stanza prose is full-width narrative text with generous vertical spacing between each paragraph. Each paragraph is a separate text node — 28px gap between them.
Used for the Opening Observation on Perspective and for sustained narrative passages on the Home page. No label column. No dividers. Let the words breathe.
Inner container is max-width 860px — narrower than the standard 1140px — to preserve comfortable reading line lengths across a wide viewport.
Each paragraph is deliberately short. One idea. One line where possible. The white space between them is structural, not decorative.
A closing line in Inter-500 signals the end of the prose block — and the transition to what comes next.
STYLE 06 — 4-CARD GRID (S·E·V·A)
The Framework
Four cards — letter, title, description.
White cards, 10px border-radius, 30px padding. Fixed height 260px. Letter uses /Premm/Display 1. Sits on /Background. 4-column grid with 20px gap.
S
State
The internal condition of a person before a word is spoken.
E
Environment
The conditions shaping what is accessible in people.
V
Values
What is actually lived under pressure, not intended.
A
Actions
The visible touchpoints through which the invisible is felt.
STYLE 07 — ARTICLE / ESSAY CARD
STYLE 12 — BACKGROUND ALTERNATION PATTERN
Category Tag
Essay Title — Full Heading in /Heading 2
One-sentence subtitle. Gives the reader a reason to continue without summarising the whole piece.
→
Second Category
A Second Card — Same Layout Pattern
Cards stack vertically with 20px gap. Arrow right-aligned. Background is /Background. Border-radius 10px. Padding 40px all sides.
→
STYLE 08 — NUMBERED PRINCIPLE ROW
The Principles
Numbered rows — 60px number col, 1fr principle text.
Number uses /Heading 3 at 60px fixed width. Principle text uses /Heading 2. Dividers at /Black 20, 1px. 24px vertical padding per row.
01
Bring your standard before you ask for one.
02
Presence changes the nature of the act.
03
Timing is not a detail. It is intelligence.
04
Care is not a feeling. It is a visible discipline.
STYLE 09 — FIELD NOTE
Field Notes
Quote in /Heading 2. Small label in /Heading 3 below it.
Max-width 800px for quote text. 40px padding per entry top and bottom. Full-width /Black 20 dividers between entries.
"A protocol covers what you anticipated. A culture covers everything else."
On Standards & Culture
STYLE 10 — TWO-COLUMN CONTACT LAYOUT
Location
Switzerland — working internationally.
butlercoachprem@gmail.com
Usually most relevant for
Founders and operators
General managers
Hospitality and wellness leaders
Tell me a little about what you are exploring.
Name
Your name
What are you exploring?
Share a little context…
Fields: /Background fill, /Black 20 border, 4px radius. Single-line 50px. Multi-line 120px+. CTA button (PfFxmJ7aZ) below. 80px column gap.
STYLE 11 — CTA BUTTON GROUP
CTA Placement
Solid primary + ghost secondary. Always at section close or page end.
componentId: PfFxmJ7aZ. Solid variant: u8FhJ3H4W. Ghost variant: XEAxlWDWG. Label prop: yipc_sxhX. Link prop: HtaTMqPy4. Both 48px height, gap 12px.
Primary Action
Secondary Action
Pages alternate between White (rgb(255,255,255)) and Background (/Background = #F7F7F7 cream) sections. This creates visual rhythm without borders or shadows. Hero sections always start White. Sections alternate from there.
White
rgb(255, 255, 255)
Background
/Background — #F7F7F7 cream
Orange
rgb(232, 119, 34) — accent only
Black
rgb(0, 0, 0) — header / dark emphasis
Alternation rule
Odd sections: White → Even sections: /Background. Hero: White with padding 120px 60px 80px 60px. All other sections: 100px 60px 100px 60px. Never two White sections or two /Background sections in a row on the same page.
