@dante · Media & Consumer
Mission-oriented aerospace design system: pure black canvas, full-bleed rocket photography, uppercase D-DIN display type in tight leading, and a single ghost-outlined pill CTA per band.
A mission-oriented aerospace design language built on negation: a pure black canvas (#000000), full-bleed photographic and video heroes of rockets and Mars landscapes, and uppercase D-DIN display type set in tight vertical leading. There is no brand color beyond black and white — the imagery itself supplies every hue. Each marketing band is a single full-viewport photograph or autoplaying rocket-launch video paired with one all-caps headline and one ghost-outlined pill CTA. The composition reads closer to a film title card than a SaaS landing page — unapologetically austere and engineered.
The system is monochrome by rule. Canvas Night (#000000) is the default marketing surface, with Canvas Night Soft (#0a0a0a) for subtle content separation, and Canvas Light (#ffffff) reserved for the shop. Text is On Primary white (#ffffff) with a barely-cooled On Primary Mute (#f0f0fa) for secondary hierarchy; Ink (#000000) and Ink Mute (#5a5a5f) carry the light surfaces. Borders are 1px hairlines — #3a3a3f on dark, #e0e0e8 on light. Canvas Cool (#f0f0fa) is the only non-black-white fill, used on shop CTAs. Adding a brand accent color breaks the system.
Two cuts of one industrial family. Display tiers use D-DIN-Bold (uppercase, tight tracking, condensed feel), falling back to Arial Narrow, Arial, then Verdana. Body, button labels, and captions use D-DIN regular. The display is unusually tight in vertical leading — 0.95 at 80px, 1.2 at 60px — and unusually loose in horizontal tracking (1.6px positive at 80px). All-caps eyebrows and buttons carry 0.96–1.17px tracking. There is no mono tier; code blocks are not part of the system.
An 8px base unit with dense sub-units (4 / 12 / 16 / 18 / 24). Marketing bands are full-viewport with no internal padding — the photograph IS the section — while the shop uses 48–64px vertical rhythm and a 1200px reading column. Border radius climbs from 4px inputs to 8px shop cards, 16px larger chrome, and the signature 32px ghost pill. Depth is exclusively photographic: no drop shadows, blurs, glows, or gradient overlays. When type needs separation, the image is graded darker rather than scrimmed.
Every marketing band is a full-bleed photo/video hero with an 80px uppercase headline and a single sx-btn-ghost-dark pill — never two CTAs side by side. The nav is fixed and overlay-style, transparent white-on-image. Cards split between zero-radius photographic bands and 8px hairline shop-product cards. Inputs live only on the light shop surface at 4px radius. Links carry a persistent underline; tabs and stats use hairline/underline indicators. Filled buttons exist exclusively on the shop.
패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).
#000000#000000#ffffff#f0f0fa#000000#0a0a0a#ffffff#f0f0fa#3a3a3f#e0e0e8#ffffff#0000ee#5a5a5fD-DIN-Bold, 'Arial Narrow', Arial, Verdana, sans-serifD-DIN-Bold, 'Arial Narrow', Arial, Verdana, sans-serifD-DIN, Arial, Verdana, sans-serifD-DIN, Arial, Verdana, sans-serifD-DIN, 'JetBrains Mono', ui-monospace, Menlo, monospace{
"displayXxl": "80px/0.95",
"displayXl": "60px/1.20",
"displayLg": "48px/1.25",
"bodyLg": "16px/1.70",
"bodyMd": "16px/1.50",
"buttonCap": "13.008px/0.94",
"microCap": "12px/2.0",
"caption": "13.008px/1.50"
}Ghost-outlined pill CTA — 1px white border on dark canvas, 1px ink border on light, uppercase 13px D-DIN label with 1.17px tracking, 32px pill radius. A cool-fill variant lives only on the shop site.
Shop-site form field on white — 4px radius, 1px light hairline border, 16px D-DIN body, ink text. Focus darkens the hairline to full black rather than adding a colored ring.
Two forms — a zero-radius full-bleed photographic band on dark marketing, and an 8px light product card on the shop with a 1px hairline. No shadows; depth is photographic.
All-caps micro marker in 12px D-DIN with 0.96px tracking — outlined hairline on dark, or a cool-fill chip on light. Purely typographic, no color beyond black and white.
Uppercase D-DIN-Bold hierarchy — 80px hero at 0.95 leading and 1.6px tracking down to 48px sub-sections. Engineer-tight vertical stacking, wide positive horizontal tracking.
Persistently underlined inline link — white on dark canvas, ink on light. No hover color shift; the underline is always present.
Full-bleed photographic band — 80px uppercase D-DIN headline and one ghost pill overlaid on a rocket/Mars image at high opacity with no scrim. Film-title-card composition.
Fixed top nav overlaid on photography — transparent, white-on-image, uppercase D-DIN caps items with wide tracking and a wordmark on the left.
Site-wide dark footer on pure black — uppercase micro-cap nav columns and a small caption-weight legal row, all white-on-black.
Engineering-spec figure — a large D-DIN-Bold numeral over an uppercase micro-cap label, top-hairline divided, mission-telemetry in feel.
Mission-statement pull-quote in 48px uppercase D-DIN-Bold with a micro-cap attribution — austere, no decorative quotation marks.
Pill-shaped filter chip at 32px radius — hairline outline on dark, cool-fill on light. Used for vehicle and mission filters on the shop and updates feed.
Circular monogram avatar with a hairline ring — used for crew rosters and mission-team bylines. Monochrome, no drop shadow.
Uppercase micro-cap tab row with an underline active indicator — used to switch between vehicle specs and mission phases. No pill container; the underline carries the state.
A mission-oriented aerospace design language built on negation: a pure black canvas (#000000), full-bleed photographic and video heroes of rockets and Mars landscapes, and uppercase D-DIN display type set in tight vertical leading. There is no brand color beyond black and white — the imagery itself supplies every hue. Each marketing band is a single full-viewport photograph or autoplaying rocket-launch video paired with one all-caps headline and one ghost-outlined pill CTA. The composition reads closer to a film title card than a SaaS landing page — unapologetically austere and engineered.
The system is monochrome by rule. Canvas Night (#000000) is the default marketing surface, with Canvas Night Soft (#0a0a0a) for subtle content separation, and Canvas Light (#ffffff) reserved for the shop. Text is On Primary white (#ffffff) with a barely-cooled On Primary Mute (#f0f0fa) for secondary hierarchy; Ink (#000000) and Ink Mute (#5a5a5f) carry the light surfaces. Borders are 1px hairlines — #3a3a3f on dark, #e0e0e8 on light. Canvas Cool (#f0f0fa) is the only non-black-white fill, used on shop CTAs. Adding a brand accent color breaks the system.
Two cuts of one industrial family. Display tiers use D-DIN-Bold (uppercase, tight tracking, condensed feel), falling back to Arial Narrow, Arial, then Verdana. Body, button labels, and captions use D-DIN regular. The display is unusually tight in vertical leading — 0.95 at 80px, 1.2 at 60px — and unusually loose in horizontal tracking (1.6px positive at 80px). All-caps eyebrows and buttons carry 0.96–1.17px tracking. There is no mono tier; code blocks are not part of the system.
An 8px base unit with dense sub-units (4 / 12 / 16 / 18 / 24). Marketing bands are full-viewport with no internal padding — the photograph IS the section — while the shop uses 48–64px vertical rhythm and a 1200px reading column. Border radius climbs from 4px inputs to 8px shop cards, 16px larger chrome, and the signature 32px ghost pill. Depth is exclusively photographic: no drop shadows, blurs, glows, or gradient overlays. When type needs separation, the image is graded darker rather than scrimmed.
Every marketing band is a full-bleed photo/video hero with an 80px uppercase headline and a single sx-btn-ghost-dark pill — never two CTAs side by side. The nav is fixed and overlay-style, transparent white-on-image. Cards split between zero-radius photographic bands and 8px hairline shop-product cards. Inputs live only on the light shop surface at 4px radius. Links carry a persistent underline; tabs and stats use hairline/underline indicators. Filled buttons exist exclusively on the shop.
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