A frame from a game. A shift in an industry. Something learned in the kitchen. Curiosity brings them here. Design gives them room.
INSIGNIFICANTIA. Visual design guide · V2.0 A short guide to looking and reading
01 / Visual identity
A quiet canvas. A clear direction.
Blue-grey settles the page. Cream carries the reading. Pink marks a point of interest or the next step. Images keep their own colours; the writing carries the argument.
Page background#202D35
Content surface#2B3942
Cream text#F2EEE4
Pink accent#ED8EAC
Secondary text#AEB9B9
Display / Sans serifLet an interest come into view.
The homepage, navigation and display copy use the same sans-serif stack. Bold weights and close spacing make the opening clear. System fallbacks keep the file independent of online fonts.
Reading / Serif titleSettle into the reading.
Article and list titles use Georgia, with Songti-family fallbacks for Chinese. Body copy returns to a quieter scale with generous leading. Both rhythms belong to the same blog.
1400px · maximum site shell
900px · maximum article list
810px · maximum reading column
9px · standard corner radius
Values come from the live site. Specimens below are recomposed for this guide and scale with the available space.
02 / Home
An interest. A way in.
The homepage introduces the author and the subjects on the left, then gives a piece of work the right-hand side. Two clear choices follow the introduction.
Insignificantia.ARTICLE ARCHIVE ABOUT
Hobby driven · AI native
以爱好驱动的 AI原生博客。
游戏行业深度洞察，模拟驾驶，跑鞋与厨艺，与AI共同完成。
浏览文章关于这里
One clear introduction
The headline states the identity. A small English label supports it without competing with the Chinese title.
One defining image
Keep the subject clear and the crop considered. Place image and copy side by side on desktop; stack them on mobile.
Two ways in
Solid pink marks the primary action. An outline keeps the secondary choice quieter.
The Chinese title and introduction are quoted from the homepage. This is its first Hero image. Arrows and buttons demonstrate appearance only; they do not navigate or change the image.
03 / Article list
Read a little. Decide to stay.
A card gives the reader enough to choose. A quiet date, a clear title and a useful excerpt point towards the actual subject of the article.
Year, tag and category views share the same reading order. Pagination retains the first and last pages, with an ellipsis to keep a growing archive navigable.
Titles, dates and shortened excerpts are quoted from the live list and remain in Chinese. Pagination is a visual specimen.
04 / Archive
Find the next point of interest.
The archive offers routes beyond chronology. Topics sit at the top of each tile; article counts recede to the bottom. A separate year group keeps older work within reach.
ACG9 ARTICLES
AI、软件 与硬件23 ARTICLES
游戏88 ARTICLES
美食26 ARTICLES
4 → 2Four columns on desktop; two on mobile
Topics → YearsTwo routes, arranged in separate groups
WPD ArchivePlaced last in the year group
Four live categories are shown in their original language. Counts reflect 27 October 2026 and do not update automatically.
05 / Reading
Give long reads a little time.
The wide opening gives way to a narrower reading column. Date, title, paragraphs and subheads have distinct roles. The contents drawer appears when needed; mobile gives that space back to the text.
Insignificantia.ARTICLE ARCHIVE ABOUT
One frame. A way to see a game.
Some moments in a game make the objective fade for a while. A shaft of light, perhaps, or a corner at the end of a circuit. Pressing the shutter gives those details a chance to be seen again.
Pause first
Use this space for a specific observation: what is in the frame, where the eye settles, and why this moment is worth keeping. Place images beside the relevant passage; let captions identify the work and scene.
Then make the observation clear
An article can begin with a small experience. Name the subject and explain how the judgement was reached. That gives the reader something concrete to discuss.
Virtual photography
This is original demonstration copy, not a published article. The contents drawer adapts the live site’s vertical rail and unframed hover panel to this card. Entries are visual only; the drawer is hidden on mobile.
06 / About & photography
An introduction. Then the work.
About introduces the author’s interests and way of working, followed by a row of social identities. Photography unfolds in a grid, with English game titles below each image. The dark background leaves room to look; pink marks the edges on hover.
Social identities use the site’s brand marks. Hover highlights remain; links are inactive.
Senua’s Saga: Hellblade IIMirror’s Edge CatalystCall of Duty: Modern Warfare 2019
These embedded photographs come from the blog’s portfolio, not screenshots of its pages. Three works demonstrate the grid; mobile shows two. Titles are bold, borders turn pink on hover, and images do not open in a lightbox.
07 / Interaction
A lighter touch. A clearer response.
Buttons, links, borders and loading indicators share one pink accent. Feedback is brief and positions stay steady, making actions and responses easy to recognise.
Primary
Browse articles
Primary actions use solid pink and a comfortably sized touch target.
Secondary
About this blog
Secondary actions use a pink outline to preserve hierarchy.
Text link
Browse the archive
Pink identifies text links; hover strengthens the feedback.
Loading
LOADING…
A simple loading indicator holds the content area while the page is being prepared.
These controls demonstrate default and hover states only. They do not navigate. This guide respects reduced-motion preferences; it is not an accessibility audit of the whole site.
08 / Voice
Make a point. Show what you noticed.
Short lines establish a rhythm. Specific observations support the judgement. Keep the author’s directness and curiosity, grounded in games, tools, everyday life and things tried first-hand.
HOME
Follow a curiosity. Make the observation specific.
ARTICLE
Read a little. Decide to stay.
ARCHIVE
Follow an interest to the next article.
GALLERY
Pause. Notice what is in the frame.
These lines were written for this guide. Start with a concrete subject, add an observation, explain the reasoning and offer a clear way forward.
A Static guide
The next article starts with a curiosity.
Keep the colours, hierarchy and breathing room. Change an image and write down an observation. The same visual language can carry the next piece of work.
About this guide and its references
Based on the live pages and public styles observed on 27 October 2026. Colours, font stacks and widths come from the site. The guide’s composition, new copy and demonstration article are adaptations. Layouts use HTML/CSS, with the original Hero image and portfolio photographs embedded for offline use. Specimen controls are visual only.
Home · Identity, palette, navigation and Hero
Article list · Titles, excerpts and pagination
Archive · Category and year navigation
About · Author introduction, social identities and photography
