@dante · Backend & Data
Developer-tools brand on a deep purple-violet midnight canvas with electric lime keyword chips, chunky display sans, and a polarity-flipping single-primary CTA hierarchy.
Sentri's design language reads like a debugging console wearing a leather jacket. Marketing and product surfaces sit on a near-black violet midnight (#1f1633 / #150f23), strewn with starfield textures and floating sticker-style mascots — astronauts, monsters, traffic cones — that puncture the seriousness of an observability product. Headlines run in a chunky display sans where the most important keyword is wrapped in an electric-lime highlight chip (#c2ef4e), as if the copy has been marked up by a developer redlining their own console output. Transactional pages (pricing, contact) flip to a white canvas where scanning and comparing take priority.
The palette is deliberately narrow: deep midnight (#150f23) and ink violet (#1f1633) as dominant canvas and ink, electric lime (#c2ef4e) as the singular attention chip, hot pink (#fa7faa) as secondary sticker punctuation, and a violet family (#6a5fc1, #422082, #79628c) for links, tags, and hairlines. White does double duty — text on dark, and the canvas for dense reference pages. Lime is never a button background and never body text; it is a typographic device reserved for keyword chips and the footer squiggle. The only cool note is the blue focus ring (#9dc1f5).
Three families, cleanly split. A chunky, near-condensed display sans (fallbacks: Space Grotesk, Archivo, Hubot Sans) carries the 88px hero and 60px section openers. Rubik handles every UI role — body, caption, eyebrow, and button caps. Monaco renders code. Marketing body runs at an airy 2.0 line-height; functional UI copy tightens to 1.5, so the marketing reads like prose and the product reads like a log. Button labels and eyebrows are uppercase with a 0.2px tracking lift — the brand's console-prompt cadence.
An 8px base scale (2 · 4 · 8 · 12 · 16 · 24 · 32) opening to a 96px section rhythm, on a ~1152px centered container. Radii climb 4 → 6 → 8 → 10 → 12 → 18px, with 9999px for avatars. Depth does not come from drop shadows: it comes from the starfield hero texture, floating sticker mascots that overlap section boundaries, and the lime squiggle above the footer. Dark bands nest dark cards with hairline-violet borders; light bands nest white cards with cloud hairlines — the chrome stays constant, only the polarity flips.
Every page has one filled primary CTA that inverts by canvas — near-black violet on light, white on dark — always reading as the strongest affordance. Pricing tiers are white cards with one dark-inverted featured tier rather than an accent border. Inputs sit on white with cool hairlines and an inset focus shadow. Tags are mid-violet pills; badges are night-violet micro-caps. The lime keyword chip, sticker mascots, and squiggle divider are the signature moves — used scarcely, one lime element per viewport.
패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).
#150f23#1f1633#ffffff#c2ef4e#fa7faa#6a5fc1#422082#79628c#1f1633#ffffff#150f23#f0f0f0#efefef#362d59#cfcfdb#e5e7eb#1f1633#1a1a1a#bdb8c0#3f3849#9dc1f5Sentri Display, Space Grotesk, Rubik, system-ui, sans-serifRubik, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serifRubik, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serifRubik, -apple-system, system-ui, sans-serifMonaco, Menlo, Ubuntu Mono, monospace{
"displayHero": "88px/1.20",
"displayLarge": "60px/1.10",
"headingXl": "30px/1.20",
"headingLg": "27px/1.25",
"headingMd": "24px/1.25",
"headingSm": "20px/1.25",
"bodyLg": "16px/2.00",
"bodyStrong": "16px/1.50",
"bodyMd": "16px/1.50",
"eyebrow": "15px/1.40",
"buttonCap": "14px/1.14",
"caption": "14px/1.43",
"microCap": "10px/1.80",
"code": "16px/1.50"
}Single-primary CTA that flips polarity by canvas — near-black violet fill with white caps on light, white fill with dark caps on dark. Uppercase button-cap type with 0.2px tracking; ghost and violet-token variants are downgraded.
Contact-form field on white canvas — 6px radius, cool hairline border, dark-violet ink. Focus adds an inset shadow suggesting depth pressed inward, plus the system's only blue focus ring.
Pricing tier card on white canvas — 12px radius, cloud hairline border, dark-violet ink. The featured tier flips to a night-violet inversion rather than an accent border.
Small status pill on dark surfaces — night-violet fill, white micro-cap type, 4px radius. Quiet category marker, never a CTA.
Chunky display-sans hierarchy — 88px hero reserved for marketing only, 60px section openers, then Rubik headings. A single keyword can be wrapped in a lime chip inside the hero.
Inline link with a persistent underline as its whole affordance — white on dark surfaces, ink-violet on light. Violet accent only when emphasis is needed beyond underline.
Dark midnight-violet hero with starfield atmosphere, 88px chunky display headline carrying one lime keyword chip, airy 2.0-leading subtext, and an inverted white primary beside a ghost secondary.
Top nav that inherits canvas polarity — light variant on white with ink-violet links and a filled near-black primary; dark variant flips to an inverted white CTA.
Light-canvas footer topped by the signature lime squiggle divider — ink-violet caption text, multi-column link groups, and a legal row at the base.
Large display-sans figure with a Rubik caption label — the numeric equivalent of a console readout, sitting quietly on dark canvas.
Developer testimonial in 30px Rubik with a lime opening mark — the console-flavored pull-quote, dense at 1.5 leading rather than airy.
Pill-shaped category tag used inline in product navs — mid-violet fill, white button-cap-light type, 12px radius with a deeper violet hairline.
Round avatar with a hairline-violet ring — used for author bylines and reviewer stacks on dark customer surfaces.
Pill-style tab list inside a night-violet container — used to switch between product views. The active pill lifts to a lighter violet with white caps.
Sentri's design language reads like a debugging console wearing a leather jacket. Marketing and product surfaces sit on a near-black violet midnight (#1f1633 / #150f23), strewn with starfield textures and floating sticker-style mascots — astronauts, monsters, traffic cones — that puncture the seriousness of an observability product. Headlines run in a chunky display sans where the most important keyword is wrapped in an electric-lime highlight chip (#c2ef4e), as if the copy has been marked up by a developer redlining their own console output. Transactional pages (pricing, contact) flip to a white canvas where scanning and comparing take priority.
The palette is deliberately narrow: deep midnight (#150f23) and ink violet (#1f1633) as dominant canvas and ink, electric lime (#c2ef4e) as the singular attention chip, hot pink (#fa7faa) as secondary sticker punctuation, and a violet family (#6a5fc1, #422082, #79628c) for links, tags, and hairlines. White does double duty — text on dark, and the canvas for dense reference pages. Lime is never a button background and never body text; it is a typographic device reserved for keyword chips and the footer squiggle. The only cool note is the blue focus ring (#9dc1f5).
Three families, cleanly split. A chunky, near-condensed display sans (fallbacks: Space Grotesk, Archivo, Hubot Sans) carries the 88px hero and 60px section openers. Rubik handles every UI role — body, caption, eyebrow, and button caps. Monaco renders code. Marketing body runs at an airy 2.0 line-height; functional UI copy tightens to 1.5, so the marketing reads like prose and the product reads like a log. Button labels and eyebrows are uppercase with a 0.2px tracking lift — the brand's console-prompt cadence.
An 8px base scale (2 · 4 · 8 · 12 · 16 · 24 · 32) opening to a 96px section rhythm, on a ~1152px centered container. Radii climb 4 → 6 → 8 → 10 → 12 → 18px, with 9999px for avatars. Depth does not come from drop shadows: it comes from the starfield hero texture, floating sticker mascots that overlap section boundaries, and the lime squiggle above the footer. Dark bands nest dark cards with hairline-violet borders; light bands nest white cards with cloud hairlines — the chrome stays constant, only the polarity flips.
Every page has one filled primary CTA that inverts by canvas — near-black violet on light, white on dark — always reading as the strongest affordance. Pricing tiers are white cards with one dark-inverted featured tier rather than an accent border. Inputs sit on white with cool hairlines and an inset focus shadow. Tags are mid-violet pills; badges are night-violet micro-caps. The lime keyword chip, sticker mascots, and squiggle divider are the signature moves — used scarcely, one lime element per viewport.
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