@dante · Developer Tools
Agentic-terminal design system: a single warm near-charcoal canvas, off-white Inter type as the only primary, DM Mono terminal mockups, tight 3-4px radii, and no chromatic accent.
A developer's reading-mode editor reimagined as a marketing site. The entire page is a single warm near-charcoal band — #2b2622, a tint noticeably browner than pure black — with copy set almost entirely in Inter. There is no gradient, no atmospheric backdrop, and no illustration system; the only recurring decoration is dense terminal-mockup imagery rendered as real UI. The posture is quiet and confident: the hero headline sits at just weight 400, CTAs are unusually understated, and the warmth of the canvas — not any accent color — carries the brand's identity.
The system is monochromatic and warm. A single "primary" — warm off-white #f7f5f0 — doubles as default text on canvas, as the wordmark, and as the only button fill; there is no chromatic brand accent. The page surface is Canvas #2b2622 with a lighter Canvas Soft #383330 for cards and mockups, divided by a 1px Hairline #3f3a36. Text steps down through Body Strong #dad2c1, Body #c9c0ad, and Mute #aea69c, every neutral carrying a hint of brown-warmth rather than neutral gray. Semantic error/success colors live inside the terminal app, not on the marketing surface.
Three faces ladder the system. Inter handles every display, body, button, and label role at weights 400/500 — hero display runs 64px/400 with an aggressive -1.6px tracking, and negative tracking scales down through each display level as part of the voice. DM Mono sets all terminal mockups, command snippets, and mono eyebrows/labels. Instrument Serif appears rarely, as an italic editorial moment. Body copy is 16px Inter at a readable 1.5 line-height.
A 4px base spacing scale (with 6/10px button steps) climbs to 96px section padding; content centers around 1200px. Elevation is built from surface contrast and 1px hairline borders only — no drop shadows appear on the marketing surface. Border radii are deliberately tight: 3px on buttons and inputs, 4px on cards, 6px on larger cards, and 9999px reserved strictly for circular icon containers and status pills. The result reads like a focused terminal that happens to ship as a web page.
Buttons come in three forms — an off-white primary, a borderless ghost, and a circular icon container — all at 3px radius. Cards, download tiles, and testimonial cards share the canvas-soft-plus-hairline chrome; terminal mockups reuse that chrome with DM Mono bodies. Press and job rows are frameless list items divided only by a bottom hairline. The hero pairs a 64px/400 headline and one off-white CTA with a two-up terminal-mockup split.
패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).
#f7f5f0#f7f5f0#2b2622#2b2622#383330#3f3a36#dad2c1#c9c0ad#aea69c#f7f5f0#2b2622#383330#3f3a36#f7f5f0Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serifInter, system-ui, -apple-system, sans-serifInter, system-ui, -apple-system, sans-serifInter, system-ui, -apple-system, sans-serif'Instrument Serif', Georgia, 'Times New Roman', serif'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace{
"displayXl": "64px/70.4px -1.6px 400",
"displayLg": "48px/52.8px -1.2px 400",
"displayMd": "32px/40px -0.8px 500",
"displaySm": "24px/32px -0.4px 500",
"displaySerif": "48px/52px -0.5px 400",
"bodyLg": "18px/28px",
"bodyMd": "16px/24px",
"bodySm": "14px/20px",
"caption": "12px/16px",
"code": "13px/18px",
"button": "14px/20px 500"
}Off-white CTA on warm-dark canvas. Primary is the only fill and it is off-white, not a chromatic accent; secondary is a borderless ghost. Radii stay tight at 3-4px — never a pill.
Dark text field on a canvas-soft fill with a 1px hairline border and tight 3px radius. No chromatic focus accent — the ring is a brighter hairline, keeping the warm-neutral spine intact.
Canvas-soft content card with a 1px hairline border and 4px radius — the workhorse container. Elevation comes from surface contrast, never a drop shadow.
Small status marker. Neutral is a canvas-soft chip with hairline; solid inverts to the off-white fill. Very tight radius, no chromatic color.
Inter display hierarchy with negative tracking. Hero and section headlines sit at weight 400 — quietly confident, never a billboard — with an occasional Instrument Serif italic moment.
Quiet inline links in ink off-white with an underline-on-hover. No chromatic link color — emphasis comes from the underline, not hue.
Full-bleed warm-dark hero band with a 64px Inter/400 headline, muted body copy, an off-white CTA, and a two-up terminal-mockup split below.
Sticky top navigation on the canvas band with an Inter wordmark, body-sm-strong links, and a right cluster of ghost + off-white CTA.
Quiet footer on the same canvas band with body-toned utility links and a hairline top divider — no polarity flip, keeping the single-band page rhythm.
Large Inter numeric figure with a muted mono label, divided by a top hairline — a restrained metrics row with no chromatic highlight.
Single testimonial card with a 1:1 portrait, body-md quote, and mono attribution on canvas-soft chrome — the page's one human moment.
Mono command-style chip for platform and filter markers, echoing the terminal mockups. Canvas-soft fill, hairline, tight 3px radius.
Squared 4px-radius avatar with a hairline border — used for testimonial portraits and team rosters, matching the brand's tight geometry.
Segmented tab row inside a canvas-soft container — used to switch product modes (Terminal / Agent / Editor). Active pill is an off-white-tinted fill, everything at 3px radius.
A developer's reading-mode editor reimagined as a marketing site. The entire page is a single warm near-charcoal band — #2b2622, a tint noticeably browner than pure black — with copy set almost entirely in Inter. There is no gradient, no atmospheric backdrop, and no illustration system; the only recurring decoration is dense terminal-mockup imagery rendered as real UI. The posture is quiet and confident: the hero headline sits at just weight 400, CTAs are unusually understated, and the warmth of the canvas — not any accent color — carries the brand's identity.
The system is monochromatic and warm. A single "primary" — warm off-white #f7f5f0 — doubles as default text on canvas, as the wordmark, and as the only button fill; there is no chromatic brand accent. The page surface is Canvas #2b2622 with a lighter Canvas Soft #383330 for cards and mockups, divided by a 1px Hairline #3f3a36. Text steps down through Body Strong #dad2c1, Body #c9c0ad, and Mute #aea69c, every neutral carrying a hint of brown-warmth rather than neutral gray. Semantic error/success colors live inside the terminal app, not on the marketing surface.
Three faces ladder the system. Inter handles every display, body, button, and label role at weights 400/500 — hero display runs 64px/400 with an aggressive -1.6px tracking, and negative tracking scales down through each display level as part of the voice. DM Mono sets all terminal mockups, command snippets, and mono eyebrows/labels. Instrument Serif appears rarely, as an italic editorial moment. Body copy is 16px Inter at a readable 1.5 line-height.
A 4px base spacing scale (with 6/10px button steps) climbs to 96px section padding; content centers around 1200px. Elevation is built from surface contrast and 1px hairline borders only — no drop shadows appear on the marketing surface. Border radii are deliberately tight: 3px on buttons and inputs, 4px on cards, 6px on larger cards, and 9999px reserved strictly for circular icon containers and status pills. The result reads like a focused terminal that happens to ship as a web page.
Buttons come in three forms — an off-white primary, a borderless ghost, and a circular icon container — all at 3px radius. Cards, download tiles, and testimonial cards share the canvas-soft-plus-hairline chrome; terminal mockups reuse that chrome with DM Mono bodies. Press and job rows are frameless list items divided only by a bottom hairline. The hero pairs a 64px/400 headline and one off-white CTA with a two-up terminal-mockup split.
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