Alloy
Feature Stack
Loading
Smartsheet
Deep indigo and charcoal, crisp sans-serif, expansive digital clarity.
Click any value to copy. Roles are suggestions, not gospel.
- #1c4bc4oklch(46.4% 0.196 264)Dominant
- #164754oklch(37.1% 0.056 219)Surface
- #9474ecoklch(64.5% 0.174 293)Ink
- #52a492oklch(66.2% 0.085 177)Accent
- #8fc6b9oklch(78.5% 0.060 178)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | TT Norms | 58px | 600 | 0.94 | -1.81973px | Aa Bb Cc |
| h2 | TT Norms | 44px | 600 | 1.1 | -0.919484px | Aa Bb Cc |
| h3 | TT Norms | 23px | 500 | 1.2 | -0.186099px | Aa Bb Cc |
| body | TT Norms | 16px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | TT Norms | 17px | 500 | 1.31 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #1c4bc4;
--color-surface: #164754;
--color-ink: #9474ec;
--color-accent: #52a492;
--color-detail: #8fc6b9;
}
/* CSS variables exposed by source */
:root {
--spacing: 1.1713vw;
--borderRadiusXxs: 4px;
--borderRadiusMd: 10px;
--borderRadiusSm: 8px;
--borderRadiusXs: 6px;
--vh: 9px;
--sm: calc(1.1713vw * 1);
--xxl: calc(1.1713vw * 4);
--organismHorizontalPadding: calc(1.1713vw * 4);
--layoutPadding: calc(1.1713vw * 4) calc(calc(1.1713vw * 4) - calc(1.1713vw * 1.5));
--cardGap: calc(1.1713vw * 1.5);
--organismVerticalPadding: calc(1.1713vw * 4);
--lg: calc(1.1713vw * 2);
--cardRadius: calc(1.1713vw * .75);
--xxxs: calc(1.1713vw * .25);
--organismPadding: calc(1.1713vw * 4);
--layoutVerticalPadding: calc(calc(1.1713vw * 4) - calc(1.1713vw * 1.5));
--md: calc(1.1713vw * 1.5);
--xxs: calc(1.1713vw * .5);
--xl: calc(1.1713vw * 3);
--xs: calc(1.1713vw * .75);
--xxxl: calc(1.1713vw * 6);
}Drop-in prompt
Build a landing page in the visual style of Smartsheet.
Reference design system (extracted from the live site):
- Palette: #1c4bc4, #164754, #9474ec, #52a492, #8fc6b9
- Typefaces: TT Norms
- 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/smartsheet-com
