Assets & design standards

AiFi Talk design standards

AiFi Talk is a warm, article-led publication of tutorials and deep dives on new tech and money, written by Frederic. Tagline: “Understand new tech and money, one step at a time.” / 「一步一步，看懂新科技與金融。」 Use a quiet editorial layout, generous whitespace, thin rules, and restrained rust accents.

AiFi Talk 採用溫暖、簡潔、以文章為主的編輯風格。保留留白、細分隔線與低調的磚紅色點綴；設計更新時，也要同步維護這份規範。

Brand marks

• AiFi Talk: the complete approved mark, with the curved “talk” speech bubble tilted toward AiFi. Use it as the one logo in site chrome: the shared header on every page and the footer. Preserve the image as one composition; do not rebuild the bubble in CSS, change its angle, crop, stretch, or recolor it.
• AiFi: the original text-only wordmark, kept as an approved download for contexts where the speech bubble does not fit; it no longer appears in the site header or footer.
• Keep both marks on a light, uncluttered background. Preserve their aspect ratios and leave clear space around them.
• Homepage mark: 170px wide on desktop. The compact navigation at 800px and below uses an 82px mark. The standard AiFi mark is 116px on desktop; the footer uses 96px.
• af butterfly: the approved standalone icon is the medium-weight refinement of concept 01, selected on November 2, 2026. Its flowing lowercase a and f form asymmetric butterfly wings through open loops, a broad curved stroke, and fine tapered terminals. Use assets/brand/af-icon-medium.svg as the transparent vector master. This replaces the previous af icon; the AiFi and AiFi Talk wordmarks remain the approved text marks.
• Preserve the butterfly's exact proportions, asymmetry, open spaces, and stroke contrast. Do not mirror, rotate, stretch, add antennae, enclose it in book pages, or typeset a replacement af. Keep the built-in clear space and place the black artwork on a light, uncluttered background.
• Browser icon — 05 Blue tile: use the near-black butterfly (#16140F) on a pale-blue (#BCDDF2) rounded-square background in both light and dark browser themes. The background keeps the black mark visible on dark tabs. The selected master is assets/brand/af-icon-blue.svg, a true vector made of filled Bézier paths and a rounded rectangle, with no embedded raster, font, or filter dependencies, with a PNG download at af-icon-blue.png. The transparent black master remains available for light-background brand use.
• Browser icons use the blue-tile favicon-medium-16.png and favicon-medium-32.png exports; the touch icon uses apple-touch-icon-medium.png at 180×180. Modern browsers can use the path-only favicon-medium.svg; PNGs provide compatibility. The versioned filenames avoid reusing the earlier favicon cache. Keep the rounded tile and padding. The finest terminals soften at favicon sizes; do not claim full letter readability at 16px or improvise a different small-size symbol.
• Original writing and artwork retain their respective copyrights; downloadable files do not grant a reuse license.

Color palette

Use the shared values in tokens.css. Avoid paper-noise textures, green text, heavy shadows, and decorative stickers.

Typography

• English headlines: Source Serif 4, with Georgia and serif fallbacks.
• English body and controls: Outfit, with Arial and sans-serif fallbacks.
• Chinese headlines: Songti TC, Noto Serif TC, PMingLiU. Chinese body/UI: PingFang TC, Noto Sans TC, Arial.
• Article body: 18px, line-height 1.75 in English and 1.9 in Chinese, within a 760px reading column. Mobile article text remains 18px.
• Homepage summaries: 17px/1.75. Primary controls: 14–15px. Article section headings use sans-serif.
• Article paragraphs have 28px bottom spacing. H2 sections have 64px top spacing (48px mobile), a 1px divider, and 32px padding above the heading (24px mobile).
• English fonts load from Google Fonts. Native Chinese font availability affects rendering; check both languages visually.

Layout

The main container is at most 1320px including 48px side padding. Padding becomes 30px below 1050px and 22px below 560px. Main breakpoints are 1050, 800, and 560px. Article grids change from three to two to one column.

Use flat warm backgrounds, square article-card edges, and thin dividers. Spacing is component-specific; reuse existing component rules rather than inventing a new spacing system.

The homepage introduction is one rule block in style.css for every width, view, and language. On desktop it pairs the headline with the intro paragraph and links. At 560px and below it shows only the headline at 28px: English flows as one balanced sentence (the desktop line break is hidden), Chinese keeps its two-line break. The featured article follows with its summary clamped to two lines and no separate “Read the article” link, because the whole cover and title already open it.

Article previews

• Magazine cards show photo → title → categories → summary → date and bookmark.
• The category line reads format · subject, at most two labels, always in that order: for example Tutorial · Tech / 教學 · 科技. Formats are Tutorial / 教學, Deep dive / 深度解析, and Build note / 開發筆記. Subjects are Tech / 科技 and Money / 金融. Every article has exactly one of each. Labels are plain text, not links. Series appear only in the end-of-article series box, not on cards. Chips, cards, and search use the same words.
• The default Magazine grid omits the featured article shown above it. Library, search, topic filters, and Saved include every article.
• The whole card opens its article. The bookmark remains a separate 44px control above the card link.
• Above 560px, cards have a 1px border and 22px padding.
• Fine-pointer hover changes the background to --paper-hover, the border to --line-strong, raises the card 3px, and accents its title. Transitions last 200ms. Reduced-motion mode removes the lift.
• Keyboard focus outlines the card in rust. Hover is never required to access content or controls.
• Desktop Library rows place the thumbnail beside the text.
• At 560px and below, every view lists articles as rows: the title with a 104px 16:9 thumbnail on its right, then one line with the format, date, and reading time, and the bookmark. Rows have no border box or summary, only a thin divider below, so about four fit on a phone screen.
• Covers use a 16:9 composition (1792×1008 recommended for new exports). Preserve all artwork without cropping or stretching. Adapt mismatched artwork by extending its designed background, not adding plain bars.

Navigation and controls

Desktop headers contain the wordmark, the About the author link, Saved, and language controls. The homepage itself is the article index, so the header has no separate Articles link. The header stays on one row at every width, with no menu toggle: the header is about 96px tall (14px vertical padding) on every page, built by one siteHeader() in scripts/build/layout.mjs; the AiFi Talk mark is 128px wide, 88px at 560px and 76px at 360px. At 560px and below, the two-button language switch becomes one En/中 toggle (current language darker; one tap switches; on article and About pages it links to the other edition), and the header hides while scrolling down and reappears while scrolling up. Every header control keeps a 44px target.

Prefer recognizable icons for social links and familiar utility controls. Use local brand SVGs and consistent 24px outline icons, accessible names, localized titles, visible focus, and at least 44px touch targets. Editorial navigation and language names remain text.

The About the author intro puts the eyebrow and heading across the full column. The whole About page is wider than the 760px article column, by up to 120px on each side when there is room, so the intro and the roadmap share one centered width. Below them, the paragraphs and social icons sit in a text column closed by a thin right rule, and the margin column holds the illustrated portrait (240px, 280px from 1100px) centered in it, top-aligned with the first paragraph, and under it the author's motto: an italic serif line, always English with lang="en", led by a short orange dash. The portrait master assets/about/portrait.png is trimmed so the drawing starts at its top edge, published as 320/640px WebP with its cream paper lifted to white, and shown with mix-blend-mode: multiply and a soft bottom fade. At 720px and below, the portrait (150px) and motto sit in one row between the heading and the paragraphs, and the rule is dropped. Use a hand-drawn style, never an unedited photo, and crop out anyone else. The About the author page carries a roadmap from content/about.json, grouped by year (serif year plus a small uppercase label). Each year is a disclosure, closed by default, using the article outline's +/− pattern with a muted stop count. Each year has one vertical rail; rows put a right-aligned muted month in the left column and a dot on the rail (hollow by default, filled ink for awards, a larger orange dot for the featured row, dashed for upcoming). Each row has a title, pill tags, and one muted sentence with an optional inline Result ↗ link. Each row shows one award chip when it placed, then a single type tag for its main event: Hackathon (ink outline), Conference (orange outline), Organizer or Next (dashed muted outline). Hackathons usually include a conference, so rows never stack both types. Events from one trip share a row (for example Prague · ETHGlobal + Pragma). The featured row (the conference the page leads with) gets the hover-paper panel, a serif title and an orange award tag. At 560px and below the month column narrows and the rail stays. A note says awards are team results. A row may carry an event photo (image, imageAlt, files in assets/about/roadmap/): a 240px 3:2 photo in a third column, dropping under the text at 720px and below.

Social links appear as a flat icon row directly under the About the author introduction (labeled for screen readers, no visible heading) and in the homepage footer, never in a header menu. Both render from the single social-link registry.

Share previews: articles share their own cover. Every other page (home, About, archive, Assets) shares assets/brand/share-card.png, a 1200×630 card with the AiFi Talk wordmark and the bilingual tagline, so a shared homepage link never looks like a specific article.

Notebook filters are one row of pill chips: All / 全部, one chip per subject (Tech / 科技, Money / 金融), and Saved as a 44px bookmark icon. Subject is the only filter, and one chip is pressed at a time. Subject chips appear only once at least two subjects have published posts; until then the row is All and Saved, because a single subject chip would repeat All. Desktop keeps the search field and the Magazine/Library switch on the same row. At 560px and below, the Magazine/Library switch is hidden, the visible story count moves to screen readers, and search is a 44px icon beside “From the notebook” that opens the field; closing it clears the query.

Article contents use quiet margin rules above 1050px. At 1050px and below, the Contents button is a 48px tap target fixed to the bottom-right corner, and its outline opens above it. Mouse hover opens the outline only from the desktop rail. Section links focus their headings; opening the outline must not move the article scroll position. Respect reduced motion.

Every article shows a 3px rust reading-progress line fixed to the top of the window. Articles in a series (series in content/posts.json) end with a bordered series box: “pstack series · Part 2 of 3 / pstack 系列 · 第 2／3 篇”, every part in order with the current one marked, and previous/next part links. Keep reading then opens with a Read next / 推薦閱讀 card (cover, title, link) for the first other article outside the series, followed by any remaining articles as a list.

Reader-facing footers (homepage and articles) do not link to Assets. The About page, archive, and Assets page footers keep the Assets link.

Language and accessibility

Use English and Traditional Chinese (en, zh-Hant) with native language labels. Keep story IDs independent of translated text. Language changes preserve search, filters, layout, and saved stories. Locale and saves persist in this browser; they are not account features.

Use semantic headings, meaningful image alternatives, visible keyboard focus, and accessible disclosures. Never hide initial content behind scroll animations. Verify long Chinese titles and narrow layouts without horizontal overflow.

Keeping this guide current

The public Assets page is generated from this file during every build. Logo previews use the same files as the website; palette swatches read the live CSS tokens.

When updating the design, update this guide in the same change, including any affected values, asset usage, layout, interaction, and responsive rules. Replace the approved source assets when needed and keep the download links current. Build and verify the Assets page alongside the affected pages before deployment.

Implementation sources: tokens.css for colors and fonts, style.css for components, scripts/build/home.mjs for homepage markup, scripts/build/layout.mjs for shared page chrome, i18n.js for localized copy and social links, app.js for story state, and header.js for responsive navigation. If implementation and documentation disagree, resolve the discrepancy before release.

Verify desktop and 390px layouts, English and Chinese, keyboard access, download links, and relevant reload persistence. Run the build and automated checks. Record PASS, FAIL, or NOT TESTED, with screenshots where useful.