Anytype
Feature Stack
Loading
Ulysses
Deep charcoal expanse—precise sans-serif geometry floats in quiet, luminous space.
Click any value to copy. Roles are suggestions, not gospel.
- #fcdc4coklch(89.7% 0.160 96)Dominant
- #826b02oklch(53.4% 0.109 94)Surface
- #64acf4oklch(72.8% 0.128 250)Ink
- #7c7c7coklch(58.6% 0.000 90)Accent
- #a8c4d4oklch(80.5% 0.038 233)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | interstate | 48px | 700 | 1.04 | 0 | Aa Bb Cc |
| h2 | interstate | 48px | 700 | 1.2 | 0 | Aa Bb Cc |
| h3 | interstate | 26px | 700 | 1.2 | 0 | Aa Bb Cc |
| body | interstate | 15px | 400 | 1.6 | 0 | Aa Bb Cc |
| button | interstate | 19px | 400 | 1 | 0 | Aa Bb Cc |
Max content width 1920px
:root {
--color-dominant: #fcdc4c;
--color-surface: #826b02;
--color-ink: #64acf4;
--color-accent: #7c7c7c;
--color-detail: #a8c4d4;
}
/* CSS variables exposed by source */
:root {
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--font-family-sans-serif: "interstate", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--primary: #fc0;
--secondary: #403f3e;
--light: #f7f7f5;
--yellow: #fc0;
--green: #00c675;
--pink: #e83e8c;
--breakpoint-xs: 0;
--theme-color-success: #00c675;
--teal: #20c997;
--theme-color-dark: #27272b;
--breakpoint-md: 768px;
--gray-dark: #363534;
--theme-color-light: #f7f7f5;
--danger: #f56a6a;
--white: #fff;
--success: #00c675;
--theme-color-gray-dark: #363534;
--theme-color-primary: #fc0;
--gray: #545352;
--red: #f56a6a;
--theme-color-warning: #fc0;
--cyan: #4eb7b7;
--dark: #27272b;
--breakpoint-xl: 1200px;
--theme-color-info: #4eb7b7;
--indigo: #6610f2;
--theme-color-danger: #f56a6a;
--purple: #6f42c1;
--breakpoint-sm: 576px;
--breakpoint-lg: 1040px;
--blue: #007bff;
--theme-color-secondary: #403f3e;
--warning: #fc0;
--info: #4eb7b7;
--orange: #e9714c;
}Drop-in prompt
Build a landing page in the visual style of Ulysses.
Reference design system (extracted from the live site):
- Palette: #fcdc4c, #826b02, #64acf4, #7c7c7c, #a8c4d4
- Typefaces: interstate
- 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/ulysses-app
