Style guide
How Onetake is put together, and where to change it. This page is hidden from search engines; remove it from the footer before launch if you like.
Setup in six steps
1. Rename the site: Site settings, then the title and description. Change the wordmark text in the Navigation component.
2. Swap the photos: Shows, Voice notes, Journal and Team are CMS collections. Each item has its own photo field.
3. Change the hero: select Session window on the home page and edit the show, the four guests and the result in the right panel.
4. Recolour: edit the colour styles. Each one has a light and a dark value; the switch in the navigation picks between them. Dark is the default; the switch's Start in control changes it.
5. Connect the form: select the Contact form and add your email under Send to.
6. Publish, then check the hero on a phone: below 1200px wide the window sits under the headline instead of pinning.
Colour styles
Page
Page deep
Surface
Fill
Ink
Soft
Muted
Hairline
Accent
Accent tint
Rec
Gradient from
Gradient to
Text styles
Display (h1)
Record from anywhere.
Display 2 (h2)
Recorded Monday. Out Thursday.
Heading (h3)
Edit and mix
Lead
Onetake records, edits and publishes interview podcasts.
Prose
Long text on show and journal pages.
Body
Rows, answers and short descriptions.
Label
Floor Plan, ep. 32
Small
Every other Tuesday
Components and collections
Session window
The hero. Pins from 1200px wide; edit the show, guests and result in its panel. The headline column beside it is ordinary text.
Hero pattern
The faint chart behind the home hero (PolarPattern): a microphone's pickup chart centred on the call window, with one ring traced in Gradient from and to. Centre X and Y move it, Ring size picks which ring is green, Strength sets how faint it is. Tablet and phone show the hairlines only (Green ring off).
Transcript
The statement that lights up as you scroll. A | in the text starts the second sentence.
Chapters
Reads a show’s Chapters field: one chapter per line, time then title.
Loudness, First week, Review notes, Invite
Before-and-after mix, first-week downloads, client notes on the timeline, and the booking invite. Each is edited in its own panel.
Voice note
Inside the Voice notes collection list. Name, role, quote, length and photo come from the CMS.
On-air logo
The logo mark and the pill in the navigation (OnAir). Set the same studio days, hours, time zone and city on both. In studio hours the mark glows and the pill says what is recording.
Reading clock
In the footer (ReadClock): the page as an episode, m:ss of m:ss, with Back to 0:00. Pace sets how many pixels of page make a second.
Green room
On Services (GreenRoom): the screen a guest sees before a session. The microphone check passes on its own; ticking Quiet room lights the join button.
Speed control
Above each post (SpeedRead): 1× shows the whole post, 1.5× the summary and key points, 2× only the key points. Key points is a Journal field, one point per line. The post body carries withSpeedBody.
Theme switch
The round button in the navigation (ThemeToggle). Dark is the default; Start in sets what a first-time visitor sees (Dark, Light or Device), and each visitor's choice is remembered.
Collections
Shows (with show pages), Services (with service pages), Journal (with posts and the Key points used by the speed control), Voice notes, Questions, Team.