Style guide
How Upright is put together.
Everything on this site comes from the styles, components and collections below. Change them here and every page follows.
Change the name in the Navigation component and the footer, then the home page headline.
Open the CMS. Sessions, Shorts and Programmes drive nearly every page. Tick Featured on one session to put it in the hero.
Edit the eight colour styles. This template is dark only, so each style has one value.
Change the font on the text styles, then type the same family name into the Font family control of the code components.
Select the form on the Contact page and choose where submissions go.
The two Legal items hold placeholder copy. Write your own before you publish.
Three pages wait for you: /subscribed, /thank-you and /coming-soon. In each form’s settings choose Redirect on success and pick /subscribed; send your checkout back to /thank-you. Use /coming-soon as the home page until you launch.
Ground
#0D0C0B. Page background
Surface
#171614. Picture placeholders
Ink
#EFECE6. Text and the main button
Soft
#B8B3A9. Secondary text on pictures
Muted
#8F8A81. Second half of headings, captions
Line
14% Ink. Hairlines
Accent
#7CA8FF. The dot, focus lines, sent state
On photo
#FFFFFF. Text over pictures
Ground #101211, Surface #1A1D1B, Ink #E9EEE8, Muted #89928A, Accent #B6F09C
Ground #120E0C, Surface #1D1714, Ink #F2E9E1, Muted #9A8A7E, Accent #F0A070
Ground #0C0E12, Surface #151920, Ink #E8ECF2, Muted #848C99, Accent #F2D16B
Display, h1
Undo the chair.
Section, h2
Shorts, under a minute.
Statement, h2
Ten minutes, on the floor.
Title, h3
Movement review
Subheading, h2 in articles
What we do
Lead
Each session comes with an upright cut.
Body
Send three clips. I send back fifteen minutes of video.
Small
Session, 24 min
Label
New sessions Tuesday and Friday
Nav
Sessions
Name
Mina Serrat
Menu
Programmes
Code. The landscape frame in the home hero that turns upright on scroll and lands in the Shorts row. One instance is the Turning frame, a second with the same Pair word is the Landing place. With different Pair words each simply shows its picture, as on the session pages.
Code. The pinned Programmes scene on the home page. One instance inside the Programmes list; Place and Total are bound to the list.
Code. The closing lanes on the home page. Each lane is a frame with the withLane override around a Shorts list of Lane tiles.
Lit statement
Code. The About statement on the home page. Its words light up one after another as it scrolls through the window. Type the sentence in the Text control.
Area tabs
Native layers on the Sessions page. Each tab sets the page variable Area; one list shows every session and a second shows the sessions whose Area field matches. Add a tab by copying one and typing the same word used in the CMS.
Canvas. Variants Desktop, Tablet, Phone and Phone open.
Canvas. Variants Primary and Secondary, each with a hover state. Label and Link are controls.
Canvas. Variants Default, Pending, Success and Failed for the contact form.
Canvas. Variants Closed and Open. Question and Answer are controls, bound to the FAQs collection.
Code. withSmallViewportHeight keeps the hero inside the visible window on phones; withMinContent protects the hero text; withVisibleHeightInside sizes the phone menu; withWiden opens the cover on session pages from a card to the full width as it scrolls.
Ten-minute preloader
Code. In the Main layout template. A hairline clock hand sweeps ten minutes and the page opens through the wedge it leaves. Plays once per browser session, in under a second, and removes itself. Change Minutes on the component, or delete the Preloader layer to turn it off.
Code. The drifting line of partner names on the home page. Type the names in one field, separated by commas. It moves only while it is on screen.
Canvas. Variants Default, Pending, Success and Failed for the Sunday letter form on the home page. Select the form to choose where sign-ups go.
Home hero, home Sessions grid, Sessions page and each session page. Fields: Title, Cover, Focus (where the subject is, left to right), Area, Length, Level, Summary, Date, Featured, Short title, Short length, Body.
Home Shorts row, the closing lanes and the Shorts page. Fields: Title, Cover, Length, Date.
Home Programmes scene, Programmes page and each programme page. Fields: Title, Cover, Weeks, Price, Summary, Order, Body, For.
Coaching rows on the home page and the Coaching page.
Kind words on the home page and the About page.
Journal page and each post.
Questions on the Coaching page and the programme pages.
Privacy and Terms. Placeholder copy.