KuratoDocumentation

Building your site

Customizer settings

All of Kurato's options live in one place: Appearance > Customize > Kurato. You see each change in the preview before you publish it.

Open the Customizer#

Go to Appearance > Customize, or click Customize in the black bar at the top of your site.

The Customizer with its sections on the left and the site preview on the right.
  1. Site Identity: logo, day logo, title, tagline, and site icon. See Logo and site icon.
  2. Kurato: every option this theme adds. The rest of this page goes through it.
  3. WooCommerce: the store notice, product catalog, and checkout options from WooCommerce itself.
  4. Click Publish to save. Nothing changes on your site until you do.
The Kurato panel with its ten sections.

The Kurato panel has these sections:

Colors and mode#

The Colors and mode section.
  1. The mode the site opens in.
  2. The day and night button for visitors.
  3. The accent color, one for each mode.

Kurato has two modes. Night is dark, and day is the same design in a light print. Each mode has its own colors.

SettingWhat it doesDefault
Mode this site opens inNight, Day, or Follow the visitor's system (the light or dark setting of the visitor's device).Night
Let visitors switch modeShows the sun and moon button in the header and the menu. The visitor's choice is remembered on their device.On
Accent color, nightThe red of the record light, the scene numbers, and the playhead.#FF4B33
Accent color, dayThe same accent, darker, so it reads on a light page.#BE2D17
Background, night and dayThe page color in each mode.#0A0B0D and #F3F0EA
Text, night and dayThe text color. The gray of captions and labels is mixed from the text and the background.#E9E6DF and #15161A
Panel, night and dayThe color of every other band on a page. Keep it close to the background.#101215 and #EDEAE2

Typography#

The Typography section.
  1. Font pairing: the four fonts the theme uses.
  2. Base size: all text sizes together.
  3. Display size: only the large titles.

Kurato uses four fonts together: a display serif for titles, a reading font, a label font for small capitals and buttons, and a monospace font for the timecode.

SettingWhat it doesDefault
Font pairingKurato (bundled): Cormorant Garamond, Crimson Pro, Kreon, and JetBrains Mono, served from your own site.
Broadsheet: Spectral, Newsreader, Archivo, and IBM Plex Mono.
Studio: Fraunces, Source Serif 4, Space Grotesk, and DM Mono.
Gallery: Literata, Work Sans, Oswald, and Roboto Mono.
Marquee: Faustina, Lora, Barlow Condensed, and Fira Code.
Custom: four Google fonts you name.
Kurato (bundled)
Custom pairing fieldsShown only for Custom. Write each family name exactly as fonts.google.com writes it, for example Playfair Display. An empty field keeps the bundled font in that place. Only the regular style of each family is loaded.Empty
Host Google fonts on this siteShown for the Google pairings. Serves the fonts from your site instead of Google's. Download the pairing first on Kurato > Fonts. See Google fonts and privacy.On
Base sizeSmall, Regular, or Large. Moves every text size together.Regular
Display sizeCompact, Regular, or Large. Changes only the hero titles and the section headings.Regular
The Header section.
  1. The timecode beside the logo.
  2. How the menu opens.
  3. The image beside the menu.
  4. What the header does when the visitor scrolls.
The top of the artist demo with the header parts marked.
  1. Your logo, or the site title.
  2. The timecode. It counts as the visitor reads the page.
  3. The cart, when WooCommerce is active.
  4. The day and night button.
  5. The menu button.
SettingWhat it doesDefault
Show the timecodeThe running readout beside the logo. It counts the page as if it were film.On
Frames a second24, 25, or 30. The last pair of digits in the timecode counts up to this number.24
Default page runtime, in secondsHow long a page "runs" for the timecode, unless the page sets its own. See Options for one page.180
Menu styleThe full-screen menu on every screen, or inline links on wide screens with the full-screen menu behind the menu button.Full-screen menu
Show the monitor in the menuThe image beside the list in the open menu, on wide screens. Turn it off and the list takes the full width.On
Fallback menu stillShown on the monitor for an item that has no image and links to a page without a featured image. Without it, that frame is black.None
Behavior on scrollAlways visible; hides when scrolling down and returns on scrolling up; or scrolls away with the page.Always visible
Show a search buttonBeside the mode button. It opens the search field in the menu.Off
Show breadcrumbsA trail above the title of every page, post, project, and archive. Uses the Yoast SEO or Rank Math trail when one of them is active.Off

The open menu looks like this:

The full-screen menu, open, with the Home item and its eleven sub-items, and the monitor image.
  1. A top-level menu item, numbered as a scene.
  2. The count of items under it, and the button that opens them.
  3. The monitor: the item's still, with the item's note on it.
  4. The day and night button.
  5. The items under it, numbered 01A, 01B, and so on.

