Every story has its own scale
TEXT.H1First level header
H1 size inside the text area. The page title is presented with a separate header — its options are shown below.
Style Guide
A catalogue of publication styles: typography, images, galleries, cards, video and header layouts. Compare live examples, choose a style and copy its chat command. Each example has a permanent code. Specify that code and a location in the article to apply the style to the right passage or image.
Sometimes “a little wider” means 800 pixels, and sometimes it means almost the entire screen. Here you can point your finger at the desired option and copy its code. The words finally had a common size.
Select a sample, copy the command and specify a location in the material. Each technique has a constant code: QUOTE.RULE, IMAGE.WIDE or, for example, GALLERY.TWO-ONE.
Text and rhythm
TEXT.H2Section title
A new thought gets a noticeable start. This is the main level within the article.
The title gives the text direction
TEXT.H3Subtitle
The section has grown — let’s divide it into understandable parts.
Now you can see the details
TEXT.H4Small subtitle
Another level when without it it is more difficult for the reader to navigate.
A slight twist within the section
TEXT.H5Compact header
Rare extra level. Does not replace normal oily secretions.
Quiet clarification
TEXT.H6Smallest header
The last level of the hierarchy; in most articles we don’t get to it.
The last step
TEXT.PARAGRAPHRegular paragraph
The basis of the article. Here the text can calmly explain, connect and tell.
Design works when you stop noticing it. The paragraph maintains a comfortable line width, the link knows its place, and the next heading appears exactly when it’s time to change the topic.
TEXT.BOLDOily discharge
Highlight an important word while maintaining a normal paragraph.
What is important in this phrase is one solution. The rest of the words don’t need to be spoken louder.
TEXT.UNDERLINEUnderscore
A small trick inside the line. Each selection has its own task.
Example: underlined fragment
TEXT.STRIKEStrikethrough
A small trick inside the line. Each selection has its own task.
Example: old wording
TEXT.CODECode on line
A small trick inside the line. Each selection has its own task.
Example: image.wide
TEXT.SUPSuperscript
A small trick inside the line. Each selection has its own task.
Area — m2
TEXT.SUBSubscript
A small trick inside the line. Each selection has its own task.
Formula — H2O
TEXT.LINKText link
The regular link remains part of the offer.
When you need a set of colors and buttons, open Design system.
QUOTE.RULEQuote with a vertical rule
Geist Mono and vertical stripe. Highlights an idea while maintaining the width of the text.
A good quote leaves the reader with a thought and the design only the work of highlighting it.
QUOTE.ACCENTAccent quote
Large line without stripe. For an introduction or a thought worth dwelling on.
The reader notices the rhythm first. Then — what they wanted to tell him.
LIST.BULLETBulleted list
Several equal thoughts, including nested points.
- First we choose the meaning
- Then — the form
- Width
- Rhythm and accents
- Then we look at the result
LIST.NUMBERNumbered list
Order is important: steps, sequence, consistency.
- Find an example in the catalog
- Copy his code
- Indicate place in publication
TEXT.DIVIDERSeparator
A pause between parts of a story without a new title.
TEXT.CODE-BLOCKCode block
Commands and examples get their own place.
Стиль: IMAGE.WIDE
Пропорция: RATIO.4X5
Место: после второго абзаца
Текст: без измененийTEXT.TABLETable
When several options are easier to compare side by side.
| Task | Technique |
|---|---|
| Highlight a thought | Quote with a vertical rule |
| Show episode | Gallery |
| Continue conversation | Card with link |
Proportions
For new materials, we keep five main presets: 9:16, 16:9, 4:5, 5:4 and 1:1. The rest are additional options for photography and previews. Proportion is the source form; “regular / wide / full width” — block size on the page.
For Instagram, we distinguish between photo feeds and vertical videos. 9:16 preparing for Stories/Reels; for photo tape, the basic portrait is 4:5. Application, API, and advertising formats may vary. For the blog, all these proportions are preserved without cropping; Before transferring to Instagram, we select the appropriate preset for a specific placement.
RATIO.9X169:16
Vertical screen · 1080 × 1920. Main canvas for Stories and Reels. For the photo in the feed you will need a separate frame.
RATIO.16X916:9
Horizontal video · 1920 × 1080. Good for YouTube, screencasts and wide illustrations.
RATIO.4X54:5
Portrait · 1080 × 1350. The main vertical format for photos and strip cards.
RATIO.5X45:4
Calm horizontal frame · 1350 × 1080. The same pair of sides, rotated 90°.
RATIO.1X11:1
Square · 1080 × 1080. Universal card, cover or compact plot.
RATIO.3X43:4
Additional portrait · 1080 × 1440. Save as a separate preset; We check the compatibility of a specific upload method on Instagram before release.
RATIO.4X34:3
Classic horizontal frame · 1440 × 1080. Good for photographs and detailed diagrams.
RATIO.3X23:2
Photographic horizontal frame · 1620 × 1080. Natural format of many cameras.
RATIO.2X32:3
Vertical photo · 1080 × 1620. The entire photo is saved for the blog; For the Instagram feed we are preparing a separate 4:5 crop.
RATIO.191X1001.91:1
Wide card · 1910 × 1000, or 1200 × 630 with almost the same ratio. Useful for link previews.
Images
IMAGE.REGULARNormal image
Remains in the text column: maximum 800 px.
IMAGE.WIDEWide Image
Extends beyond the text but retains the side margins. Maximum 1400 px.
IMAGE.FULLFull width
Reaches to the edges of the publication area. The sidebar remains in place.
IMAGE.CAPTIONCaption under the image
The caption is a separate line under the picture. There is no end point; alt describes the image for those who can’t see it.
Galleries
From one to three images in a row. The gallery has a common caption; Each picture has its own alt. Individual labels are not displayed in the current grid. On the phone, rows can be rearranged according to the rules of the topic.
GALLERY.TWOTwo nearby
The total width of the row, the original proportions and one caption for the entire series. The order of images is common to all languages.
GALLERY.THREEThree nearby
The total width of the row, the original proportions and one caption for the entire series. The order of images is common to all languages.
GALLERY.TWO-TWOTwo plus two
The total width of the row, the original proportions and one caption for the entire series. The order of images is common to all languages.
GALLERY.TWO-ONETwo on top, one on bottom
The total width of the row, the original proportions and one caption for the entire series. The order of images is common to all languages.
GALLERY.ONE-TWOOne on top, two on bottom
The total width of the row, the original proportions and one caption for the entire series. The order of images is common to all languages.
GALLERY.MIXEDDifferent proportions in one series
The total width of the row, the original proportions and one caption for the entire series. The order of images is common to all languages.
GALLERY.REGULARGallery by text width
The same technique, collected in a regular column.
GALLERY.FULLFull width gallery
The series reaches the edges of the publication area.
Cards
Here are all the cards found in current publications, and separately labeled ready-made theme options. New inscriptions explain the technique itself, the images are replaced with placeholders.
CARD.BOOKMARKLink card
When a link deserves a little cover, title, and explanation.
CARD.CALLOUTCallout note
A gray background separates the clarification from the main story.
A small clarification. Not every comment needs a new section: sometimes a balloon that remains next to the desired paragraph is enough.
CARD.FILEFile for download
Title, explanation and the file itself in one block.
CARD.BUTTONButton in text
A separate action when a regular link is not enough.
CARD.CTA.MINIMAL-IMAGECompact CTA with image
The option is already found in publications. The text and picture here are replaced by educational samples.
Here the story pauses and suggests the next step. The picture supports the idea, and the button clearly tells you where to go.
Select next step
CARD.CTA.MINIMALCompact CTA without image
The option is already found in publications. The text and picture here are replaced by educational samples.
Here the story pauses and suggests the next step. The picture supports the idea, and the button clearly tells you where to go.
Select next step
CARD.CTA.IMMERSIVELarge CTA with image
The option is already found in publications. The text and picture here are replaced by educational samples.
Formatting example
Here the story pauses and suggests the next step. The picture supports the idea, and the button clearly tells you where to go.
Select next step
CARD.CTA.CENTEREDLarge CTA in the center
The option is already found in publications. The text and picture here are replaced by educational samples.
Formatting example
Here the story pauses and suggests the next step. The picture supports the idea, and the button clearly tells you where to go.
Select next step
CARD.HEADER-SPLITLarge banner with image on the side
Two fields: illustration and short message. The full-width option is already used in the blog.
This thought has its own cover
A large block changes the tempo of the page. This is where you can introduce a project or end a story with a clear sentence.
View exampleCARD.TOGGLEDrop-down block
The short question is immediately visible. Click on it to reveal the detailed answer.
What can be hidden under disclosure?
An addition that is not useful to every reader: a detailed composition, an explanation, or a long answer.
CARD.PRODUCTProduct card
Ready theme design. Not used in current publications; We add prices and ratings only based on real data.
The product name will go here
Here is a short description. The sample shows the composition without a fictitious price or rating.
CARD.BUTTON.CENTERCenter button
The same action, located in the center of the column.
CARD.BUTTON.SECONDARYCalm button
Secondary action with secondary design.
CARD.CALLOUT.ACCENTAccent callout
An accent rule highlights the note. Text stays on the page background, without a filled button shape.
There is an important caveat here. The callout keeps it close to the thought it relates to.
CARD.CTA.WHITECTA on white background
Light version of the card; The color is also noticeable in a dark theme.
The next step can be suggested calmly. All it takes is a short explanation and a clear link.
Open example
CARD.HEADER.ACCENTBanner with accent color
A compact pause with a large heading and a color accent.
Pause that is visible
One strong accent between two calm parts of the text
CARD.SIGNUPSubscription card
Designing a form from a theme. In the catalog, the fields are disabled: the mailing connection is selected separately.
A good story has a sequel
Here you can invite the reader to subscribe to the following publications
CARD.CALLOUT.EMOJIEmoji Callout
The emoji on the left sets the intonation, the text on the right reveals the idea.
💡
Here you can leave a find, advice or important clarification. The little note also has a voice.
CARD.CALLOUT.BLUEBlue callout
Ready color from the theme palette. The background color and emoji can be selected separately.
🌊
A blue callout highlights a short thought. Choose a shade that suits the mood of the material.
CARD.CALLOUT.GREENGreen callout
Ready color from the theme palette. The background color and emoji can be selected separately.
🌱
A green balloon highlights a short thought. Choose a shade that suits the mood of the material.
CARD.CALLOUT.YELLOWYellow callout
Ready color from the theme palette. The background color and emoji can be selected separately.
☀️
A yellow callout highlights a short thought. Choose a shade that suits the mood of the material.
CARD.CALLOUT.REDRed callout
Ready color from the theme palette. The background color and emoji can be selected separately.
📍
A red balloon highlights a short thought. Choose a shade that suits the mood of the material.
CARD.CALLOUT.PINKPink callout
Ready color from the theme palette. The background color and emoji can be selected separately.
🌸
A pink balloon highlights a short thought. Choose a shade that suits the mood of the material.
CARD.CALLOUT.PURPLEPurple Callout
Ready color from the theme palette. The background color and emoji can be selected separately.
🔮
A purple callout highlights a short thought. Choose a shade that suits the mood of the material.
CARD.CALLOUT.WHITELight leader
Ready color from the theme palette. The background color and emoji can be selected separately.
💭
A light-colored callout highlights a short thought. Choose a shade that suits the mood of the material.
Video
VIDEO.FILE.PORTRAITVertical video
File 9:16, regular column. The video is started by the reader himself.
VIDEO.FILE.LANDSCAPEHorizontal video
16:9 file in wide format. Suitable for screencasting and interface demonstration.
VIDEO.FILE.FULLFull width video
The same file to the edges of the publication area. The block size does not change the aspect ratio of the video.
VIDEO.FILE.SQUARESquare video
Real square file from the publication. You don’t have to cut it to get a square.
VIDEO.LOOP.MUTEDLoop without sound
The video is looped and muted. The directory is launched by clicking; autoplay for an article is specified as a separate command.
Embeds and audio
EMBED.YOUTUBEYouTube inside publication
Uses a real link from a design and real estate publication. If the video is unavailable, you can still go to the source.
EMBED.INSTAGRAMInstagram Post
The native Instagram embed and the video saved on the site CDN. Switch tabs to compare both versions.
AUDIO.PLAYERAudio
The design of the audio card is in the topic; No audio files were found in the published library. This is a sample player without recording.
Headers and feeds
Seven header options correspond to the general list of site templates and the current editor. Changing the header does not change the text, block order, or language versions. Material settings are saved as a draft; publication is carried out separately.
The full-screen example is shown in a separate window within the directory so that its background and navigation styles do not change the entire Style Guide page.
POST.HEADER.STANDARDTitle above image
The title and description appear above the cover image. The image keeps its original proportions.
Two Hours in a Café: How We Built Industrial Intelligence with ChatGPT and Codex
In two hours at a Dubai café, Anna — my secret business adviser — and I went from an idea to a B2B product: ChatGPT shaped the industry logic and data, Codex built the web service, and Cloudflare took it to production.
Alexander Nevsky
AI Designer & Builder
AI Designer & Builder based in Dubai. I design and build digital products with AI and write about design, technology, real estate and family life
POST.HEADER.LEFTCover on the left
The cover image sits on the left, with the title and description on the right. On narrow screens, the theme rearranges these elements.
Two Hours in a Café: How We Built Industrial Intelligence with ChatGPT and Codex
In two hours at a Dubai café, Anna — my secret business adviser — and I went from an idea to a B2B product: ChatGPT shaped the industry logic and data, Codex built the web service, and Cloudflare took it to production.
Alexander Nevsky
AI Designer & Builder
AI Designer & Builder based in Dubai. I design and build digital products with AI and write about design, technology, real estate and family life
POST.HEADER.RIGHTCover on the right
The title and description sit on the left, with the cover image on the right. On narrow screens, the theme rearranges these elements.
Two Hours in a Café: How We Built Industrial Intelligence with ChatGPT and Codex
In two hours at a Dubai café, Anna — my secret business adviser — and I went from an idea to a B2B product: ChatGPT shaped the industry logic and data, Codex built the web service, and Cloudflare took it to production.
Alexander Nevsky
AI Designer & Builder
AI Designer & Builder based in Dubai. I design and build digital products with AI and write about design, technology, real estate and family life
POST.HEADER.TOPImage above title
The cover image appears before the title and description, keeping its original proportions.
Two Hours in a Café: How We Built Industrial Intelligence with ChatGPT and Codex
In two hours at a Dubai café, Anna — my secret business adviser — and I went from an idea to a B2B product: ChatGPT shaped the industry logic and data, Codex built the web service, and Cloudflare took it to production.
Alexander Nevsky
AI Designer & Builder
AI Designer & Builder based in Dubai. I design and build digital products with AI and write about design, technology, real estate and family life
POST.HEADER.WIDEWide image below title
The title and description stay in the text column, with a wide cover image beneath them.
Two Hours in a Café: How We Built Industrial Intelligence with ChatGPT and Codex
In two hours at a Dubai café, Anna — my secret business adviser — and I went from an idea to a B2B product: ChatGPT shaped the industry logic and data, Codex built the web service, and Cloudflare took it to production.
Alexander Nevsky
AI Designer & Builder
AI Designer & Builder based in Dubai. I design and build digital products with AI and write about design, technology, real estate and family life
POST.HEADER.TEXT-ONLYText only
The header contains the title and description. The cover is hidden, but stays attached to the material.
Two Hours in a Café: How We Built Industrial Intelligence with ChatGPT and Codex
In two hours at a Dubai café, Anna — my secret business adviser — and I went from an idea to a B2B product: ChatGPT shaped the industry logic and data, Codex built the web service, and Cloudflare took it to production.
Alexander Nevsky
AI Designer & Builder
AI Designer & Builder based in Dubai. I design and build digital products with AI and write about design, technology, real estate and family life
POST.HEADER.FULLSCREENFullscreen cover
The cover fills the viewport as a background. The title and description sit over the image, with a dark overlay for readability.
POST.CARD.VERTICALVertical post card
Cover image on top, then title, description and metadata.
How width changes rhythm
The cover, title, and short description work together. This is an actual card from a blog template.
POST.CARD.HORIZONTALHorizontal post card
The cover is next to the description. For a compact list.
How width changes rhythm
The cover, title, and short description work together. This is an actual card from a blog template.
POST.FEED.THREEThree column feed
Native composition used on the main page. Columns adapt to the available width.
How width changes rhythm
The cover, title, and short description work together. This is an actual card from a blog template.
One episode — different shots
The cover, title, and short description work together. This is an actual card from a blog template.
Where does the next story lead?
The cover, title, and short description work together. This is an actual card from a blog template.
POST.FEED.LISTFeed list
Ready theme composition. On a narrow screen, the number of columns is reduced.
How width changes rhythm
The cover, title, and short description work together. This is an actual card from a blog template.
One episode — different shots
The cover, title, and short description work together. This is an actual card from a blog template.
Where does the next story lead?
The cover, title, and short description work together. This is an actual card from a blog template.
POST.FEED.GRID-VERTICALGrid of vertical cards
Ready theme composition. On a narrow screen, the number of columns is reduced.
How width changes rhythm
The cover, title, and short description work together. This is an actual card from a blog template.
One episode — different shots
The cover, title, and short description work together. This is an actual card from a blog template.
Where does the next story lead?
The cover, title, and short description work together. This is an actual card from a blog template.
POST.FEED.GRID-HORIZONTALGrid of horizontal cards
Ready theme composition. On a narrow screen, the number of columns is reduced.
How width changes rhythm
The cover, title, and short description work together. This is an actual card from a blog template.
One episode — different shots
The cover, title, and short description work together. This is an actual card from a blog template.
Where does the next story lead?
The cover, title, and short description work together. This is an actual card from a blog template.
@nevsky_alexander
On Instagram: Dubai beyond the postcard — family, the city, discoveries and life between projects. On Threads: thinking out loud about design and AI. On YouTube: videos that need more room than a story. Follow me wherever you feel at home, and let’s keep in touch