@dante · AI & LLM
Engineered-cosmic AI design system: a single near-black canvas, white outline pills as the entire interactive vocabulary, Universal Sans display at weight 400 with aggressive negative tracking, and uppercase Geist Mono eyebrows.
An engineered-cosmic research lab announcing its work rather than a SaaS marketing site. The entire experience sits edge-to-edge on a single near-black canvas (#0a0a0a) with no gradient hero, no atmospheric backdrop, and no product screenshot — confidently sparse. White outline pills are the entire interactive vocabulary, and a proprietary geometric sans carries every display headline at weight 400. Type is the second decisive voice: aggressive negative tracking on display sizes gives the typography a precise, gathered look, and uppercase tracked monospace eyebrows read like code comments above every section.
The brand is dark-canvas only. Near-black #0a0a0a is the sole true surface, with slightly-lighter fills for cards (#191919) and inputs (#1a1c20) and a 1px hairline (#212327) carrying all elevation. White (#ffffff) is the brand's primary 'color' — button outlines, filled primary pill, and all display text are white-on-near-black. A muted accent palette of sunset-orange (#ff7a17), dusk-purple (#7c3aed), twilight-violet (#c4b5fd) and breeze-blue (#a0c3ec) lives in the tokens but appears rarely on the marketing surface — reserved for product illustrations, icons, and the occasional tag dot. Body copy steps down through #dadbdf and mid-mute #7d8187.
Two faces ladder the system. Universal Sans (open-source substitute: Inter) carries every display, body, button, and link role at weight 400 only — the brand never bolds, letting negative tracking and size hierarchy do the emphasis work (-2.4px at 96px, scaling down the ladder). Geist Mono handles uppercase section eyebrows, labels, and metric counters with positive tracking (1.2–1.4px) at 12–14px, so every eyebrow reads as a code comment. The two-face contrast IS the brand voice.
A 4px base spacing unit scales to 64px; hero and content bands pad to 64px on desktop, cards to 24px interior. Marketing content centres at ~1200px with 2-up product grids collapsing to 1-up on mobile. Radius is binary: 8px on the few rectangular surfaces (cards, inputs) and 9999px pill on every interactive element — the pill is the brand's universal shape. Depth is flat: no shadows anywhere, only 1px hairline borders. Outline buttons use a translucent-white border (rgba(255,255,255,0.25)), never a solid-white border.
Every CTA is a pill: the canonical translucent-white outline pill for nearly everything, with a single rare white-filled pill reserved for Sign Up. Cards are tight 8px charcoal rectangles on #191919 with a hairline border and no shadow. Inputs sit on #1a1c20 with a hairline border and an 8px radius. Section headlines are preceded by an uppercase Geist Mono eyebrow; stats and tags reuse the mono-caps label. Tabs reuse the button pill — inactive tabs are outline pills, the active tab flips to the white-filled polarity.
패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).
#ffffff#0a0a0a#ffffff#fafaf7#dadbdf#7d8187#7d8187#212327#0a0a0a#1a1c20#191919#363a3f#ff7a17#ffc285#7c3aed#c4b5fd#a0c3ec#0d1726Universal Sans, Inter, system-ui, -apple-system, sans-serifUniversal Sans, Inter, system-ui, sans-serifUniversal Sans, Inter, system-ui, sans-serifUniversal Sans, Inter, system-ui, sans-serifGeist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace{
"displayXl": "96px/96px",
"displayLg": "72px/72px",
"displayMd": "48px/48px",
"displaySm": "32px/36px",
"displayXs": "20px/28px",
"bodyLg": "18px/28px",
"body": "16px/24px",
"bodySm": "14px/20px",
"captionMono": "14px/20px",
"captionMonoSm": "12px/16px",
"button": "14px/20px"
}Every CTA is a pill. The canonical shape is a translucent-white outline pill on near-black; a single rare white-filled pill (Sign Up) is the only solid variant. The pill is the entire shape system.
Text field on dark — a canvas-soft #1a1c20 fill with a 1px hairline border and an 8px radius, the brand's only non-pill rounded surface. White ink, mid-mute placeholder.
Tight 8px charcoal card on canvas-card #191919 with a 1px hairline border and no shadow — hairline borders carry all elevation.
Small pill marker in mono-caps — hairline outline for neutral, rare accent tint for product moments.
Universal Sans display ladder at weight 400 with aggressive negative tracking (-2.4px at 96px) — the precision IS the voice. Preceded by mono-caps eyebrows.
Quiet inline links in white — underline-on-hover, mid-mute for secondary. The brand keeps links chromatically silent.
The dark hero — 96px Universal Sans headline at weight 400 with -2.4px tracking on a bare near-black canvas, a mono-caps eyebrow, and outline-pill CTAs. No gradient, no backdrop.
Sticky top nav on bare near-black canvas — Universal Sans wordmark, white nav links, and a single outline-pill CTA on the right.
Quiet footer band on the same near-black canvas — mono-caps column headers, body-mute links, and a hairline divider above the baseline.
Large Universal Sans figures at weight 400 over mono-caps labels — hairline top-border dividers, no color, the engineered-metric look.
Pull-quote in 48px Universal Sans at weight 400 with negative tracking — quiet, chromatically silent, cited with a mono-caps byline.
Pill chip for model markers — a hairline outline pill in Geist Mono, with an optional accent dot drawn from the reserved sunset/dusk/breeze palette.
Round avatar with a hairline ring on canvas — Universal Sans initials, used for author bylines and team rosters. No shadow.
Pill tab list — outline pills on canvas, the active tab flips to a white fill with near-black text (the primary-pill polarity).
An engineered-cosmic research lab announcing its work rather than a SaaS marketing site. The entire experience sits edge-to-edge on a single near-black canvas (#0a0a0a) with no gradient hero, no atmospheric backdrop, and no product screenshot — confidently sparse. White outline pills are the entire interactive vocabulary, and a proprietary geometric sans carries every display headline at weight 400. Type is the second decisive voice: aggressive negative tracking on display sizes gives the typography a precise, gathered look, and uppercase tracked monospace eyebrows read like code comments above every section.
The brand is dark-canvas only. Near-black #0a0a0a is the sole true surface, with slightly-lighter fills for cards (#191919) and inputs (#1a1c20) and a 1px hairline (#212327) carrying all elevation. White (#ffffff) is the brand's primary 'color' — button outlines, filled primary pill, and all display text are white-on-near-black. A muted accent palette of sunset-orange (#ff7a17), dusk-purple (#7c3aed), twilight-violet (#c4b5fd) and breeze-blue (#a0c3ec) lives in the tokens but appears rarely on the marketing surface — reserved for product illustrations, icons, and the occasional tag dot. Body copy steps down through #dadbdf and mid-mute #7d8187.
Two faces ladder the system. Universal Sans (open-source substitute: Inter) carries every display, body, button, and link role at weight 400 only — the brand never bolds, letting negative tracking and size hierarchy do the emphasis work (-2.4px at 96px, scaling down the ladder). Geist Mono handles uppercase section eyebrows, labels, and metric counters with positive tracking (1.2–1.4px) at 12–14px, so every eyebrow reads as a code comment. The two-face contrast IS the brand voice.
A 4px base spacing unit scales to 64px; hero and content bands pad to 64px on desktop, cards to 24px interior. Marketing content centres at ~1200px with 2-up product grids collapsing to 1-up on mobile. Radius is binary: 8px on the few rectangular surfaces (cards, inputs) and 9999px pill on every interactive element — the pill is the brand's universal shape. Depth is flat: no shadows anywhere, only 1px hairline borders. Outline buttons use a translucent-white border (rgba(255,255,255,0.25)), never a solid-white border.
Every CTA is a pill: the canonical translucent-white outline pill for nearly everything, with a single rare white-filled pill reserved for Sign Up. Cards are tight 8px charcoal rectangles on #191919 with a hairline border and no shadow. Inputs sit on #1a1c20 with a hairline border and an 8px radius. Section headlines are preceded by an uppercase Geist Mono eyebrow; stats and tags reuse the mono-caps label. Tabs reuse the button pill — inactive tabs are outline pills, the active tab flips to the white-filled polarity.
DESIGN.mdtext/markdownSKILL.mdtext/markdowntokens/colors.jsonapplication/jsontokens/typography.jsonapplication/jsontokens/components.jsonapplication/jsonadapters/tokens.csstext/cssadapters/shadcn-registry.jsonapplication/jsonadapters/tailwind.config.jstext/javascriptadapters/react/index.tstext/typescriptadapters/html/index.htmltext/htmladapters/html/styles.csstext/css