Commercialtype
Type Specimen
Loading
Sharp Type
Cool, deep ocean blue and soft gray, precise sans-serifs in spacious, clean layouts.
Click any value to copy. Roles are suggestions, not gospel.
- #0768f7oklch(56.1% 0.228 260)Dominant
- #97c0fcoklch(80.1% 0.096 258)Surface
- #033680oklch(35.4% 0.135 259)Ink
- #8e9190oklch(65.4% 0.004 174)Accent
- #d4c4bcoklch(83.1% 0.021 48)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Earth | 14px | 400 | 1.36 | 0.02px | Aa Bb Cc |
| h3 | Earth | 37px | 700 | 1.19 | 0.02px | Aa Bb Cc |
| body | Earth | 14px | 400 | 1.36 | 0.02px | Aa Bb Cc |
| button | Earth | 14px | 400 | 1.36 | 0.02px | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #0768f7;
--color-surface: #97c0fc;
--color-ink: #033680;
--color-accent: #8e9190;
--color-detail: #d4c4bc;
}
/* CSS variables exposed by source */
:root {
--primary-border: 1px solid #bdbdbd;
--foreground-color: #000;
--primary-border-color: #bdbdbd;
--background-color: #fff;
--light-text-background-color: #000;
--inactive-text-color: #b5b5b5;
--header-height: 4.25rem;
--placeholder-background: repeating-conic-gradient(#eee 0% 25%,transparent 0% 50%) 50% /20px 20px;
--page-padding: 2rem;
--vertical-spacer: 5rem;
--notification-text-color: #006d72;
--big-border-radius: 10px;
--light-text-color: #fff;
--destructive-color: #ff6c6c;
--notification-background-color: #ffd5ce;
--dark-text-color: #000;
--dark-text-background-color: #fff;
--content-block-min-height: 500px;
--light-background-color-raw: 244,244,244;
--header-item-gap: 1.5rem;
--heavy-border: 3px solid #000;
--row-height: 3rem;
--uncollapsed-header-height: calc(4.25rem * 3 + 1.5rem * 2);
--content-block-gutter: 1.5rem;
--light-background-color: rgba(244,244,244,1);
--purchase-color: #297dfc;
--small-border-radius: 0.5rem;
--form-element-height: 2.7rem;
}Drop-in prompt
Build a landing page in the visual style of Sharp Type.
Reference design system (extracted from the live site):
- Palette: #0768f7, #97c0fc, #033680, #8e9190, #d4c4bc
- Typefaces: Earth
- Macrostructure: Type Specimen
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/sharptype-co
