3.7 KiB
3.7 KiB
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.canvasare 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.