Cosmos

Design Specification — Cosmos

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#881337). All type is set in cosmosOracle. Detected font weights: 300, 350, 400, 500, 700. Detected style signatures: gradient-rich / aurora; rounded / pill-heavy; technical / mono accents.

Logo asset(s): https://www.cosmos.so/apple-icon.png?apple-icon.2e21fxh1087ib.png

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Gradients

• linear-gradient(in lab, red, red))
• linear-gradient(#0000 18.815%,#00000038 100%)
• linear-gradient(#0000 18.815%,#00000078 100%)
• linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)
• linear-gradient(135deg,#666 0%,#242424 100%)
• linear-gradient(#0000 0%,#0000004d 100%),linear-gradient(#0000 45%,#0000004d 90%),linear-gradient(#0000 0%,#0000004d 100%),linear-gradient(#0000 45%,#0000004d 90%)
• linear-gradient(#0000 0%,#0000004d 100%),linear-gradient(#0000 45%,#0000004d 90%)
• linear-gradient(#00000026 0%,#00000073 100%)
• linear-gradient(#00000078 0%,#0000 81.185%)
• linear-gradient(#0000 0%,#0000004d 100%),linear-gradient(90deg,#414141 0% 100%)

> 10 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: cosmosOracle — stack: cosmosOracle

Font stacks (most used first)

• cosmosOracle
• basisMono
• var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")
• var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace)
• var(--font-basis-mono)
• var(--font-cosmos-oracle)
• basisMono Fallback
• cosmosOracle Fallback

Derived type scale

Font sizes (by frequency)

Weights in use: 300, 350, 400, 500, 700

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Layout

Container max-width: 768px

Grid columns (largest detected grid): 12

Breakpoints

• 40rem
• 48rem
• 64rem
• 80rem
• 96rem

Animation & Motion

Easing curves

• cubic-bezier(0, 0, .2, 1)
• cubic-bezier(.4, 0, .2, 1)
• cubic-bezier(.4, 0, .6, 1)
• cubic-bezier(.4, 0, .2, 1)
• cubic-bezier(.16, 1, .3, 1)
• cubic-bezier(.22, 1, .36, 1)
• var(--tw-ease,var(--default-transition-timing-function))
• var(--ease-in-out)

Keyframes

@keyframes sequence-card-image-reveal { 0%{opacity:0;filter:blur(18px);transform:scale(1.035)}to{opacity:1;filter:blur();transform:scale(1.015)} }
@keyframes sequence-hero-strip-shape-swap { 0%{filter:blur();transform:scale(1)}50%{filter:blur(18px);transform:scale(1.055)}to{filter:blur();transform:scale(1)} }
@keyframes sequence-hero-strip-image-out { 0%,25%{opacity:1}75%,to{opacity:0} }
@keyframes sequence-hero-strip-image-in { 0%,25%{opacity:0}75%,to{opacity:1} }
@keyframes dot-wave-1 { 0%,10%{opacity:0}20%,80%{opacity:1}90%,to{opacity:0} }
@keyframes dot-wave-2 { 0%,20%{opacity:0}40%,60%{opacity:1}80%,to{opacity:0} }
@keyframes dot-wave-3 { 0%,40%{opacity:0}50%,55%{opacity:1}65%,to{opacity:0} }
@keyframes fade-in { 0%{opacity:0}to{opacity:1} }
@keyframes hover-sentinel { 0%{--hover-sentinel:0}to{--hover-sentinel:1} }
@keyframes enter { 0%{opacity:0;filter:blur(2px)}to{opacity:1;filter:blur()} }
@keyframes scale-in { 0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)} }
@keyframes scroll-left { 0%{transform:translate(0)}to{transform:translate(-505px)} }
@keyframes snake-border { 0%{stroke-dashoffset:0}to{stroke-dashoffset:-16px} }
@keyframes see-similar-button { 0%{opacity:0;filter:blur(4px);transform:scale(.8)translateY(40px)}to{opacity:1;filter:blur();transform:scale(1)translateY(0)} }
@keyframes similar-elements-enter { 0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)} }
@keyframes canvas-enter { 0%{opacity:0;filter:blur(20px);transform:scale(.8)}to{opacity:1;filter:blur();transform:scale(1)} }
@keyframes ext-border-glow-spin { 0%{--ext-border-glow:35deg}15%{--ext-border-glow:79deg}19%{--ext-border-glow:101deg}69%{--ext-border-glow:259deg}73%{--ext-border-glow:281deg}to{--ext-border-glow:395deg} }
@keyframes ext-border-glow-fade { 0%,80%{opacity:1}to{opacity:0} }

Animations

• .3s ease-out .4s both fade-in
• var(--animate-canvas-enter)
• var(--animate-dot-1)
• var(--animate-dot-2)
• var(--animate-dot-3)
• var(--animate-element-view)
• var(--animate-enter)
• var(--animate-fade-in)
• var(--animate-fade-in-quick)
• none

Components

Extracted from the page's own interactive elements (classes → resolved CSS values).

button-primary — sample text: “MenuOpen”

button-secondary — sample text: “Log in”

navigation-link

badge

CTA labels found on page

• Sign up
• Get the app
• Download the app
• Sign up for Cosmos

Source Design Tokens (CSS custom properties)

:root {
  --spacing: .25rem;
  --container-xs: 20rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-xl: 36rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-4xl: 56rem;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --tracking-tight: -.025em;
  --tracking-wide: .025em;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --radius-xs: .125rem;
  --radius-sm: .25rem;
  --radius-md: .375rem;
  --radius-lg: .5rem;
  --radius-xl: .75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-4xl: 2rem;
  --drop-shadow-lg: 0 4px 4px #00000026;
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --animate-spin: spin 1s linear infinite;
  --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
  --blur-xs: 4px;
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --blur-2xl: 40px;
  --aspect-video: 16 / 9;
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  --radius-element: .1875rem;
  --color-white: var(--color-white);
  --color-black: var(--color-black);
  --text-color-primary: var(--color-text-primary);
  --text-color-secondary: var(--color-text-secondary);
  --text-color-tertiary: var(--color-text-tertiary);
  --text-color-quaternary: var(--color-text-quaternary);
  --text-color-inverted: var(--color-text-inverted);
  --text-color-onmedia: var(--color-text-onmedia);
  --text-color-critical: var(--color-text-critical);
  --text-color-success: var(--color-text-success);
  --text-color-alert: var(--color-text-alert);
  --text-color-link: var(--color-text-link);
  --text-color-disabled: var(--color-text-disabled);
  --background-color-button-primary: var(--color-button-primary);
  --background-color-button-onmedia: var(--color-button-onmedia);
  --background-color-button-inverted: var(--color-background-primary);
  --background-color-hover-primary: var(--color-hover-primary);
}

Do's and Don'ts

Do

• Do reserve the accent #881337 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 300, 350, 400, 500, 700.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't add drop shadows; the source page relies on borders and surface shifts for depth, not elevation.

Design Tokens (copy-paste)

:root {
  --color-primary: #78350F;
  --color-accent: #881337;
  --color-background: #FFFFFF;
  --color-surface: #F7F5F3;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #FDE68A;
  --color-border: #FECDD3;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F8F5F2;
  --color-surface-container: #F7F5F3;
  --color-surface-container-high: #F5F5F5;
  --color-surface-container-highest: #F5F4F2;
  --font-sans: cosmosOracle;
  --font-size-display: 74px;
  --font-size-headline-lg: 38px;
  --font-size-headline-md: 31px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14.8px;
  --font-size-label-sm: 12px;
  --radius-sm: 2px;
  --radius-lg: 40px;
  --radius-pill: 9999px;
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 17px;
  --space-lg: 35px;
  --tracking-display: -.02em;
  --container-max: 768px;
}