Archdaily
Ecosystem Index
Loading
Behance
Cool, spacious gallery: crisp white, clean sans serif, subtly shaded depth.
Click any value to copy. Roles are suggestions, not gospel.
- #0b57f9oklch(53.2% 0.250 263)Dominant
- #0424baoklch(38.5% 0.228 265)Surface
- #70a6fcoklch(72.4% 0.138 259)Ink
- #83736doklch(56.9% 0.022 42)Accent
- #ccaab3oklch(77.1% 0.041 0)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | acumin-pro-wide | 80px | 600 | 0.85 | -4px | Aa Bb Cc |
| h2 | acumin-pro-wide | 20px | 400 | 1.5 | -0.4px | Aa Bb Cc |
| h3 | acumin-pro | 10px | 700 | 2.2 | 0 | Aa Bb Cc |
| body | acumin-pro | 12px | 400 | 1.3 | 0 | Aa Bb Cc |
| button | acumin-pro | 14px | 600 | 1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #0b57f9;
--color-surface: #0424ba;
--color-ink: #70a6fc;
--color-accent: #83736d;
--color-detail: #ccaab3;
}
/* CSS variables exposed by source */
:root {
--color-picker-focus-outline-offset: 1px;
--border-manager-leading-radius: 0.25rem 0 0 0.25rem;
--border-manager-notch-margin-left: 0;
--border-manager-filter-label-font-size: 0.813rem;
--background-gradient-color-2: rgba(255, 255, 255);
--color-picker-selected-size: 0.813rem;
--color-picker-item-size: 1.25rem;
--background-gradient-color-1: rgba(245, 248, 255);
--border-manager-notch-padding: 3px;
--color-picker-grid-auto-flow: row;
--color-picker-selected-circle-color: rgba(255, 255, 255);
--color-picker-gap: 0.25rem;
--border-manager-trailing-min-width: 0.25rem;
--color-picker-tag-close-icon-color: rgba(240, 240, 240);
--color-picker-focus-outline-color-light: rgba(0, 87, 255);
--border-manager-border-color: rgba(232, 232, 232);
--color-picker-columns: auto-fill;
--color-picker-border-width: 1px;
--border-manager-leading-width: calc(10px - 3px);
--border-manager-trailing-radius: 0 0.25rem 0.25rem 0;
--border-manager-filter-label-font-weight: 700;
--color-picker-label-font-color: rgba(0, 0, 0);
--be-color-blue-200: rgba(224, 234, 255);
--be-button-width: min-content;
--be-select-item-padding: 0.75rem 1rem;
--be-bg-project-cover: rgba(240, 240, 240);
--be-color-translucent-white-500: rgba(255, 255, 255, 0.5);
--be-text-secondary-contrast: rgba(71, 71, 71);
--be-sp-44: 11rem;
--be-modal-default-background: rgba(255, 255, 255);
--be-color-blue-200-rgb: 224, 234, 255;
--be-dialog-close-icon-color: rgba(112, 112, 112);
--be-chart-legend-key-year: rgba(89, 89, 89);
--be-color-orange-200-rgb: 254, 247, 241;
--be-select-trigger-no-float-label-margin: 0.375rem 0;
--be-card-content-flex-direction: none;
--be-small-input-text-size: 0.75rem;
--be-sp-16: 4rem;
--be-color-slate-500-rgb: 10, 116, 148;
--be-card-hover-filter: drop-shadow(0 1px 10px rgba(0, 0, 0, 0.1));
--be-border-accent: rgba(0, 87, 255);
--be-border-secondary: rgba(224, 234, 255);
--be-sp-0-5: 0.125rem;
--be-combobox-item-padding: 0.75rem 1rem;
--be-warning-banner-border-left: rgba(249, 124, 0);
--sticky-footer-border-radius: 0;
--be-popover-arrow-scale: 1;
--be-sp-4-5: 1.125rem;
--be-checkbox-background-color-disabled: rgba(236, 236, 236);
--owners-font-size: 0.75rem;
--be-sp-8: 2rem;
--be-analytics-placeholder-bg-primary: rgb(220, 231, 255);
--sticky-footer-height: 40px;
--be-sp-5: 1.25rem;
--be-color-translucent-black-400: rgba(0, 0, 0, 0.4);
--be-select-trigger-border-radius: 4px;
--be-card-margin: 0.625rem;
--be-accordion-activator-header-justify: flex-start;
--be-button-primary-icon-color: rgba(255, 255, 255);
--be-progress-meter-height: 100%;
}Drop-in prompt
Build a landing page in the visual style of Behance.
Reference design system (extracted from the live site):
- Palette: #0b57f9, #0424ba, #70a6fc, #83736d, #ccaab3
- Typefaces: acumin-pro-wide, acumin-pro
- Macrostructure: Ecosystem Index
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/behance-net--search-projects-profile-20page
