Interface reference · Signal Grid
A source-aligned catalog of the components, foundations, and recurring patterns used across jakzaizzat.com.
01
The visual tokens implemented in global.css and blog-article.css.
Modern Carta
Warm paper, fine grain, and controlled four-level dithering.
Aa Bb Cc 0123
Aa Bb Cc 0123
Quiet interfaces put content first.
Quiet interfaces put content first.
Quiet interfaces put content first.
Quiet interfaces put content first.
Quiet interfaces put content first.
Quiet interfaces put content first.
Quiet interfaces put content first.
Quiet interfaces put content first.
Quiet interfaces put content first.
Quiet interfaces put content first.
Inline
1px
Item
1px
Control / panel
2px
Navigation
2px
Depth is tonal: paper-gray fills and one-pixel rules replace shadows. Corners remain nearly square to preserve the technical character.
650px single-column canvas
The shell uses compact horizontal navigation above content and collapses naturally down to the 360px minimum viewport.
02
Live specimens for every shared component used by the site.
Modern Carta deterministic dithering
Logos use a consistent four-level dither matrix.
Primary navigation · active route
Production sizes
Raised surface
Used for experience and bucket-list rows.
Click-triggered celebration
Confetti begins from the control, never as ambient motion.
Composed article shell and sanitized markup
The article system keeps long-form writing compact, readable, and connected to the rest of the site.
Body copy supports inline links, inline code, lists, and quiet editorial surfaces.
Motion supports meaning; it never competes with the writing.
const rhythm = { spacing: 4, width: 650 };| Role | Value |
|---|---|
| Canvas | 650px |
| Body | 16px |
03
Recurring structures currently composed inside route files.
MOSHICAM
Startup · Mobile deco studio
Cukaimax – Tax calculation tool for Malaysians
WEBSITE04
The interface behaves like modern Carta: content resolves in discrete ink steps while scrolling and input stay immediate.
Ink reveal
210ms
Three tonal steps, no movement
Image settle
280ms
Resolves one beat after text
Press
Immediate
Hard fill and border response
Full refresh
Once / session
Only after 60s away
Hover and press
Ink changes tone without lifting, scaling, or shifting the content.
Route refreshes are local and faint. Reduced-motion preferences remove settling and refresh effects entirely. Visible ink focus rings remain part of every interactive primitive.
05
All exported shared components and utilities found during the audit.
Component
Source
Covered API
Supporting exports
Carta asset generator · ink reveal runtime · hard interaction states · semantic color tokens
