Alloy
Feature Stack
Loading
Everlaw
Cool, vast, grid-structured space—crisp sans-serif geometry on a muted, deep-sea palette.
Click any value to copy. Roles are suggestions, not gospel.
- #8cc06coklch(75.1% 0.126 134)Dominant
- #2d1c11oklch(24.5% 0.033 53)Surface
- #b3fb8coklch(91.6% 0.160 135)Ink
- #6fa362oklch(66.2% 0.108 139)Accent
- #cecebdoklch(84.7% 0.023 107)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Brown | 90px | 400 | 1.09 | -4px | Aa Bb Cc |
| h2 | Brown | 45px | 400 | 1.2 | -2px | Aa Bb Cc |
| h3 | Brown | 45px | 400 | 1.2 | -2px | Aa Bb Cc |
| body | Brown | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| button | Brown | 16px | 400 | 1 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #8cc06c;
--color-surface: #2d1c11;
--color-ink: #b3fb8c;
--color-accent: #6fa362;
--color-detail: #cecebd;
}
/* CSS variables exposed by source */
:root {
--color-pattern: #b3f98f;
--accent-button-text-color: #000;
--space-gutter-v: 1rem;
--space-4: 3.5rem;
--color-divider: #ececec;
--color-bg: #fff;
--accent-button-border-color-hover: #b3f98f;
--space-outer: 3.5rem;
--color-btn: #b3f98f;
--color-text-link-hover: #5e5e5e;
--color-btn-text: #000;
--color-text-link: #000;
--color-bd: #f1f0ea;
--color-nav-active-text: #1b4af5;
--shadow-color: 0deg 0% 0%;
--space-5: 5rem;
--accent-button-text-color-hover: #000;
--color-taggable-card-text-primary: #000;
--space-3: 2.5rem;
--color-nav-accent: #b3f98f;
--color-btn-text-hover: #000;
--color-taggable-card-background: #fff;
--color-eyebrow: #707069;
--color-nav-text: #042a2d;
--space-1: 1.5rem;
--color-taggable-card-text-secondary: #000;
--color-taggable-card-hover: #fff;
--space-inner: 2rem;
--color-bg-default: #fff;
--color-parchment-nav-additional: #f1f0ea;
--space-columns: 12;
--color-cta-banner-icon-path: #000;
--shadow-opacity: 0.3;
--color-timeline-fill: #b3f98f;
--color-spotlight: #b3f98f;
--color-cta-banner-icon-path-hover: #b3f98f;
--color-timeline-track: #f1f0ea;
--color-text-success: #0ec97b;
--color-text-soft: #5e5e5e;
--color-text-error: #b20101;
--color-divider-soft: #ececec;
--color-dark: #000;
--color-spotlight-link: #22756d;
--space-6: 8rem;
--accent-button-border-color: #b3f98f;
--color-taggable-card-accent: #f1f0ea;
--color-text-warning: #6c5300;
--space-gutter: 1rem;
--color-btn-text-secondary: #000;
--color-nav-accent-text: #042a2d;
--space-fixed-1: 0.5rem;
--space-2: 2rem;
--color-text: #000;
--color-spotlight-text: #000;
--color-text-hn: #000;
--space-inner-v: 2.5rem;
--color-placeholder-txt: color("true gray", "300");
--space-outer-v: 8rem;
--accent-button-background-color-hover: #fff;
--space-gutter-s: 0.5rem;
}Drop-in prompt
Build a landing page in the visual style of Everlaw.
Reference design system (extracted from the live site):
- Palette: #8cc06c, #2d1c11, #b3fb8c, #6fa362, #cecebd
- Typefaces: Brown
- Macrostructure: Feature Stack
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/everlaw-com
