Block themes tailored with type scales
shitate is a WordPress block theme developed by weblley. Designed for full site editing, it was listed in the official WordPress theme directory in September 2026. Of course, it is free to use.
In this article, I will explain why I created this theme, what problems I wanted to solve, and where I am headed.
The background of developing shitate
I work at a production company in Osaka, where I build corporate and business websites on a daily basis. Ever since I first touched WordPress about 10 years ago, I've used various themes, but as my number of projects increased, I began to face challenges regarding how to manage them and the delivery workflow.
The theme has font sizes and margins meticulously predetermined. That in itself is helpful, but when you try to match client requests or your own design, you end up overriding them one by one with CSS. Change the heading size, and the margin balance falls apart; fix the margin, and it gets too cramped on mobile. Overrides call for more overrides, leading to a battle of specificity, and ultimately resulting in "somehow disjointed designs." I have repeated that experience many times.
When the WordPress site editor started becoming practical, I thought it was time to change my perspective here. Instead of deciding on the fine details first,Determine only the “ratio,” and derive both the text and the margins from that.We are making this our theme. In today's environment where display sizes vary, instead of assigning fixed values to text and whitespace, we set ratios to establish design rules, allowing us to focus on the content from then on. That is the starting point of shitate.
The problem you want to solve with shitate
The text and margins are determined separately.
In many themes, the font size steps and margin steps are defined independently. Therefore, when you make a heading larger, you have to manually readjust the margin above it.
shitate uses a type scale (such as a geometric progression of font sizes like typescale.com) as a standard,Keep the margins at the same ratio and with the same names.We are defining it. If font sizes range from XS to XXXL in 8 steps, the margins also range from XS to XXXL in 8 steps. Since both are calculated from body size and ratios, changing the ratio makes the text and margins move together. The margin above a heading is not a fixed value, but linked to the surrounding spacing.
You can choose from 8 different ratios, ranging from subtle ones like the minor second (1.067) to bold ones like the golden ratio (1.618). I named them after musical intervals partly because I enjoy music myself, and partly for personal reasons—simply because it felt novel and cool.
I don't want to manage margins with breakpoints
The approach of writing different margins for each screen width, such as "80px on PC and 40px on smartphones," doubles the number of values to manage and tends to break at intermediate widths.
The large margins of shitate are clamp() and is fluid, and when the screen becomes narrow, the entire rhythm naturally tightens. There are no media queries in the theme's CSS. The policy is to resolve this using ratios and fluid values rather than screen widths. As an exception, only the user's motion reduction preference (prefers-reduced-motion) is respected.
Changing the color means dealing with the hassle of derivative colors.
When changing the brand color, you also want to change the hover color, light background color, border color, and muted text color at the same time. However, normally you have to reset each of them manually.
The shitate palette is divided into 4 base colors (background, text, brand color, accent) and 5 derived colors (light background, borders, subtle text, hover, etc.). If you change the base colors in the site editor, the derived colors will automatically update. Of course, if you want to set the derived colors individually, those settings will take precedence.
Using CSS Custom Properties as Configuration Entry Points
All values of shitate are--st-* are consolidated into CSS custom properties named: ratios, body size, each tier of text and spacing, border radius, content width, and colors. Since the theme contents simply reference these,Overwriting just one variable changes the entire site.
I designed this as an "API" for creators. Instead of writing CSS to suit the theme's needs, you converse with the theme through the convention of variables. It is structured to prevent cascading overrides and specificity battles from happening in the first place.
On the other hand, a customizer is also available for those who don't write code. By simply choosing the aspect ratio and body text size, you can change the look and feel of the entire site while viewing a live preview.
What to aim for with shitate
The themes used by production agencies and those managed by clients after handover are often entirely different. They lack the flexibility needed by creators while being too difficult for operators.
shitate aims toA theme that fits comfortably in both handsis. During production, the foundation is quickly assembled using variables and ratios, and after handoff, it can be safely updated using only the site editor. To achieve this, features are kept to a minimum. No web fonts are bundled, there are no custom blocks, and JavaScript is limited to a small script for the mobile menu. Because there is nothing superfluous, you won't be constantly chasing updates, allowing you to run your site for a long time with peace of mind.
Using simple things for a long time. I believe that is the greatest value of this theme.
What kind of sites it is suitable for
shitate is designed for the main websites of companies, stores, and offices. For example, corporate websites for retailers and manufacturers, portfolio websites for construction companies and contractors, and office websites for professional practices such as tax accountants and labor consultants. The goal is to make it possible to use the same theme for both websites built by production agencies on commission and websites updated by the clients themselves after handover.
There are 7 types of templates included (top, static page, full-width static page, post, archive, search results, 404). With this combination, you can assemble pages such as the following:
- Company Profile / Office Overview (Message from the CEO, History, Access)
- Business details / Service introduction (one page per full-width template)
- List and details of construction examples, track records, and manufactured products
- Staff Profiles, Testimonials
- News, Blog, Careers
- Contact link
There are four included patterns (full-width hero, 3-column image cards, 4-column grid, 2-button CTA). Starting by rearranging these, and then choosing the proportions and colors, sets the overall tone. You can choose the color scheme from four style variations (Dark / Cream / Mist / Mono).
Conversely, sites that require built-in mechanisms—such as checkout, member functions, or reservation systems—fall into the domain of dedicated plugins rather than themes. shitate avoids stepping into that area, focusing entirely on design and foundations.
Extension plugin shitate pro blocks
The theme focuses purely on design, while the blocks for presentation are separated into a paid plugin shitate pro blocks. It includes blocks for speech bubbles, tables of contents, accordions, modals, conditional display, and layout features. Because these blocks operate by referencing the theme's variables, adjusting proportions will also automatically organize the block spacing.
The theme is free under the GPL, while the plugins are sold as a paid option that includes updates and support. The theme is fully functional on its own, with a modular design that allows you to add features as needed.
Give it a try
You can install it by searching for shitate in the WordPress dashboard under Appearance > Themes > Add New. If you find anything confusing or have any suggestions that would be helpful while using it, please let me know. Since this theme was born on the front lines of production, I hope to grow it through real-world feedback.