@dante · Productivity & SaaS
Warm workflow-automation design system: cream canvas (#fffefb), deep coffee ink (#201515), a single saturated Zapier Orange CTA, Degular Display headlines paired with Inter, and a 12px middle radius.
A confidently-mature workflow-automation surface that reads warm rather than cool-tech. The whole experience sits on a warm-cream canvas (#fffefb) — cream, not pure white — the brand's defining temperature signal. Deep coffee ink (#201515) carries every heading and body line, and a single saturated Zapier Orange (#ff4f00) owns every primary CTA. Sections alternate between cream light and coffee-dark bands like a polarity flip. The mood is unflashy and modest: the brand keeps one loud accent and lets warm neutrals do the rest.
The palette is exclusively warm. Zapier Orange (#ff4f00) is the only chromatic moment, reserved for primary CTAs and conversion targets. The canvas stays warm-cream (#fffefb) with a soft cream inset (#f8f4f0); ink stays deep coffee (#201515), never pure black. The neutral ladder — ink-soft #2f2a26, ink-mid #36342e, body #605d52, body-mid #939084, mute #c5c0b1 — carries warmth at every step, none are cool grey. No second chromatic accent is introduced.
Two faces, two roles. The proprietary Degular Display (weight 500) carries hero and section displays from 56px down to 32px, plus the small uppercase eyebrow with a signature +1px tracking. Inter handles everything else — sub-displays, body, links, buttons — across weights 400/500/600/700. Headlines are always sentence-case, never uppercased. Body runs Inter 18px at 1.5 leading.
A 4px base spacing unit scales 2/4/8/12/16/24/32/48/64px. Bands pad 64px top/bottom; cards pad 24px. The marketing container is ~1280px, centred. Radius is the brand's middle signature: 12px for buttons and cards, 6px for inputs and inline pills, 9999px for status pills. Depth comes from surface contrast — a canvas-soft cream card against the cream page — and from a 1px ink hairline border, never heavy drop shadows.
Buttons come in four tiers (orange primary, coffee-ink secondary, ink-outline tertiary, text link), all at 12px radius. Cards flip polarity between cream and dark coffee. Hero and content bands alternate cream and coffee. The footer is dark coffee with cream text. Orange is reserved for the single highest-intent action per section.
패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).
#ff4f00#e64700#fffefb#fffefb#f8f4f0#201515#2f2a26#36342e#605d52#939084#c5c0b1#201515#f8f4f0"Degular Display", Inter, system-ui, -apple-system, sans-serif"Degular Display", Inter, system-ui, -apple-system, sans-serifInter, system-ui, -apple-system, sans-serifInter, system-ui, -apple-system, sans-serif"JetBrains Mono", ui-monospace, Menlo, monospace{
"displayXl": "56px/1.00",
"displayLg": "48px/1.00",
"displayMd": "32px/1.125",
"displaySubSm": "24px/1.25",
"bodyLg": "20px/1.50",
"bodyMd": "18px/1.50",
"bodySm": "16px/1.50",
"caption": "14px/1.50",
"eyebrow": "14px/1.00",
"buttonMd": "18px/1.50",
"buttonSm": "14.4px/1.00"
}Four CTA tiers on warm cream: saturated Zapier Orange (#ff4f00) primary, deep coffee-ink (#201515) secondary, 1px ink-outline tertiary, and a text-only link button. All share the brand's 12px middle radius — never pills.
Single-line field on warm cream. 1px coffee-ink border, 6px small radius, ink text, with the orange accent appearing only on the focus ring.
The default cream feature card — canvas-soft (#f8f4f0) fill against the warm-cream page, 12px radius, ink title in Inter semibold. A polarity-flipped dark coffee variant inverts to ink fill with warm-white text.
Inline pill for metadata and tags — canvas-soft cream fill, ink text, fully rounded pill radius. Quiet by default; an orange dot marks a live or new state.
Editorial hierarchy — Degular Display weight 500 for hero and section displays (56/48/32px), Inter semibold for card titles. Sentence-case always, never uppercase.
Quiet inline link in coffee ink; shifts to Zapier Orange on hover. On dark coffee surfaces it renders in warm cream and underlines.
The cream hero band — 56px Degular Display headline in coffee ink, Inter lead in body-warm, an orange primary CTA paired with an ink-outline secondary. 64px vertical padding.
Sticky top nav on warm cream — ink wordmark and links in Inter, a single orange CTA at the right. 12px/24px padding.
The dark coffee footer — ink (#201515) fill with canvas-soft cream text and warm-mute utility links. 48px/24px padding.
Large Degular Display numerals with an Inter label — benchmark figures set on cream with top-border-only dividers. The single most important figure renders in orange.
Pull-quote in 32px Degular Display coffee ink with an orange opening mark on cream — the editorial signature moment.
Rounded tag chip for app / category markers — cream pill on canvas-soft with an optional orange dot. Larger and quieter than a Badge.
Round avatar with a cream ring — used for testimonial bylines and team rosters. Initials on orange, ink, or cream fills.
Pill tab list inside a canvas-soft cream container with 12px radius — switch between Zaps, Tables, and Interfaces. The active pill uses a warm-white fill.
A confidently-mature workflow-automation surface that reads warm rather than cool-tech. The whole experience sits on a warm-cream canvas (#fffefb) — cream, not pure white — the brand's defining temperature signal. Deep coffee ink (#201515) carries every heading and body line, and a single saturated Zapier Orange (#ff4f00) owns every primary CTA. Sections alternate between cream light and coffee-dark bands like a polarity flip. The mood is unflashy and modest: the brand keeps one loud accent and lets warm neutrals do the rest.
The palette is exclusively warm. Zapier Orange (#ff4f00) is the only chromatic moment, reserved for primary CTAs and conversion targets. The canvas stays warm-cream (#fffefb) with a soft cream inset (#f8f4f0); ink stays deep coffee (#201515), never pure black. The neutral ladder — ink-soft #2f2a26, ink-mid #36342e, body #605d52, body-mid #939084, mute #c5c0b1 — carries warmth at every step, none are cool grey. No second chromatic accent is introduced.
Two faces, two roles. The proprietary Degular Display (weight 500) carries hero and section displays from 56px down to 32px, plus the small uppercase eyebrow with a signature +1px tracking. Inter handles everything else — sub-displays, body, links, buttons — across weights 400/500/600/700. Headlines are always sentence-case, never uppercased. Body runs Inter 18px at 1.5 leading.
A 4px base spacing unit scales 2/4/8/12/16/24/32/48/64px. Bands pad 64px top/bottom; cards pad 24px. The marketing container is ~1280px, centred. Radius is the brand's middle signature: 12px for buttons and cards, 6px for inputs and inline pills, 9999px for status pills. Depth comes from surface contrast — a canvas-soft cream card against the cream page — and from a 1px ink hairline border, never heavy drop shadows.
Buttons come in four tiers (orange primary, coffee-ink secondary, ink-outline tertiary, text link), all at 12px radius. Cards flip polarity between cream and dark coffee. Hero and content bands alternate cream and coffee. The footer is dark coffee with cream text. Orange is reserved for the single highest-intent action per section.
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