Bear
Feature Stack
Loading
Anytype
Soft, warm paper textures cradle crisp, geometric type in a subtly glowing, muted palette.
Click any value to copy. Roles are suggestions, not gospel.
- #f0a80eoklch(78.1% 0.161 77)Dominant
- #7d5707oklch(48.5% 0.098 78)Surface
- #fbe7bcoklch(93.3% 0.060 86)Ink
- #b0888coklch(66.6% 0.049 12)Accent
- #d0bca3oklch(80.5% 0.041 73)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | inter | 18px | 400 | 1.44 | -0.28px | Aa Bb Cc |
| h2 | riccionets | 88px | 400 | 0.86 | -2.4px | Aa Bb Cc |
| h3 | riccionets | 120px | 400 | 0.83 | -3.2px | Aa Bb Cc |
| button | inter | 18px | 400 | 1 | -0.28px | Aa Bb Cc |
Max content width 1680px
:root {
--color-dominant: #f0a80e;
--color-surface: #7d5707;
--color-ink: #fbe7bc;
--color-accent: #b0888c;
--color-detail: #d0bca3;
}
/* CSS variables exposed by source */
:root {
--font-secondary: "riccionets",Helvetica,sans-serif;
--font-weight-thin: 100;
--font-primary: "inter",Helvetica,sans-serif;
--offset-desktop: 16rem;
--vh: 9px;
--tw-translate-z: 0;
--default-transition-duration: .15s;
--tw-drop-shadow-alpha: 100%;
--tw-border-style: solid;
--offset-mobile: 10rem;
--default-transition-timing-function: cubic-bezier(.4,0,.2,1);
--swiper-navigation-size: 44px;
--tw-translate-y: 0;
--tw-translate-x: 0;
--swiper-theme-color: #007aff;
--animate-spin: spin 1s linear infinite;
--tw-outline-style: solid;
--scrollbar-width: 0px;
}Drop-in prompt
Build a landing page in the visual style of Anytype.
Reference design system (extracted from the live site):
- Palette: #f0a80e, #7d5707, #fbe7bc, #b0888c, #d0bca3
- Typefaces: inter, riccionets, ui-sans-serif
- 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/anytype-io--app-privacy
