Feathericons
Component Playground
Loading
Trpc
Deep charcoal code-scape: crisp sans-serif geometry on a vast, dark, digital canvas.
Click any value to copy. Roles are suggestions, not gospel.
- #3d8dccoklch(62.2% 0.123 246)Dominant
- #64392eoklch(39.5% 0.064 35)Surface
- #a7c7dcoklch(81.3% 0.045 237)Ink
- #707593oklch(56.9% 0.047 277)Accent
- #9cb4c4oklch(75.7% 0.035 237)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | system-ui | 48px | 800 | 1 | -1.2px | Aa Bb Cc |
| h2 | system-ui | 18px | 800 | 1.56 | 0.9px | Aa Bb Cc |
| h3 | system-ui | 20px | 700 | 1.4 | 0 | Aa Bb Cc |
| body | ui-sans-serif | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | ui-sans-serif | 18px | 500 | 1.56 | 0 | Aa Bb Cc |
| button | ui-sans-serif | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1320px
:root {
--color-dominant: #3d8dcc;
--color-surface: #64392e;
--color-ink: #a7c7dc;
--color-accent: #707593;
--color-detail: #9cb4c4;
}
/* CSS variables exposed by source */
:root {
--ifm-menu-link-padding-vertical: .375rem;
--ifm-spacing-vertical: 1rem;
--ifm-color-primary-contrast-background: #ebf2fc;
--ifm-pre-line-height: 1.45;
--ifm-global-border-width: 1px;
--ifm-card-horizontal-spacing: 1rem;
--ifm-avatar-photo-size: 3rem;
--ifm-h2-font-size: 1.5rem;
--ifm-font-weight-semibold: 500;
--ifm-color-primary-lighter: #589ed3;
--ifm-color-success-darker: #008b00;
--ifm-scrollbar-track-background-color: #f1f1f1;
--ifm-alert-padding-horizontal: 1rem;
--ifm-color-gray-400: #ccd0d5;
--ifm-color-success-contrast-foreground: #003100;
--ifm-blockquote-color: #444950;
--ifm-blockquote-font-size: 100%;
--docsearch-icon-stroke-width: 1.4;
--ifm-font-size-base: 100%;
--ifm-navbar-link-color: #1c1e21;
--ifm-breadcrumb-padding-vertical: .4rem;
--ifm-breadcrumb-separator-size-multiplier: 1.25;
--ifm-heading-font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
--ifm-link-hover-color: #398ccb;
--ifm-color-primary-dark: #317eb9;
--ifm-background-surface-color: #fff;
--docsearch-footer-background: #fff;
--ifm-font-weight-base: 400;
--ifm-font-weight-normal: 400;
--ifm-color-secondary-contrast-background: #fdfdfe;
--ifm-color-emphasis-400: #ccd0d5;
--ifm-tabs-padding-vertical: 1rem;
--ifm-color-success-lightest: #80d280;
--ifm-navbar-item-padding-horizontal: .75rem;
--ifm-pre-border-radius: .4rem;
--docsearch-hit-height: 56px;
--ifm-color-white: #fff;
--docsearch-modal-height: 600px;
--tw-ring-color: rgba(59,130,246,.5);
--ifm-list-margin: 1rem;
--ifm-color-primary-contrast-foreground: #102445;
--ifm-badge-border-width: 1px;
--docsearch-spacing: 12px;
--ifm-color-danger-lightest: #fd9c9f;
--ifm-color-warning-dark: #e6a700;
--ifm-color-danger-lighter: #fb7478;
--ifm-alert-color: #1c1e21;
--ifm-color-gray-900: #1c1e21;
--ifm-pills-spacing: .125rem;
--ifm-color-danger-light: #fb565b;
--docusaurus-collapse-button-bg: transparent;
--ifm-lightest-value: 50%;
--ifm-color-primary-darkest: #266290;
--tweet-border: 1px solid #dadde1;
--ifm-font-color-base: #1c1e21;
--docsearch-hit-active-color: #fff;
--ifm-breadcrumb-item-background-active: rgba(0,0,0,.05);
--ifm-color-success-light: #26b226;
--ifm-color-emphasis-900: #1c1e21;
--ifm-color-emphasis-500: #bec3c9;
}Drop-in prompt
Build a landing page in the visual style of Trpc.
Reference design system (extracted from the live site):
- Palette: #3d8dcc, #64392e, #a7c7dc, #707593, #9cb4c4
- Typefaces: system-ui, ui-sans-serif
- Macrostructure: Component Playground
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/trpc-io
