42 lines
3.7 KiB
Markdown
42 lines
3.7 KiB
Markdown
<!-- Kept in-repo from the 2026-10-17 outside delivery (hoelee-og-delivery), so a future
|
||
regeneration knows the design's exact pixel intent. Rendered by scripts/og-gen/generate-default.mjs. -->
|
||
|
||
# blog.hoelee.com — Default OG Card Pixel Specification
|
||
|
||
**Canvas:** 1200 × 630 px · **Aspect ratio:** 1.9048:1 · **Palette:** site dark theme
|
||
**Primary source:** `og-default.html` (fixed-size HTML; inline CSS; local relative image assets)
|
||
|
||
All coordinates below are in CSS pixels, measured from the canvas top-left. Text coordinates refer to the line box or the visible content box noted below; minor glyph-edge differences are expected across font renderers.
|
||
|
||
| Element | X | Y | Width × height | Font size / line height | Weight | Color / treatment |
|
||
|---|---:|---:|---:|---|---:|---|
|
||
| Canvas | 0 | 0 | 1200 × 630 | — | — | Background `#111827` |
|
||
| Logo (`logo-square.png`) | 64 | 64 | 44 × 44 | — | — | Original sage / mint / grey mark; transparent background |
|
||
| “ENGINEERING NOTES” line box | 122 | 72.8 | approx. 227 × 26.4 | 22 / 26.4 px | 600 | `#9ca3af`, uppercase, letter spacing 0.7 px |
|
||
| `blog.hoelee.com` line box | 937.3 | 72.8 | approx. 198.7 × 26.4 | 22 / 26.4 px | 600 | `#6d8dff`, monospace |
|
||
| “Mr Hoelee” heading line box | 64 | 160 | 700 × 69.1 | 64 / 69.1 px | 750 | `#e5e7eb`, letter spacing −2 px |
|
||
| “Lee Teong Hoe” text line box | 66 | 246.1 | approx. 187.4 × 33.6 | 28 / 33.6 px | 500 | `#9ca3af` |
|
||
| Blue accent rule | 64 | 307.7 | 68 × 4 | — | — | `#6d8dff`, 2 px radius |
|
||
| Job title text line box | 64 | 334.7 | approx. 480.3 × 35 | 28 / 35 px | 650 | `#e5e7eb` |
|
||
| Positioning line | 64 | 386.7 | approx. 404.2 × 29.7 | 22 / 29.7 px | 500 | `#60a5fa` |
|
||
| Portrait outer frame | 815 | 115 | 321 × 352 | — | — | `#1f2937` surface, `#344159` border, 19 px radius; 10 px padding plus 1 px border |
|
||
| Portrait image (`lee-teong-hoe-640.jpg`) | 826 | 126 | 299 × 330 | — | — | `object-fit: cover`; `object-position: center 32%`; 11 px radius |
|
||
| Frame accent | 838 | 478 | 46 × 4 | — | — | `#6d8dff`, 2 px radius |
|
||
| Caption panel | 815 | 486 | 321 × 42 | — | — | `#1f2937` translucent surface, `#2a3345` border, 9 px radius |
|
||
| Caption dot | 830 | 503.5 | 7 × 7 | — | — | `#4ade80`, circular |
|
||
| Caption text “BUILD · RUN · LEARN” | approx. 849 | approx. 496 | content-sized | 22 / 22 px | 500 | `#9ca3af`, monospace |
|
||
| Workstream divider | 64 | 469 | 690 × 1 | — | — | `#2a3345` |
|
||
| “BUILD” label | 82 | 487.3 | approx. 67.2 × 26.4 | 22 / 26.4 px | 600 | `#9ca3af`, monospace; `#6d8dff` square marker at x=64 |
|
||
| “OPERATE” label | approx. 297.6 | 487.3 | approx. 94.1 × 26.4 | 22 / 26.4 px | 600 | `#9ca3af`, monospace; `#60a5fa` square marker at x≈279.6 |
|
||
| “DOCUMENT” label | approx. 513.3 | 487.3 | approx. 107.6 × 26.4 | 22 / 26.4 px | 600 | `#9ca3af`, monospace; `#4ade80` square marker at x≈495.3 |
|
||
| Decorative cross | 1116 | 100 | 20 × 20 | — | — | `#6d8dff`, 65% opacity |
|
||
| Background technical grid | 700 | 0 | 500 × 630 | — | — | `#6d8dff` grid at low opacity; 48 px spacing |
|
||
|
||
## Typography and constraints
|
||
|
||
- Uses only three text sizes: **64 px**, **28 px**, and **22 px**.
|
||
- Font stack: `"Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif`; terminal details use `"JetBrains Mono", Consolas, monospace`.
|
||
- Safe margin: primary content starts at x=64; the portrait and domain end at x=1136; top logo starts at y=64. Main content and captions end above y=550, leaving the bottom 80 px clear.
|
||
- `html`, `body`, and `.canvas` are fixed at 1200 × 630 px with overflow hidden.
|
||
- Text remains live HTML text. The two image assets are referenced by relative filename and must stay beside `og-default.html`.
|