neon geometry · tech minimalist · pop of chartreuse · sans-serif precision · floating forms
#f1fbf2Page ground
#e0eae1Raised panels
#010101Primary text
#535653Secondary text
#2377feAction + emphasis
#d4ddd5Borders, rules
| Pairing | Ratio | Verdict |
|---|---|---|
| Body text on page | 19.70:1 | AAA |
| Body text on surface | 16.92:1 | AAA |
| Secondary text on page | 7.02:1 | AAA |
| Secondary text on surface | 6.03:1 | AA |
| Accent text on page | 3.86:1 | AA large only |
| Page on accent (buttons) | 3.86:1 | AA large only |
| Border against page | 1.31:1 | LOW |
Geometric monospace family echoes the isometric precision and tech-forward minimalism; bold weight commands attention without serif formality.
Neutral humanist sans-serif with built-in geometric clarity; medium tracking and relaxed line height support legibility against pale backgrounds while respecting the minimal aesthetic.
Modular scale · ratio 1.333 · base 16px
Subtle radius honors the clean, rendered aesthetic without rounding away the geometric precision; flat elevation keeps focus on the 3D solids as the only dimensional elements; thin borders and 8px base respect the high-c…
| Radius | subtle · 3px |
| Border | 1px |
| Elevation | flat |
| Motion | 300ms · cubic-bezier(0.4, 0, 0.2, 1) |
Material standard easing feels contemporary and controlled; 300ms allows isometric forms to feel weightful and deliberate, matching the product-render polish of the visual language.
button_style: outlined — Outlined buttons with thin borders in charcoal, filling to a pale sage tint on hover—maintain the restrained, structured precision while signaling interactivity through subtle state change, never with…
Text inputs as minimal bordered rectangles with pale sage backgrounds; focus state adds a thin charcoal outline; avoid background color shifts to preserve the calm, floating-form-focused layout.
Supporting copy in the secondary tone, one step down the scale.
Card containers use thin charcoal borders and white or pale sage interiors with ample internal breathing room; let 3D accent solids sit in the negative space around and above cards, not inside them.
:root{
--bg: #f1fbf2;
--surface: #e0eae1;
--ink: #010101;
--dim: #535653;
--accent: #2377fe;
--line: #d4ddd5;
--accent-50: #edf4ff;
--accent-100: #dce9ff;
--accent-200: #b9d3ff;
--accent-300: #8db8fe;
--accent-400: #5898fe;
--accent-500: #2377fe;
--accent-600: #1d64d5;
--accent-700: #1851ad;
--accent-800: #123c7f;
--accent-900: #0c2856;
--radius: 3px;
--shadow: 0 1px 0 rgba(1,1,1,0.06);
--space-0: 0px;
--space-1: 8px;
--space-2: 16px;
--space-3: 24px;
--space-4: 32px;
--space-6: 48px;
--space-8: 64px;
--space-12: 96px;
--space-16: 128px;
--space-24: 192px;
--font-display: Space Mono, Courier New, monospace;
--font-body: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;
--font-mono: JetBrains Mono, Monaco, monospace;
--weight-display: 700;
--weight-body: 400;
--leading-display: 1.2;
--leading-body: 1.6;
--tracking-display: 0.05em;
--tracking-body: 0.01em;
--text-xs: 9px;
--text-sm: 12px;
--text-base: 16px;
--text-lg: 21px;
--text-xl: 28px;
--text-2xl: 38px;
--text-3xl: 51px;
--text-display: 67px;
}
/* Text styles — size, family, weight and leading together */
.text-xs{font:400 9px/1.6 Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;letter-spacing:0.01em}
.text-sm{font:400 12px/1.6 Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;letter-spacing:0.01em}
.text-base{font:400 16px/1.6 Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;letter-spacing:0.01em}
.text-lg{font:400 21px/1.6 Inter, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif;letter-spacing:0.01em}
.text-xl{font:700 28px/1.2 Space Mono, Courier New, monospace;letter-spacing:0.05em}
.text-2xl{font:700 38px/1.2 Space Mono, Courier New, monospace;letter-spacing:0.05em}
.text-3xl{font:700 51px/1.2 Space Mono, Courier New, monospace;letter-spacing:0.05em}
.text-display{font:700 67px/1.2 Space Mono, Courier New, monospace;letter-spacing:0.05em}
This is the exact CSS rendering the components above. Paste it after the custom properties.
/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
border:var(--border) solid transparent;border-radius:var(--radius);
padding:var(--space-1) var(--space-3);cursor:pointer;
font:var(--weight-body) var(--text-sm)/1 var(--font-body);
transition:background var(--duration) var(--easing),color var(--duration) var(--easing)}
.btn--primary{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn--primary:hover{background:var(--accent);color:#010101}
.btn--secondary{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--secondary:hover{border-color:var(--ink)}
.btn--ghost{background:transparent;color:var(--dim);border-color:transparent}
.btn--ghost:hover{color:var(--ink)}
.btn:disabled{opacity:.42;cursor:not-allowed;filter:none}
/* Form field */
.field{display:block}
.field__label{display:block;margin-bottom:var(--space-1);
font:600 var(--text-xs)/1 var(--font-body);color:var(--ink)}
.field__input{width:100%;padding:var(--space-1) var(--space-2);
border:var(--border) solid var(--line);border-radius:var(--radius);
background:var(--bg);color:var(--ink);font:var(--text-sm)/1 var(--font-body)}
.field__input::placeholder{color:var(--dim)}
.field__input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.field__input[aria-invalid="true"]{border-color:var(--accent)}
.field__error{margin-top:var(--space-1);color:var(--accent);font-size:var(--text-xs)}
/* Card */
.card{background:var(--surface);border:var(--border) solid var(--line);
border-radius:var(--radius);padding:var(--space-3);box-shadow:var(--shadow)}
.card__title{margin:0 0 var(--space-1);font:var(--weight-display) var(--text-lg)/1.3 var(--font-display)}
.card__body{margin:0;color:var(--dim);font:var(--text-sm)/1.6 var(--font-body)}
/* Tag */
.tag{display:inline-block;background:var(--accent-100);color:var(--accent-800);
border-radius:var(--radius);padding:2px var(--space-1);
font:600 var(--text-xs)/1.5 var(--font-mono)}
{
"colors": {
"bg": "#f1fbf2",
"surface": "#e0eae1",
"ink": "#010101",
"dim": "#535653",
"accent": {
"50": "#edf4ff",
"100": "#dce9ff",
"200": "#b9d3ff",
"300": "#8db8fe",
"400": "#5898fe",
"500": "#2377fe",
"600": "#1d64d5",
"700": "#1851ad",
"800": "#123c7f",
"900": "#0c2856",
"DEFAULT": "#2377fe"
},
"line": "#d4ddd5"
},
"borderRadius": {
"DEFAULT": "3px"
},
"fontFamily": {
"display": [
"Space Mono"
],
"body": [
"Inter"
],
"mono": [
"JetBrains Mono"
]
},
"fontSize": {
"xs": [
"9px",
{
"lineHeight": "1.6",
"letterSpacing": "0.01em",
"fontWeight": "400"
}
],
"sm": [
"12px",
{
"lineHeight": "1.6",
"letterSpacing": "0.01em",
"fontWeight": "400"
}
],
"base": [
"16px",
{
"lineHeight": "1.6",
"letterSpacing": "0.01em",
"fontWeight": "400"
}
],
"lg": [
"21px",
{
"lineHeight": "1.6",
"letterSpacing": "0.01em",
"fontWeight": "400"
}
],
"xl": [
"28px",
{
"lineHeight": "1.2",
"letterSpacing": "0.05em",
"fontWeight": "700"
}
],
"2xl": [
"38px",
{
"lineHeight": "1.2",
"letterSpacing": "0.05em",
"fontWeight": "700"
}
],
"3xl": [
"51px",
{
"lineHeight": "1.2",
"letterSpacing": "0.05em",
"fontWeight": "700"
}
],
"display": [
"67px",
{
"lineHeight": "1.2",
"letterSpacing": "0.05em",
"fontWeight": "700"
}
]
},
"fontWeight": {
"display": "700",
"body": "400"
},
"letterSpacing": {
"display": "0.05em",
"body": "0.01em"
},
"spacing": {
"0": "0px",
"1": "8px",
"2": "16px",
"3": "24px",
"4": "32px",
"6": "48px",
"8": "64px",
"12": "96px",
"16": "128px",
"24": "192px"
},
"boxShadow": {
"DEFAULT": "0 1px 0 rgba(1,1,1,0.06)"
}
}
{
"global": {
"color": {
"bg": {
"value": "#f1fbf2",
"type": "color"
},
"surface": {
"value": "#e0eae1",
"type": "color"
},
"ink": {
"value": "#010101",
"type": "color"
},
"dim": {
"value": "#535653",
"type": "color"
},
"accent": {
"value": "#2377fe",
"type": "color"
},
"line": {
"value": "#d4ddd5",
"type": "color"
},
"accent-ramp": {
"50": {
"value": "#edf4ff",
"type": "color"
},
"100": {
"value": "#dce9ff",
"type": "color"
},
"200": {
"value": "#b9d3ff",
"type": "color"
},
"300": {
"value": "#8db8fe",
"type": "color"
},
"400": {
"value": "#5898fe",
"type": "color"
},
"500": {
"value": "#2377fe",
"type": "color"
},
"600": {
"value": "#1d64d5",
"type": "color"
},
"700": {
"value": "#1851ad",
"type": "color"
},
"800": {
"value": "#123c7f",
"type": "color"
},
"900": {
"value": "#0c2856",
"type": "color"
}
}
},
"fontFamilies": {
"display": {
"value": "Space Mono",
"type": "fontFamilies"
},
"body": {
"value": "Inter",
"type": "fontFamilies"
},
"mono": {
"value": "JetBrains Mono",
"type": "fontFamilies"
}
},
"fontWeights": {
"display": {
"value": "700",
"type": "fontWeights"
},
"body": {
"value": "400",
"type": "fontWeights"
},
"regular": {
"value": "400",
"type": "fontWeights"
}
},
"fontSize": {
"xs": {
"value": "9",
"type": "fontSizes"
},
"sm": {
"value": "12",
"type": "fontSizes"
},
"base": {
"value": "16",
"type": "fontSizes"
},
"lg": {
"value": "21",
"type": "fontSizes"
},
"xl": {
"value": "28",
"type": "fontSizes"
},
"2xl": {
"value": "38",
"type": "fontSizes"
},
"3xl": {
"value": "51",
"type": "fontSizes"
},
"display": {
"value": "67",
"type": "fontSizes"
}
},
"lineHeights": {
"xs": {
"value": "14",
"type": "lineHeights"
},
"sm": {
"value": "19",
"type": "lineHeights"
},
"base": {
"value": "26",
"type": "lineHeights"
},
"lg": {
"value": "34",
"type": "lineHeights"
},
"xl": {
"value": "34",
"type": "lineHeights"
},
"2xl": {
"value": "46",
"type": "lineHeights"
},
"3xl": {
"value": "61",
"type": "lineHeights"
},
"display": {
"value": "80",
"type": "lineHeights"
}
},
"letterSpacing": {
"display": {
"value": "0.05em",
"type": "letterSpacing"
},
"body": {
"value": "0.01em",
"type": "letterSpacing"
}
},
"typography": {
"xs": {
"value": {
"fontFamily": "Inter",
"fontWeight": "400",
"fontSize": "9",
"lineHeight": "14",
"letterSpacing": "0.01em"
},
"type": "typography"
},
"sm": {
"value": {
"fontFamily": "Inter",
"fontWeight": "400",
"fontSize": "12",
"lineHeight": "19",
"letterSpacing": "0.01em"
},
"type": "typography"
},
"base": {
"value": {
"fontFamily": "Inter",
"fontWeight": "400",
"fontSize": "16",
"lineHeight": "26",
"letterSpacing": "0.01em"
},
"type": "typography"
},
"lg": {
"value": {
"fontFamily": "Inter",
"fontWeight": "400",
"fontSize": "21",
"lineHeight": "34",
"letterSpacing": "0.01em"
},
"type": "typography"
},
"xl": {
"value": {
"fontFamily": "Space Mono",
"fontWeight": "700",
"fontSize": "28",
"lineHeight": "34",
"letterSpacing": "0.05em"
},
"type": "typography"
},
"2xl": {
"value": {
"fontFamily": "Space Mono",
"fontWeight": "700",
"fontSize": "38",
"lineHeight": "46",
"letterSpacing": "0.05em"
},
"type": "typography"
},
"3xl": {
"value": {
"fontFamily": "Space Mono",
"fontWeight": "700",
"fontSize": "51",
"lineHeight": "61",
"letterSpacing": "0.05em"
},
"type": "typography"
},
"display": {
"value": {
"fontFamily": "Space Mono",
"fontWeight": "700",
"fontSize": "67",
"lineHeight": "80",
"letterSpacing": "0.05em"
},
"type": "typography"
}
},
"spacing": {
"0": {
"value": "0",
"type": "spacing"
},
"1": {
"value": "8",
"type": "spacing"
},
"2": {
"value": "16",
"type": "spacing"
},
"3": {
"value": "24",
"type": "spacing"
},
"4": {
"value": "32",
"type": "spacing"
},
"6": {
"value": "48",
"type": "spacing"
},
"8": {
"value": "64",
"type": "spacing"
},
"12": {
"value": "96",
"type": "spacing"
},
"16": {
"value": "128",
"type": "spacing"
},
"24": {
"value": "192",
"type": "spacing"
}
},
"borderRadius": {
"DEFAULT": {
"value": "3",
"type": "borderRadius"
}
},
"boxShadow": {
"DEFAULT": {
"value": "0 1px 0 rgba(1,1,1,0.06)",
"type": "boxShadow"
}
}
}
}
Where this system comes from. Every decision above traces back to one of these readings.
Neon-yellow 3D isometric blocks float in the composition as rendered objects, not flat graphics, creating tactile visual weight against the pale background.
Why it works The dimensional shift from 2D text and borders to 3D forms makes them impossible to ignore and signals a design-forward, contemporary sensibility without overworking the layout.
A single bright, saturated yellow-green (chartreuse/neon-yellow, roughly #FFFF00–#E0FF00 range) is used exclusively for the 3D blocks against a muted sage-green field and charcoal-black text.
Why it works Restricting to one electric accent against cool neutrals (pale green background, black type) creates maximum legibility and visual pop without competing hues; the single color becomes the brand anchor.
Three yellow isometric solids are positioned asymmetrically in the upper and lower sections, not aligned to the content—they sit in white space as pure visual punctuation.
Why it works Floating elements in negative space create depth and spatial intrigue; they suggest layering and movement, breaking the stasis of a static grid and making the layout feel alive and dimensionally complex.
The yellow forms are clean, smooth-surfaced 3D renders with soft shadows and subtle shading on each face, no noise or grain.
Why it works Smooth, rendered surfaces feel digital-native and modern; the subtle faceting (from isometric geometry) provides visual richness without clutter, reinforcing a contemporary tech aesthetic.
Thin-bordered content boxes with ample negative space, paired with floating geometric solids, evoke Swiss grid discipline crossed with digital product design and 3D visualization.
Why it works The combination of structured rectangular frames (order, legibility) and free-floating volumetric objects (innovation, dimensionality) signals a brand confident in both rationality and forward-thinking design.
The neon-yellow solids and pale background create an energetic yet calm feeling—bright without aggression, forward-looking without anxiety.
Why it works Chartreuse is inherently youthful and digital; the pastel background softens it, and the minimal layout gives the eye room to breathe, resulting in an aesthetic that feels confident, modern, and approachable.
Type appears to be a geometric sans-serif (likely Helvetica or similar) in a regular or medium weight, set in small caps or standard case within bordered boxes and at large display size for headers.
Why it works Geometric sans-serif is the lingua franca of minimalist tech design; keeping it simple and weight-consistent prevents competing with the visual drama of the yellow solids and maintains the high-contrast, readable hierarchy.
The 3D solids are lit from a gentle, overhead-left angle with soft falloff shadows; there's no strong chiaroscuro or rim-light drama.
Why it works Soft lighting feels refined and contemporary (industrial-product-render style) rather than theatrical; it lets the color and geometry be the stars without mood-heavy shadows, keeping the overall feel clean and balanced.