Alternative Aesthetics Illustration
Bento Grid
Loading
1:09 Portfolio
Electric lavender and cyan, bubbly sans-serif, floating digital depth.
Click any value to copy. Roles are suggestions, not gospel.
- #109cf2oklch(66.9% 0.165 245)Dominant
- #a9a2f9oklch(75.2% 0.124 287)Surface
- #1467bcoklch(51.5% 0.153 254)Ink
- #98ac60oklch(71.1% 0.104 121)Accent
- #a5bdd8oklch(78.9% 0.047 251)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | IBM Plex Mono | 15px | 400 | 1.35 | 0 | Aa Bb Cc |
| h2 | IBM Plex Mono | 15px | 400 | 1.75 | 0 | Aa Bb Cc |
| h3 | IBM Plex Mono | 15px | 400 | 1.75 | 0 | Aa Bb Cc |
| body | IBM Plex Mono | 14px | 400 | 1.75 | 0 | Aa Bb Cc |
| button | IBM Plex Mono | 14px | 400 | 1.75 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #109cf2;
--color-surface: #a9a2f9;
--color-ink: #1467bc;
--color-accent: #98ac60;
--color-detail: #a5bdd8;
}
/* CSS variables exposed by source */
:root {
--font-barcode: "Libre Barcode 128", system-ui;
--color-white-2: #f3f3ff;
--font-size-barcode: 3rem;
--font-ibm: "IBM Plex Mono";
--font-size-base-ja: .875rem;
--color-text: #101016;
--color-bg: #f3f3ff;
--color-border: #565656;
--font-ja: "Hiragino Kaku Gothic ProN", "Hiragino Sans";
--font-size-h2: 3.5625rem;
--color-black-2: #101016;
--font-size-h3: 1.1875rem;
--color-white-3: #a4a4a4;
--font-size-small: .75rem;
--font-size-medium: 1.525rem;
--color-black-1: #000;
--color-white-1: #fff;
--color-black-3: #565656;
--font-size-base-en: .9375rem;
--font-size-large: 2.1375rem;
--global-footer-holo-height: 6.09375rem;
--duration-hover-material: 0s;
--z-index-109: 999999;
--padding-outside: 20px;
--line-height: 1.75;
--z-index-outer-frame: 2000;
--duration-base-material: .15s;
--z-index-modal: 11000;
--z-index-header: 1000;
--z-index-loading: 99999;
--grid-columns: 12;
--z-index-hamburger-menu: 6000;
--ease-base-material: ease-out;
--ease-base-transform: cubic-bezier(.16, 1, .3, 1);
--padding-content: 3.5rem;
--cell-size: 38.88888888888889px;
--z-index-scrollbar: 10000;
--ease-out-expo: cubic-bezier(.16, 1, .3, 1);
--duration-base-transform: .4s;
--ease-out-quint: cubic-bezier(.22, 1, .36, 1);
--global-header-height: 4.5rem;
}Drop-in prompt
Build a landing page in the visual style of 1:09 Portfolio.
Reference design system (extracted from the live site):
- Palette: #109cf2, #a9a2f9, #1467bc, #98ac60, #a5bdd8
- Typefaces: IBM Plex Mono
- Macrostructure: Bento Grid
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/109ichiki-com
