Fast integration
Purpose-built components that reflect this brand language in every interaction.
Fog-grey neutrals with a cobalt pinprick.
Real product preview
Fog-grey neutrals with a cobalt pinprick.
Purpose-built components that reflect this brand language in every interaction.
Purpose-built components that reflect this brand language in every interaction.
Purpose-built components that reflect this brand language in every interaction.
99.99%
Uptime
4.8M
Monthly users
147ms
Median response
24/7
Support
---
version: alpha
name: Glassline
description: Fog-grey neutrals with a cobalt pinprick.
colors:
primary: "#0F1419"
secondary: "#4A5568"
tertiary: "#2C5EF5"
neutral: "#F1F3F5"
surface: "#FFFFFF"
on-primary: "#FFFFFF"
typography:
display:
fontFamily: Geist
fontSize: 3.75rem
fontWeight: 600
letterSpacing: "-0.03em"
h1:
fontFamily: Geist
fontSize: 2.25rem
fontWeight: 600
letterSpacing: "-0.02em"
body:
fontFamily: Geist
fontSize: 0.95rem
lineHeight: 1.55
label:
fontFamily: Geist Mono
fontSize: 0.75rem
letterSpacing: "0"
rounded:
sm: 6px
md: 10px
lg: 16px
spacing:
sm: 8px
md: 16px
lg: 32px
components:
button-primary:
backgroundColor: "{colors.tertiary}"
textColor: "{colors.on-primary}"
rounded: "{rounded.md}"
padding: 12px 20px
card:
backgroundColor: "{colors.surface}"
textColor: "{colors.primary}"
rounded: "{rounded.lg}"
padding: 24px
---
## Overview
A cool, quiet palette built around 8-step neutrals. A single cobalt for action keeps the interface calm but directable.
## Colors
The palette is built around high-contrast neutrals and a single accent that drives interaction.
- **Primary (`#0F1419`):** Headlines and core text.
- **Secondary (`#4A5568`):** Borders, captions, and metadata.
- **Tertiary (`#2C5EF5`):** The sole driver for interaction. Reserve it.
- **Neutral (`#F1F3F5`):** The page foundation.
## Typography
- **display:** Geist 3.75rem
- **h1:** Geist 2.25rem
- **body:** Geist 0.95rem
- **label:** Geist Mono 0.75rem
## Do's and Don'ts
- **Do** use Tertiary for exactly one action per screen.
- **Do** let Neutral carry the composition — negative space is a feature.
- **Don't** introduce gradients. This system is flat on purpose.
- **Don't** mix Tertiary with alternate accents; the single-accent rule is load-bearing.
Airline Altitude
/design-mds/cool/airline-altitude/design.md
Aqua Mint
/design-mds/cool/aqua-mint/design.md
Arctic
/design-mds/cool/arctic/design.md
Clinical
/design-mds/cool/clinical/design.md
Cobalt Product
/design-mds/cool/cobalt-product/design.md
Ev Silver
/design-mds/cool/ev-silver/design.md
Glassline
/design-mds/cool/glassline/design.md
Iot Home
/design-mds/cool/iot-home/design.md
Neobank Mint
/design-mds/cool/neobank-mint/design.md
Ocean Depth
/design-mds/cool/ocean-depth/design.md
Pharma Clean
/design-mds/cool/pharma-clean/design.md
Quantum Lab
/design-mds/cool/quantum-lab/design.md
Remote Hub
/design-mds/cool/remote-hub/design.md
Ski Alpine
/design-mds/cool/ski-alpine/design.md
Spatial Glass
/design-mds/cool/spatial-glass/design.md
Stripe Gradient
/design-mds/cool/stripe-gradient/design.md
Tailwind Base
/design-mds/cool/tailwind-base/design.md
Tokyo Midnight
/design-mds/cool/tokyo-midnight/design.md
Weather Stratus
/design-mds/cool/weather-stratus/design.md
Y2k Chrome
/design-mds/cool/y2k-chrome/design.md
Airline Altitude / UI
Preview
Boarding-pass minimal: sky grey, contrail teal.
Aqua Mint / UI
Preview
Seaglass, mint, chilled glass surfaces.
Arctic / UI
Preview
Glacier white, ice blue, breath of steam.
Clinical / UI
Preview
Hospital-grade legibility, but warm.
Cobalt Product / UI
Preview
A shippable SaaS palette with spine.
EV Silver / UI
Preview
Electric-vehicle showroom: liquid silver, voltage blue.