@dante · AI & LLM
Cinematic film-production design system: dark-dominant canvas, single abcNormal typeface, cool-slate neutrals, zero shadows, and full-bleed photography as the primary UI.
A cinematic reel brought to life as a website — dark, editorial, and film-production-grade, where full-bleed photography and video ARE the primary UI. This is a visual manifesto for AI-powered creativity: every section feels like a frame from a film, with dramatic lighting and high-quality imagery dominating the viewport. The interface itself retreats into near-invisibility — minimal borders, zero shadows, subtle cool-gray text on a near-black canvas — so the visual content speaks louder than any chrome. Sections alternate between true-black cinematic dark and cool-cloud light like scenes changing.
The interface is intentionally colorless — all richness comes from photography. Backgrounds anchor on Runway Black (#000000), Deep Black (#030303), and Dark Surface (#1a1a1a); text is Pure White (#ffffff) on dark and Charcoal (#404040) on light. The neutral spine is distinctly cool and blue-gray — Cool Slate (#767d88), Mid Slate (#7d848e), Muted Gray (#a7a7a7), Cool Silver (#c9ccd1) — never warm. A single dark-mode border, Border Dark (#27272a), provides barely-visible containment. There are no gradients and no decorative accent colors in the UI itself.
One typeface, complete expression: abcNormal (with abcNormal Fallback; Inter or DM Sans as external substitutes) handles everything from 48px display to 11px micro labels. Variety comes from size, weight, case, and tracking — never a family switch. Display headings run at weight 400, line-height 1.0, with negative letter-spacing (-1.2px to -0.9px) for film-title density. Even body text is compressed (1.30–1.50 leading, -0.16px tracking). Small uppercase labels use weight 450 — an uncommon intermediate — with positive 0.35px tracking as navigational signposts.
8px base spacing on a 4/6/8/12/16/20/24/28/32/48/64/78 scale, with generous 48–78px vertical section gaps for cinema-grade breathing. Containers reach up to 1600px (cinema-wide); heroes are full-bleed edge-to-edge; image grids are asymmetric and magazine-style. Border-radius stays subtle — 4px on buttons, 6px on links, 8px on image cards, 16px only for alert-style containers — the geometry is rounded, never pill-shaped. Depth is communicated entirely through dark/light section alternation, photographic depth-of-field, and overlay transparency: zero CSS box-shadow anywhere.
Buttons are extremely restrained — 14px weight-600 with hairline borders and sharp 4px radius, no heavy fills. Cards are primarily photographic: the image IS the card, at 8px radius with no shadow. Nav is minimal and transparent over hero content. Labels and tags are uppercase micro-type at weight 450–500 with 0.35px tracking. The mission-statement quote — white 36px abcNormal on true black — is the emotional close.
패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).
#000000#030303#1a1a1a#ffffff#fefefe#e9ecf2#27272a#404040#3f3f3f#767d88#7d848e#a7a7a7#c9ccd1#d0d4d4#6b7280#0c0c0c#999999abcNormal, 'abcNormal Fallback', Inter, 'DM Sans', system-ui, sans-serifabcNormal, 'abcNormal Fallback', Inter, 'DM Sans', system-ui, sans-serifabcNormal, 'abcNormal Fallback', Inter, 'DM Sans', system-ui, sans-serifabcNormal, 'abcNormal Fallback', Inter, 'DM Sans', system-ui, sans-serifabcNormal, ui-monospace, 'JetBrains Mono', Menlo, monospace{
"hero": "48px/1.00",
"section": "40px/1.05",
"subheading": "36px/1.00",
"cardTitle": "24px/1.00",
"featureTitle": "20px/1.00",
"body": "16px/1.40",
"caption": "14px/1.43",
"small": "13px/1.30",
"micro": "11px/1.30"
}Extremely restrained affordance — 14px abcNormal weight 600 with a hairline #27272a border, sharp 4px radius, no fill or shadow. White wordmark button inverts on dark hero imagery.
Single-line field on Dark Surface (#1a1a1a) with a barely-visible #27272a border, sharp 6px radius, and cool-slate placeholder text. Focus lifts the border to Cool Slate, never a bright ring.
The image IS the card — a photographic thumbnail with 8px radius, zero shadow, and a caption below or overlaid. Optional #1a1a1a surface with a #27272a hairline for text-only cards.
Micro 11px uppercase tag at weight 450 — the precision-craft detail. Hairline #27272a outline, no fill, cool-slate text.
Film-title typography — abcNormal weight 400 at line-height 1.0 with negative tracking (-1.2px to -0.9px). Variety comes from size, not weight or family.
Quiet inline link — cool-slate at rest, shifting to white on hover. No underline by default; the interface stays invisible.
Full-bleed cinematic hero — an image or video with a dark overlay, 48px abcNormal headline in white, and minimal Cool Slate supporting copy. The frame is film-grade.
Minimal horizontal nav, transparent over hero content. White wordmark, 16px abcNormal links that brighten on hover, and a single restrained CTA. Designed not to compete with the imagery.
Full-width Runway Black footer with a #27272a top hairline, Footer Gray (#999999) links, and a white wordmark — the dark bookend of a dark-dominant page.
Large abcNormal numeric figure at weight 400 with tight tracking, paired with an uppercase Cool Slate label. Divided only by a #27272a top hairline — no fills, no shadows.
Mission-statement pull-quote in 36px abcNormal, line-height 1.0, -0.9px tracking, white on Runway Black — the philosophical, emotional close.
Uppercase 11px weight-450 tag with a hairline #27272a outline and sharp 4px radius — used for media types and gallery filters.
Round avatar on Dark Surface with a #27272a hairline ring instead of a shadow — for creator bylines and collaborator rosters.
Underline tab list — no pills, no fills. The active tab is marked by a white bottom border and white text; inactive tabs sit in Cool Slate.
A cinematic reel brought to life as a website — dark, editorial, and film-production-grade, where full-bleed photography and video ARE the primary UI. This is a visual manifesto for AI-powered creativity: every section feels like a frame from a film, with dramatic lighting and high-quality imagery dominating the viewport. The interface itself retreats into near-invisibility — minimal borders, zero shadows, subtle cool-gray text on a near-black canvas — so the visual content speaks louder than any chrome. Sections alternate between true-black cinematic dark and cool-cloud light like scenes changing.
The interface is intentionally colorless — all richness comes from photography. Backgrounds anchor on Runway Black (#000000), Deep Black (#030303), and Dark Surface (#1a1a1a); text is Pure White (#ffffff) on dark and Charcoal (#404040) on light. The neutral spine is distinctly cool and blue-gray — Cool Slate (#767d88), Mid Slate (#7d848e), Muted Gray (#a7a7a7), Cool Silver (#c9ccd1) — never warm. A single dark-mode border, Border Dark (#27272a), provides barely-visible containment. There are no gradients and no decorative accent colors in the UI itself.
One typeface, complete expression: abcNormal (with abcNormal Fallback; Inter or DM Sans as external substitutes) handles everything from 48px display to 11px micro labels. Variety comes from size, weight, case, and tracking — never a family switch. Display headings run at weight 400, line-height 1.0, with negative letter-spacing (-1.2px to -0.9px) for film-title density. Even body text is compressed (1.30–1.50 leading, -0.16px tracking). Small uppercase labels use weight 450 — an uncommon intermediate — with positive 0.35px tracking as navigational signposts.
8px base spacing on a 4/6/8/12/16/20/24/28/32/48/64/78 scale, with generous 48–78px vertical section gaps for cinema-grade breathing. Containers reach up to 1600px (cinema-wide); heroes are full-bleed edge-to-edge; image grids are asymmetric and magazine-style. Border-radius stays subtle — 4px on buttons, 6px on links, 8px on image cards, 16px only for alert-style containers — the geometry is rounded, never pill-shaped. Depth is communicated entirely through dark/light section alternation, photographic depth-of-field, and overlay transparency: zero CSS box-shadow anywhere.
Buttons are extremely restrained — 14px weight-600 with hairline borders and sharp 4px radius, no heavy fills. Cards are primarily photographic: the image IS the card, at 8px radius with no shadow. Nav is minimal and transparent over hero content. Labels and tags are uppercase micro-type at weight 450–500 with 0.35px tracking. The mission-statement quote — white 36px abcNormal on true black — is the emotional close.
DESIGN.mdtext/markdownSKILL.mdtext/markdowntokens/colors.jsonapplication/jsontokens/typography.jsonapplication/jsontokens/components.jsonapplication/jsonadapters/tokens.csstext/cssadapters/html/index.htmltext/htmladapters/html/styles.csstext/css