Motion#

The Motion section with its seven switches.

Each effect has its own switch. An effect you turn off costs nothing: the theme stops loading the code behind it. Visitors whose device asks for reduced motion always get a still version.

SettingDefault
Cut between pages: two bars close over the page and open on the next one.On
Smooth scrolling: the page glides instead of jumping.On
Film rail instead of the scrollbar: a film strip down the edge of the page, with a timecode under the pointer.On
Reveal as you scroll: headings and images appear as they come into view.On
Film grain: a faint grain over every image.On
Magnetic buttons: a button moves a few pixels toward the pointer. Mouse and trackpad only.On
Play hover previews on touch screens: a project's preview clip also plays on phones when its card comes into view.Off

Projects#

The Projects section.
  1. The layouts visitors can switch between.
  2. The layout the archive opens in.
  3. The filters above the archive.

These settings change the project archive, the page that lists all your projects (for example /work/).

SettingWhat it doesDefault
Layouts the archive offersContact sheet, Shot list, Grid, and Contact sheet with mixed sizes. Visitors switch between the ones you tick. Tick one and the switch is hidden.Contact sheet, Shot list, Grid
Layout the archive opens inOne of the four layouts.Contact sheet
Columns in the grid layoutTwo, Three, or Four. Phones always show one column.Three
Projects a page holds1 to 48.12
Filter the archive byType, Client, Year, or No filters.Type
Name of the runtime columnThe label of the runtime column. For example, "Frames" for photo series or "Length" for films.Runtime
Reaching the rest of the archivePages with previous and next links; a "load more" button; or loading more as the visitor scrolls.Pages

Blog#

The Blog section.
  1. The blog sidebar: none, right, or left.
  2. How the journal lists posts.
  3. The share links under each post.
SettingWhat it doesDefault
SidebarNo sidebar, on the right, or on the left. Fill the Blog sidebar under Appearance > Widgets to use it.No sidebar
Post listRows (the journal list), or cards with an image, three across.Rows
Reaching older postsPages, a "load more" button, or loading more as the visitor scrolls.Pages
Show the featured image on a postThe wide image under the post title.On
Show the reading timeAn estimate in the meta line of each post.On
Show the authorThe author box under each post. Useful when more than one person writes.Off
Show share linksLinks to share the post.On
Share links to offerCopy link, X (Twitter), Facebook, LinkedIn, Pinterest, Reddit, WhatsApp, Telegram, Tumblr, and Email. These are plain links: no script from the networks is loaded.Copy link, X, Facebook, LinkedIn, Pinterest, Email

404 page#

The 404 page section.

The page a visitor sees when an address leads nowhere. Leave a field empty to keep the theme's own text.

  • Title: the theme's own title is "This one was cut." The last word is set in italic.
  • Text: one or two sentences under the title. You can use <em>, <strong>, <br>, and a link.
  • Still: an optional wide image under the text.
The Footer section.
  1. Closing line: one sentence above the footer links. Leave it empty to skip it.
  2. Name across the last frame: the large name at the end of every page. The playhead writes it in as the visitor reaches the end. Short names read best. Wrap a word in <em> and </em> to set it in italic. Leave it empty to use the site title.
  3. Copyright line: write {year} where the current year belongs. Leave it empty for the year and the site title.

Show the rewind link (on by default) adds a button at the end that takes the visitor back to the top.

Contact and social#

The Contact and social section with an email, a phone number, and three profiles.
  1. Email address and Phone number: shown in the full-screen menu and the footer.
  2. Social profiles: click Add a profile, pick a network, and paste the address of your profile. They appear in the order you add them. To change the order, remove a profile and add it again./li>

The networks are Vimeo, YouTube, Instagram, Letterboxd, X (Twitter), Facebook, LinkedIn, Behance, Dribbble, TikTok, Pinterest, Flickr, 500px, GitHub, Mastodon, Threads, Bluesky, Tumblr, Email, and RSS. The profiles also fill the Kurato: Social links widget.

Shop#

The Shop section.

This section appears when WooCommerce is active.

SettingDefault
Open the cart in a drawer: adding a product slides the cart in from the side.On
Quick view: a product opens in a window over the list.On
Wishlist: a heart on each product.On
Products in a row: Two, Three, or Four.Three
Shop sidebar: none, a column on the right or left, or a filter panel that slides in from the side.A column on the right

More about the shop is in Shop.

Kurato 1.0.0 documentation, updated 2026-10-03. Online at kurato.jawad.work/docs/.