Chakra Ui
Portfolio Grid
Soft, muted gradients cradle clean, geometric typography in a quiet, spacious digital room.




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | -apple-system | 64px | 600 | 1.2 | 0 | Aa Bb Cc |
| h2 | ui-monospace | 13px | 400 | 1.2 | 0 | Aa Bb Cc |
| body | -apple-system | 16px | 400 | 1.75 | 0 | Aa Bb Cc |
| button | -apple-system | 14px | 400 | 1.75 | 0 | Aa Bb Cc |
Max content width 1140px
:root {
--color-dominant: #3c54f4;
--color-surface: #460aaa;
--color-ink: #6976f6;
--color-accent: #aa8b65;
--color-detail: #a4ccc8;
}
/* CSS variables exposed by source */
:root {
--sl-color-orange: hsl(41, 90%, 60%);
--sl-nav-pad-x: 1.5rem;
--sl-content-inline-start: 18.75rem;
--ec-frm-inlBtnBrd: #353841;
--sl-color-green: hsl(101, 90%, 46%);
--sl-badge-tip-bg: hsl(281, 90%, 30%);
--sl-sidebar-pad-x: 1rem;
--sl-line-height-headings: 1.2;
--sl-color-hairline-shade: #edeef3;
--ec-brdRad: 0px;
--ec-sbThumbHoverCol: #0000005c;
--sl-badge-note-bg: hsl(234, 80%, 30%);
--ec-frm-inlBtnBgHoverOrFocusOpa: 0.2;
--sl-text-h2: 2.1875rem;
--sl-text-h1: 2.625rem;
--sl-text-4xl: 2.1875rem;
--ec-tm-lineMarkerLabelPadInl: 0.2rem;
--ec-tm-markBrdCol: #00000055;
--ec-tm-markBg: #0000001a;
--sl-color-gray-6: #edeef3;
--ec-tm-lineMarkerAccentWd: 0.15rem;
--sl-badge-success-border: hsl(101, 90%, 46%);
--ec-brdCol: color-mix(in srgb, #c1c3c8, transparent 25%);
--sl-color-orange-high: hsl(41, 80%, 25%);
--sl-text-5xl: 2.625rem;
--ec-gtrFg: #788b94;
--ec-codeBg: #f6f7f9;
--ec-tm-delDiffIndCol: #9d4138d0;
--docsearch-icon-stroke-width: 1.4;
--ec-cs-openMarg: 0;
--ec-gtrBrdWd: 1.5px;
--sl-text-xl: 1.25rem;
--ec-cs-openPad: 0;
--ec-frm-trmTtbDotsFg: color-mix(in srgb, #c1c3c8, transparent 25%);
--sl-badge-danger-border: hsl(339, 90%, 60%);
--docsearch-footer-background: #fff;
--sl-nav-height: 4rem;
--sl-text-h3: 1.8125rem;
--sl-outline-offset-inside: -.1875rem;
--sl-color-bg-inline-code: #edeef3;
--sl-color-purple-low: hsl(281, 80%, 90%);
--sl-badge-default-border: #3d50f5;
--sl-main-pad: 0 0 3vh 0;
--sl-content-pad-x: 1.5rem;
--sl-font-system-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--ec-frm-edTabsMargInlStart: 0;
--sl-z-index-menu: 5;
--ec-focusBrd: #93a1a1;
--sl-badge-success-text: #fff;
--docsearch-hit-height: 56px;
--docsearch-modal-height: 600px;
--ec-frm-edTabBrdRad: 0px;
--ec-tm-delDiffIndContent: '-';
--sl-badge-success-bg: hsl(101, 80%, 22%);
--sl-color-hairline: #edeef3;
--docsearch-spacing: 12px;
--docsearch-modal-shadow: 0px 25px 7px #00000003, 0px 16px 6px #00000008, 0px 9px 5px #16181d14, 0px 4px 4px #00000029, 0px 4px 2px #0000000a;
--sl-color-red-low: hsl(339, 80%, 90%);
--sl-text-2xs: .75rem;
--ec-frm-edActTabBg: #f6f7f9;
}Drop-in prompt
Build a landing page in the visual style of Docs Astro Build.
Reference design system (extracted from the live site):
- Palette: #3c54f4, #460aaa, #6976f6, #aa8b65, #a4ccc8
- Typefaces: -apple-system, ui-monospace
- Macrostructure: Portfolio 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/docs-astro-build