Component Isolation
Same Component.
Different DNA.
We asked an AI to build a hero section for the same product twice. Once with default instincts — once with Alcheon's design tokens. No edits, no cherry-picking. First draft vs first draft.
The Brief
Vex
A real-time collaborative whiteboard for distributed engineering teams. Dark-themed, technical but approachable — Miro meets Excalidraw.
Design DNA from resend_com trigger_dev saaspo_com
01
Hero Section
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Font: Inter everywhere — headings, body, announcement badge all share the same register; no Space Grotesk for display weight, no JetBrains Mono for status chips
- Palette: #6366f1 — Tailwind/shadcn's default indigo, not #22FF99 neon green synthesised from resend_com × trigger_dev
- Buttons: Pill radius (9999px) — Bootstrap/Tailwind instinct, not --btn-radius: 8px; also white text on button instead of the brief's black-on-green treatment
- Badge: Announcement chip in Inter pill — loses the precision-register signal that JetBrains Mono 9px uppercase and 4px square radius lock in
- Gradient: #6366f1→#a5b4fc on background — cool indigo, not the brief's radial rgba(34,255,153,0.12) depth glow from resend_com influence
vs
Alcheon input6 tokens · 6 sections
--color-primary#22FF99
--color-bg#0D1117
--font-headingSpace Grotesk
--font-monoJetBrains Mono
--btn-radius6px
--badge-radius4px
DNA: resend_com × trigger_dev × saaspo_com
What Alcheon's tokens produced
- Fonts: Space Grotesk headings + Inter body + JetBrains Mono — three-register type system from resend_com × trigger_dev DNA; Space Grotesk's condensed geometry signals developer tooling
- Palette: #22FF99 primary synthesised from resend_com × trigger_dev × saaspo_com — neon green electric accent on pure black, zero risk of collision with Ledger or Chronicle
- Buttons: Black text (#000000) on green — deliberately inverted from every other brand on this page; --btn-radius: 8px, 13px × 28px padding from the component spec
- Badge: Announcement chip at 4px radius in JetBrains Mono uppercase — square badge reads as a system status label, not a UI pill; pulsing green dot from the spec
- Background: radial-gradient rgba(34,255,153,0.12) glow at top, linear-gradient to transparent at bottom — depth from resend_com hero blueprint, never flat black
02
Feature/Capabilities Grid
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Font: Inter for section heading, card titles, and category labels — no register distinction; Space Grotesk would separate heading register from body register by shape, not just size
- Category chips: Pill-radius (9999px) in Inter instead of JetBrains Mono at 4px badge-radius — chips read as soft tags, not precision-register labels from the spec
- Palette: #6366f1 on icon backgrounds — indigo everywhere vs the brief's #22FF99 used selectively on icon wells only; green-on-dark has a different signal weight than indigo-on-dark
- Card radius: 16px instead of --card-radius-features: 8px — spec asks for tighter radius on feature cards; 16px over-rounds to a consumer app aesthetic
- Hover: translateY(-4px) on all cards — generic float; the brief explicitly omits translate on feature cards, shadow-deepening only (0 8px 12px rgba(0,0,0,0.2))
vs
Alcheon input6 tokens · 6 sections
--color-primary#22FF99
--color-bg#0D1117
--font-headingSpace Grotesk
--font-monoJetBrains Mono
--btn-radius6px
--badge-radius4px
DNA: resend_com × trigger_dev × saaspo_com
What Alcheon's tokens produced
- Layout: auto-fit grid, minmax(300px, 1fr) — six equal-weight feature cards, left-aligned content per the features blueprint from resend_com × trigger_dev
- Cards: #141517 background, 8px radius, 32px padding, no border — tighter and darker than general card spec (#111111 / 12px) because feature cards sit on a black section background
- Hover: Shadow deepens to 0 8px 12px rgba(0,0,0,0.2) only — NO translateY; the blueprint explicitly omits translate on feature cards; movement would fight the grid rhythm
- Icon wells: rgba(34,255,153,0.08) tinted background + #22FF99 stroke — accent used exactly once per card, on the icon only; all other text stays neutral
- Category labels: JetBrains Mono 9px uppercase in rgba(34,255,153,0.6) — mono type register applied to the precision label, not Inter; creates the same chip-like signal as the badge spec
03
Pricing Section
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Price font: Inter 700 for the price number — no distinction between a $19 data point and body text; Space Grotesk heading register makes the number read as a designed value, not prose
- Unit label: "/seat/month" in Inter — the precision measure loses its mono register; JetBrains Mono makes it read as a technical spec, Inter reads as label copy
- Badge: "MOST POPULAR" pill (9999px) in Inter — wrong radius (spec: --badge-radius: 4px square) and wrong font (spec: JetBrains Mono uppercase + #000 text on green bg)
- Buttons: Pill CTAs (9999px), white text on indigo — both shape and colour off spec; featured plan CTA should be green bg with black text, 8px radius
- Palette: #6366f1 on featured card bar, checkmarks, toggle — indigo saturates pricing; brief uses #22FF99 selectively and inverts button text to black for maximum signal
vs
Alcheon input6 tokens · 6 sections
--color-primary#22FF99
--color-bg#0D1117
--font-headingSpace Grotesk
--font-monoJetBrains Mono
--btn-radius6px
--badge-radius4px
DNA: resend_com × trigger_dev × saaspo_com
What Alcheon's tokens produced
- Typography: Space Grotesk 700 for price number, JetBrains Mono for "/seat / mo" — heading register signals value, mono register signals a precisely-specified unit measure
- Badge: "MOST POPULAR" in JetBrains Mono 9px uppercase, 4px radius, #22FF99 bg with #000 text — exact badge spec (--badge-font-size, --badge-radius, --font-mono), black-on-green is legible and unmistakable
- Featured card: 2px solid #22FF99 top bar + rgba(34,255,153,0.06) ambient surface tint — precision colour cue at top, echo on surface; not uniform border all around
- Features: Grouped under JetBrains Mono category labels (CANVAS, COLLABORATION, API) — information architecture that lets buyers skim at-a-glance by category
- Toggle: Annual/monthly switch with --duration-standard 250ms transition — motion from the spec; "Save 20%" shown as a separate mono chip in the billing toggle row
04
Social Proof / Testimonials
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Quote font: Inter 400 — the pull-quote reads as body text; the "with" version uses Inter italic too, but Space Grotesk headings frame it with more authority than an all-Inter page
- Role chip: Inter pill (9999px) — JetBrains Mono uppercase at 9px and 4px square radius gives the chip a system-output quality; Inter pill reads as a soft UI label
- Company name: Inter uppercase at low opacity — Space Grotesk 700 uppercase at 0.2 opacity has an editorial-logo weight; Inter at the same opacity reads as a grey label
- Quote accent: #6366f1 on the decorative quote mark — indigo where the brief places #22FF99 neon green; same usage, entirely different temperature and contrast weight
- Live stat: Absent — the "with" version adds a pulsing green dot + "47 teams diagramming now" chip, product usage as social proof, from the brief's stat pattern
vs
Alcheon input6 tokens · 6 sections
--color-primary#22FF99
--color-bg#0D1117
--font-headingSpace Grotesk
--font-monoJetBrains Mono
--btn-radius6px
--badge-radius4px
DNA: resend_com × trigger_dev × saaspo_com
What Alcheon's tokens produced
- Layout: Spotlight (spans 2 rows) + 2 stacked supporting cards on a #111111 section background — editorial asymmetry that signals which quote to read first without any colour noise
- Quote accent: #22FF99 on the oversized decorative quote mark only — primary used exactly once per card, retaining maximum signal value; neon green on near-black has far higher contrast than the old indigo
- Role chip: JetBrains Mono 9px uppercase, 4px radius — identical badge anatomy used across all other Vex components (status chip, pricing badge, CTA fine print)
- Company name: Space Grotesk 700 uppercase at 0.2 opacity — logo-mark treatment giving brand context without real assets; geometric uppercase in Space Grotesk reads as a logotype, Inter does not
- Live stat: "47 teams diagramming now" with pulsing #22FF99 dot chip at top — product usage as social proof, same badge anatomy and pulse keyframe as the hero announcement chip
05
Call-to-Action Banner
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Heading font: Inter 800 with gradient text — gradient is #6366f1→#8b5cf6 Tailwind pair; Space Grotesk 700 carries more display authority and the brief's <em> treatment scopes the green accent to a single phrase, not the whole heading
- Form: Absent — the "with" version centres an email input + CTA form as primary conversion surface; the "without" version uses buttons only, missing the email-capture pattern from resend_com
- Buttons: Pill CTAs (9999px), white text on #6366f1 — both radius and text colour off spec; brief calls for 8px rectangular with black text (#000000) on green
- Fine print: Inter for "14-DAY FREE TRIAL · NO CREDIT CARD" — precision facts in prose font read as standard copy; JetBrains Mono uppercase makes the same facts read as a technical guarantee
- Radial glow: Absent — the "with" version adds a radial-gradient rgba(34,255,153,0.07) centred glow; the depth signal comes from the token set, not from an image or illustration
vs
Alcheon input6 tokens · 6 sections
--color-primary#22FF99
--color-bg#0D1117
--font-headingSpace Grotesk
--font-monoJetBrains Mono
--btn-radius6px
--badge-radius4px
DNA: resend_com × trigger_dev × saaspo_com
What Alcheon's tokens produced
- Heading: Space Grotesk 700, "faster canvas" in #22FF99 — heading font register applied correctly; accent scoped to two words only, maximum signal value from a single colour hit
- Email form: Input + CTA button as the primary conversion surface — email-capture pattern from resend_com DNA; "Start free →" with arrow inherits product-specific copy from the content scaffold
- Buttons: --btn-radius: 8px, primary: #22FF99 bg with #000 text — rectangular not pill, black-on-green is the single most distinctive button treatment across all four brands on this page
- Fine print: JetBrains Mono uppercase "14-DAY FREE TRIAL · NO CREDIT CARD · CANCEL ANYTIME" — precision facts in precision font; same register as the badge spec, not body copy
- Background glow: Centred radial-gradient rgba(34,255,153,0.07) + 1px horizontal green rule at bottom — two-layer depth system from the token set, CTA section feels lit from within
06
Empty State
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Status chip: "CANVAS · EMPTY" in Inter pill (9999px) — same content, wrong type register and wrong radius; JetBrains Mono at 4px square radius makes it read as a system-status output, not a UI tag
- Heading: Inter 700 "Your canvas is waiting" — same invitation copy but Space Grotesk at the same weight carries more display authority through letterform geometry
- Buttons: Pill (9999px) primary in #6366f1 — both radius and colour off spec; primary should be #22FF99 bg with #000 text, 8px radius; the pill shape loses architectural grounding
- Palette: #6366f1 on primary button and icon nodes — default indigo vs #22FF99; the ghost node diagram inside the canvas area should use the primary as its stroke/fill, not a library default
- Keyboard hints: ⌘N / ⌘T / ⌘K in Inter — JetBrains Mono shortcut chips in monospace with a border read as real keyboard affordances; Inter chips read as text labels in disguise
vs
Alcheon input6 tokens · 6 sections
--color-primary#22FF99
--color-bg#0D1117
--font-headingSpace Grotesk
--font-monoJetBrains Mono
--btn-radius6px
--badge-radius4px
DNA: resend_com × trigger_dev × saaspo_com
What Alcheon's tokens produced
- Canvas surface: Dot-grid background (radial-gradient 24px × 24px) + SVG ghost node graph in rgba(34,255,153,0.08-0.25) — the empty state lives in the product space; the canvas aesthetic is present before the first diagram is created
- Status chip: JetBrains Mono "CANVAS · EMPTY", 4px radius, rgba(34,255,153,0.08) bg — exact badge anatomy with product vocabulary; the accent colour appears here before the CTA, priming the green signal
- Heading: Space Grotesk 700 "Your canvas is waiting" — heading font applied correctly; invitation framing is consistent with hero and CTA copy voice across the product
- Action buttons: --btn-radius: 8px; primary: #22FF99 bg + #000 text; ghost: transparent + 1px border — exact button anatomy, two-action hierarchy mirrors every other Vex CTA pair
- Keyboard hints: ⌘N / ⌘T / ⌘K chips in JetBrains Mono with 3px border radius — the product surfaces its affordances in the vacuum; monospace + border makes them read as real keyboard elements
The Brief
Chronicle
A premium editorial newsletter and publishing platform for independent writers. Light-themed, book-warm — Ghost meets Substack meets independent print.
Design DNA from ugmonk_com ghost_org heydesigner_com craft_do
01
Hero Section
chronicle-generic.app Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Font: Inter everywhere — heading, body, wordmark, and h1 all share the same register; no Libre Baskerville serif to signal publication identity, no JetBrains Mono for precision labels
- Background: #ffffff white — the brief's --color-background: #fdf9f4 warm off-white is absent; white is neutral, #fdf9f4 is editorial warmth
- Palette: #6366f1 on CTAs and badge — default indigo vs #EA580C terracotta synthesized from the brief's print/ink reference; different emotional register entirely
- Badge: Pill (9999px) in Inter — wrong radius (spec: --badge-radius: 4px) and wrong font (spec: JetBrains Mono uppercase); editorial precision becomes a generic pill chip
- Buttons: Pill-radius CTAs (9999px) — --btn-radius: 8px gives Chronicle buttons a rectangular editorial feel; pill shape is incongruent with the publication aesthetic
vs
chronicle-alcheon.app With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#EA580C
--color-bg#fdf9f4
--font-headingLibre Baskerville
--font-monoJetBrains Mono
--btn-radius6px
--image-radius0px
DNA: ugmonk_com × ghost_org × craft_do
What Alcheon's tokens produced
- Fonts: Libre Baskerville serif for wordmark + h1, Inter body, JetBrains Mono for status chips — three-register type system from ugmonk_com × ghost_org DNA
- Heading: Serif h1 with italic
<em>emphasis in terracotta — a typographic move that reads as editorial confidence, not SaaS aggression - Background: Warm off-white #fdf9f4 — synthesized from the brief's --color-background, not white, not gray
- Buttons: --btn-radius: 8px (#EA580C primary, #2a2a2a ghost) — rectangular, not pill; editorial not startup
- Trust strip: Italic serif publication names at 22% opacity — credibility signal from the newspaper-masthead pattern, not a logo row
02
Feature / Capabilities
chronicle-generic.app/features Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Font: Inter for section heading and feature headings — no serif register; Libre Baskerville in the brief creates an editorial reading frame that Inter removes entirely
- Category chips: Pill (9999px) in Inter — spec calls for --badge-radius: 4px and JetBrains Mono; precision editorial labels become generic soft tags
- Icon tiles: #6366f1→#8b5cf6 gradient on every card — wrong primary color, and indigo gradient tiles apply generic SaaS character instead of terracotta warmth
- Card radius: 16px instead of --card-radius: 12px — 4px over spec, no source in the Chronicle token set
- Hover: translateY(-3px) on all feature cards — the brief specifies --card-hover-translate: none; Chronicle's cards should deepen shadow only, not float
vs
chronicle-alcheon.app/features With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#EA580C
--color-bg#fdf9f4
--font-headingLibre Baskerville
--font-monoJetBrains Mono
--btn-radius6px
--image-radius0px
DNA: ugmonk_com × ghost_org × craft_do
What Alcheon's tokens produced
- Layout: Editorial alternating 2-col rows (text + visual panel) — not a 3-col grid; matches the brief's editorial reading direction
- Heading: Libre Baskerville serif section and feature headings — the product's typographic DNA carries through every feature
- Chips: JetBrains Mono uppercase, badge-radius 4px, terracotta — category labels from the badge anatomy spec, not pill badges
- Hover: Shadow deepens only — --card-hover-translate: none from the spec, no translateY lift anywhere
- Visual panels: Warm #ffffff cards with editorial type specimens inside — product context shown, not placeholder art
03
Pricing Section
chronicle-generic.app/pricing Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Price font: Inter 700 on the price number — no distinction between a $12 data point and surrounding body copy; the brief assigns Libre Baskerville 700 heading register to prices to signal weight/value
- Unit label: "/month" in Inter — JetBrains Mono gives the unit label a precision-register quality; Inter at the same size reads as prose
- Badge: "CREATOR" pill (9999px) in #6366f1 — wrong radius (spec: --badge-radius: 4px), wrong font (spec: JetBrains Mono), wrong color (#EA580C from the brief)
- Featured card surface: #6366f1 border + light purple bg — generic SaaS highlight; the brief uses warm amber #FFFBEB as the featured surface, editorially warm not SaaS-indigo
- Buttons: Pill-radius CTAs (9999px) — all plan buttons off --btn-radius: 8px; also primary color is #6366f1 not #EA580C
vs
chronicle-alcheon.app/pricing With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#EA580C
--color-bg#fdf9f4
--font-headingLibre Baskerville
--font-monoJetBrains Mono
--btn-radius6px
--image-radius0px
DNA: ugmonk_com × ghost_org × craft_do
What Alcheon's tokens produced
- Price font: Libre Baskerville 700 for the number, JetBrains Mono for "/month" — serif signals value, mono signals a precise unit, from the brief's type scale
- Badge: "CREATOR" in JetBrains Mono 12px weight 600, radius 4px — exact badge anatomy from the spec, not a pill
- Featured card: Warm amber #FFFBEB surface + terracotta left border — --section-accent-bg from the token set, editorially warm not generic blue
- Buttons: --btn-radius: 8px, #EA580C primary / #2a2a2a ghost — rectangular CTAs consistent with every other component
- Heading: Libre Baskerville serif section heading — pricing section maintains the publication's typographic voice
04
Social Proof / Testimonials
chronicle-generic.app/social-proof Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Quote font: Inter body — the quote voice is indistinguishable from a product description; Libre Baskerville italic in the brief gives the pull-quote genuine literary authority
- Author role chip: Inter pill (9999px) — wrong radius (--badge-radius: 4px), wrong font (JetBrains Mono); precision-register label becomes a generic chip
- Quote mark: #6366f1 decorative " — same placement as the "with" version, wrong color; brief uses #EA580C terracotta at low opacity for the serif decorative element
- Palette: #6366f1 on quote accent and chip — indigo has no relationship to Chronicle's terracotta/amber warmth; the social proof section loses its editorial temperature
- Hover: translateY(-3px) on all three cards — --card-hover-translate: none in the spec; Chronicle cards should stay still, shadow deepens only
vs
chronicle-alcheon.app/social-proof With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#EA580C
--color-bg#fdf9f4
--font-headingLibre Baskerville
--font-monoJetBrains Mono
--btn-radius6px
--image-radius0px
DNA: ugmonk_com × ghost_org × craft_do
What Alcheon's tokens produced
- Layout: Large spotlight card (60%) + 2 stacked supporting cards — editorial asymmetry signals which quote earns the reader's first attention
- Quote font: Libre Baskerville italic — the quote sounds like a pull-quote from a literary magazine, not a product review
- Quote mark: Libre Baskerville decorative ", terracotta at 12% opacity — decorative type element sourced from the serif font, not clip-art
- Author role: JetBrains Mono uppercase with publication name and subscriber count — credibility through editorial context, no star icons needed
- Hover: Shadow deepens only — --card-hover-translate: none respected across all three testimonial cards
05
Call-to-Action Banner
chronicle-generic.app/get-started Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Section background: #ede9fe light indigo — the brief's --section-accent-bg is #FFFBEB warm amber; light indigo reads as generic SaaS, warm amber reads as editorial warmth
- Heading font: Inter serif-var — no Libre Baskerville; the heading loses the editorial confidence of the serif even though the rest of the layout is identical
- Input radius: --input-radius: 9999px — pill email field off-spec from --input-radius: 8px; the brief's rectangular input is more editorial, less startup
- Button radius: --btn-radius: 9999px — pill submit button off-spec from --btn-radius: 8px; also --btn-primary-bg is #6366f1 not #EA580C
- Focus ring: #6366f1 indigo — brief specifies #FDBA74 amber focus ring; amber ring is warm and on-brand, indigo ring is generic and breaks the color system
vs
chronicle-alcheon.app/get-started With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#EA580C
--color-bg#fdf9f4
--font-headingLibre Baskerville
--font-monoJetBrains Mono
--btn-radius6px
--image-radius0px
DNA: ugmonk_com × ghost_org × craft_do
What Alcheon's tokens produced
- Background: --section-accent-bg: #FFFBEB warm amber — from the token set, light and editorial rather than dark gradient
- Heading: Libre Baskerville serif with italic
<em>emphasis in terracotta — maintains the font register of every Chronicle component - Layout: 2-col asymmetric (text left, form right) with terracotta divider — the separation gives the email form its own spatial priority
- Input + button: --input-radius: 8px with amber focus ring (#FDBA74), --btn-radius: 8px #EA580C — exact anatomy from the spec side by side
- Fine print: JetBrains Mono uppercase muted — precision type register applied to precision information
06
Empty State
chronicle-generic.app/dashboard Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Background: #ffffff white — the brief's --color-background: #fdf9f4 is gone; the same feather-quill SVG and empty-state layout sits on pure white rather than the warm off-white that ties it to the publication brand
- Status chip: "PUBLICATION · EMPTY" in Inter pill (9999px) — same product vocabulary, wrong font (spec: JetBrains Mono) and wrong radius (spec: --badge-radius: 4px)
- Heading: Inter 700 "Begin your story" — same invitation copy but Inter lacks the editorial authority of Libre Baskerville; heading register is erased by the wrong font
- Buttons: Pill (9999px) primary and rectangular ghost — primary off --btn-radius: 8px; also primary bg is #6366f1 not #EA580C
- Palette: #6366f1 on primary button and quill icon — indigo on a white background carries no warmth; #EA580C terracotta on #fdf9f4 is the brief's warmth-and-ink combination
vs
chronicle-alcheon.app/dashboard With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#EA580C
--color-bg#fdf9f4
--font-headingLibre Baskerville
--font-monoJetBrains Mono
--btn-radius6px
--image-radius0px
DNA: ugmonk_com × ghost_org × craft_do
What Alcheon's tokens produced
- Background: Warm off-white #fdf9f4 — matches every other Chronicle component; empty state feels like the same product, not a blank error screen
- Illustration: Feather-quill editorial SVG at 18% opacity — the empty state speaks the product's visual language (writing tools), not generic folder icons
- Status chip: JetBrains Mono "PUBLICATION · EMPTY", radius 4px — badge anatomy from the spec; product vocabulary, not a tooltip sentence
- Heading: Libre Baskerville "Begin your story" — invitation framing in the product's heading font; consistent editorial voice
- Buttons: --btn-radius: 8px, #EA580C primary + #2a2a2a rectangular ghost — proper button hierarchy from the spec, both actions get real button anatomy
The Brief
Canopy
An enterprise climate intelligence and carbon accounting SaaS for sustainability directors and CFOs. Data-credible, light-themed — amplitude_com × wise_com × resolver_com.
Design DNA from amplitude_com wise_com resolver_com
01
Hero Section
canopy-generic.app Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Primary color: #6366f1 indigo — the brief synthesized #16A34A green-600 from amplitude_com × resolver_com; indigo is generic SaaS, green signals sustainability domain authority
- Hero background: Flat white — the brief specifies a subtle linear-gradient(to bottom, #F0FDF4, #ECFDF5) tint; green-feathered backgrounds establish climate brand DNA before any text is read
- Data font: Inter for all numeric labels — the brief assigns JetBrains Mono to metric values, scope labels, and chart axes; Inter makes data registers indistinguishable from body copy
- Buttons: Pill-radius (9999px) — --btn-radius: 8px from the brief; rectangular buttons communicate enterprise precision, pills communicate consumer apps
- Badge: Pill in Inter — spec uses JetBrains Mono uppercase at badge-radius 9999px but the status chip spec uses 4px radius; the distinction collapses without Alcheon's component anatomy
vs
canopy-alcheon.app With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#16A34A
--color-secondary#1E61F0
--color-bg#FFFFFF
--font-headingInter 700
--btn-radius6px
--badge-radius4px
DNA: amplitude_com × wise_com × resolver_com
What Alcheon's tokens produced
- Primary color: #16A34A — synthesized from amplitude_com × wise_com × resolver_com; expresses sustainability domain identity before any copy is processed
- Hero background: linear-gradient(to bottom, #F0FDF4, #ECFDF5) — subtle green tint from section inspiration; the color alone communicates the product category
- Data font: JetBrains Mono on metric values, scope labels, and chart axes — three-register type system separates data from prose; builds analytical credibility
- Buttons: --btn-radius: 8px — rectangular, not pill; enterprise SaaS register consistent with amplitude_com × wise_com source sites
- Dashboard mockup: CSS emissions chart with Scope 1/2/3 polylines, JetBrains Mono month labels, and color-coded legend — Alcheon's section inspiration specified product-fit visualization, not a generic screenshot
02
Feature / Capabilities
canopy-generic.app/features Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Primary color: #6366f1 on icon tiles, links, and accent line — every brand-specific green signal replaced with generic indigo; the platform's climate identity disappears
- Category chips: Inter in pill shape — the brief specifies JetBrains Mono uppercase at 4px radius for status chips; losing the mono font collapses the data-precision register that enterprise buyers read as credibility
- Section background: White — brief's linear-gradient(to bottom, #fff, #F0FDF4) creates a green fade that ties features section to hero; without it, the page loses visual continuity
- Buttons: Pill-radius "Learn more" links — --btn-radius: 8px from the brief; rectangular links fit engineering SaaS, pill links read as marketing SaaS
- Icon tiles: Indigo bg tint — icons sit in rgba(99,102,241,0.08) tint instead of rgba(22,163,74,0.08); domain color coding is lost from every feature card
vs
canopy-alcheon.app/features With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#16A34A
--color-secondary#1E61F0
--color-bg#FFFFFF
--font-headingInter 700
--btn-radius6px
--badge-radius4px
DNA: amplitude_com × wise_com × resolver_com
What Alcheon's tokens produced
- Primary color: #16A34A on icon tiles, accent bars, links, and hover states — consistent climate brand identity across all six capability cards
- Category chips: JetBrains Mono uppercase at 4px radius — Alcheon's component anatomy spec for status chips; mono typeface gives each capability a data-register label that reads as technical precision
- Section background: linear-gradient(to bottom, #fff, #F0FDF4) — section inspiration from amplitude_com × wise_com; subtle green gradient ties the features section to the hero's brand color
- Hover: Shadow deepens to 0 8px 16px rgba(0,0,0,0.12) only — Alcheon's section blueprint forbids translateY on feature cards; cards feel grounded, not floating
- Card accent bar: linear-gradient(to right, #16A34A, #4ADE80) on hover — green-to-mint accent reveals Canopy's color range; a token-aware detail not present in generic output
03
Pricing Section
canopy-generic.app/pricing Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Price number font: Inter 700 — the brief assigns JetBrains Mono to price amounts and "/month" units; losing mono makes "$799" indistinguishable from a heading; data credibility drops
- Primary color: #6366f1 on featured card border, CTA button, and plan name — indigo signals generic SaaS, not climate accountability; your buyers notice the mismatch
- Featured card surface: Indigo-tinted gradient — Alcheon specifies linear-gradient(to bottom, #F0FDF4, #fff) for the featured card, a green-surface that ties pricing back to brand; indigo breaks the visual narrative
- Save chip: Generic Inter sans — the brief uses JetBrains Mono uppercase at 4px radius (status chip anatomy) for the SAVE 20% chip; losing mono makes it read as a marketing claim, not a data annotation
- Buttons: Pill-radius (9999px) across all plans — --btn-radius: 8px from the brief; enterprise SaaS pricing communicates precision; pill buttons suggest consumer subscriptions
vs
canopy-alcheon.app/pricing With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#16A34A
--color-secondary#1E61F0
--color-bg#FFFFFF
--font-headingInter 700
--btn-radius6px
--badge-radius4px
DNA: amplitude_com × wise_com × resolver_com
What Alcheon's tokens produced
- Price number font: JetBrains Mono on the amount and "/month" unit — distinguishes numerical data from surrounding prose; prices read as precise data points, not marketing copy
- Primary color: #16A34A on featured card, CTA, and plan highlight — the entire pricing section maintains Canopy's climate brand identity; color coherence builds trust at the point of conversion
- Featured card surface: linear-gradient(to bottom, #F0FDF4, #fff) with #16A34A border — green-washed surface ties the "Growth" plan highlight to the brand palette; visually distinctive without breaking the type system
- Status chips: JetBrains Mono uppercase at 4px radius for "SAVE 20%" and "Most Popular" — component anatomy from the brief's status chip spec; precision register consistent with data dashboard DNA
- Buttons: --btn-radius: 8px — rectangular plan CTAs; enterprise register matches the product's analytical identity and source site patterns
04
Social Proof / Testimonials
canopy-generic.app/customers Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Metric number font: Inter on the "−47%" spotlight — the brief assigns JetBrains Mono to all metrics; the number loses its data-register quality and becomes decorative text
- Role labels: Inter on attribution lines — spec calls for JetBrains Mono uppercase; "VP Sustainability · Northvolt" should read as precision metadata, not conversational copy
- Spotlight background: Indigo gradient — Alcheon's brief specifies a green-tinted spotlight card (linear-gradient(135deg, #F0FDF4, #DCFCE7)); indigo gradient breaks the climate brand signal
- Color: #6366f1 on metric chip and accent — the −47% achievement should be signalled in #16A34A green to tie the outcome to the brand promise; indigo makes it look like a generic KPI widget
- Small metric chips: Pill in Inter — status chip spec (4px radius, JetBrains Mono) collapses into pill badges; the data-credibility register disappears with the font change
vs
canopy-alcheon.app/customers With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#16A34A
--color-secondary#1E61F0
--color-bg#FFFFFF
--font-headingInter 700
--btn-radius6px
--badge-radius4px
DNA: amplitude_com × wise_com × resolver_com
What Alcheon's tokens produced
- Metric number font: JetBrains Mono on "−47%" and all outcome numbers — large mono metrics create a data-first reading frame; the testimonial reads as evidence, not endorsement
- Role labels: JetBrains Mono uppercase on all attribution lines — "VP Sustainability · Northvolt" becomes precision metadata; consistent with the dashboard's own label register
- Spotlight background: linear-gradient(135deg, #F0FDF4, #DCFCE7) — green-tinted card from the brief; ties the customer outcome back to the brand promise visually
- Color: #16A34A on metric numbers and accent chips — green outcomes reinforce the brand narrative: Canopy delivers the reductions its color promises
- Layout: Asymmetric 3fr spotlight + 2fr stacked — direct from Alcheon's testimonials section blueprint; amplitude_com pattern, not equal-column grid
05
CTA / Conversion Banner
canopy-generic.app/get-started Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Section background: linear-gradient(135deg, #4f46e5, #7c3aed) — deep indigo-purple replaces the brief's green linear-gradient(to bottom right, #F0FDF4, #DCFCE7, #ECFDF5); the dark gradient buries the progress visual
- Submit button: #6366f1 pill — --btn-radius: 8px and #16A34A from the brief; pill-radius on an enterprise form submit reads as consumer; green submit reinforces the brand-specific call-to-action
- Input radius: 9999px pill — --input-radius: 8px from the brief; pill inputs signal consumer apps, 8px inputs signal enterprise form ergonomics
- Progress visualization: Indigo fill bars — progress bars in rgba(99,102,241) vs #16A34A; the "On Track" badge loses its environmental framing when decarbonisation progress is rendered in generic indigo
- Fine print font: Inter — brief assigns JetBrains Mono to compliance disclaimers ("GDPR · SOC 2"); losing mono makes legal metadata indistinguishable from marketing copy
vs
canopy-alcheon.app/get-started With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#16A34A
--color-secondary#1E61F0
--color-bg#FFFFFF
--font-headingInter 700
--btn-radius6px
--badge-radius4px
DNA: amplitude_com × wise_com × resolver_com
What Alcheon's tokens produced
- Section background: linear-gradient(to bottom right, #F0FDF4, #DCFCE7, #ECFDF5) — light green wash from the brief's --gradient-cta; section is inviting, not alarming; the progress visual reads clearly against it
- Submit button: #16A34A at --btn-radius: 8px — rectangular green submit; at the conversion moment the brand's primary color and form ergonomics are both correct
- Input: --input-radius: 8px — matching btn-radius; enterprise form register; consistent with resolver_com × wise_com source site input anatomy
- Progress visualization: linear-gradient fills in #16A34A → #4ADE80 — decarbonisation percentages rendered in brand green; the "On Track" chip in JetBrains Mono makes it a data annotation, not a marketing sticker
- Fine print: JetBrains Mono on disclaimer — "14-day free trial · No credit card required · GDPR & SOC 2 compliant" reads as a data label; separates compliance from persuasion copy typographically
06
Empty State
app.canopy-generic.app/emissions Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Grid lines: rgba(99,102,241,0.04) indigo — the brief's grid background uses rgba(22,163,74,0.04) green; at this opacity the difference is subtle but the color temperature reads differently; green is on-brand, indigo is generic
- Status chip: "Audit · Pending" in Inter pill — spec calls for JetBrains Mono uppercase at 4px radius; the chip is the key data-register touchpoint in an empty state; losing mono + square radius makes it a soft marketing badge
- Icon tile: rgba(99,102,241,0.08) indigo tint — icon wrap in green rgba(22,163,74,0.08) from the brief; the icon should signal the product's domain (emissions tracking = green), not a generic indigo category
- Primary button: #6366f1 pill — --btn-radius: 8px and #16A34A from the brief; the primary CTA in an empty state is the single highest-leverage conversion moment; pill indigo undermines both brand and register
- Sidebar active state: Indigo border-right and tint — brief specifies #16A34A active indicator; sidebar navigation is persistent chrome; wrong color here means the brand is off even before the user reaches any content
vs
app.canopy-alcheon.app/emissions With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#16A34A
--color-secondary#1E61F0
--color-bg#FFFFFF
--font-headingInter 700
--btn-radius6px
--badge-radius4px
DNA: amplitude_com × wise_com × resolver_com
What Alcheon's tokens produced
- Grid lines: rgba(22,163,74,0.04) — green-tinted grid from the brief; background texture is contextually branded; even in an empty state the dashboard environment reads as a climate tool
- Status chip: "AUDIT · PENDING" in JetBrains Mono at 4px radius — component anatomy from the brief's status chip spec; mono uppercase makes the chip a data annotation, not a label; 4px radius keeps it crisp and machine-register
- Icon tile: linear-gradient(135deg, #F0FDF4, #DCFCE7) with #16A34A icon — green icon wrap signals the emissions tracking context; domain-specific color coding from the brief's token set
- Primary button: #16A34A at --btn-radius: 8px — brand-primary rectangular CTA; the empty state's conversion moment uses the correct color and the correct shape from the token spec
- Sidebar active: #16A34A border-right and rgba(22,163,74,0.07) tint — every navigation interaction reinforces the brand color; persistent chrome stays on-brand throughout the app session
The Brief
Ledger
An API-first payments infrastructure platform for engineering teams and CFOs. Dark-themed, technical-premium — github_com × betterstack_com × fantasy_co × designbetter_co × affinity_serif_com.
Design DNA from github_com betterstack_com fantasy_co
01
Hero Section
ledger-generic.app Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Primary color: #6366f1 generic indigo — the brief synthesized #1F6FEB from github_com × betterstack_com; a deliberate blue with institutional trust, not a CSS library default
- Data font: Inter for all financial metrics — the brief assigns JetBrains Mono to all amounts, latency figures, and uptime stats; monospacing makes numeric columns register-align, critical for financial credibility
- Hero background: Flat dark grey (#111827) — the brief specifies #0D1117 (GitHub's deep dark) with subtle gradient overlays; depth layering signals institutional-grade engineering
- Buttons: Pill-radius (9999px) — --btn-radius: 6px from the brief; rectangular CTAs read as developer tooling; pills read as consumer apps
- Stats bar: No monospace alignment on metric values — without JetBrains Mono, $4.2B / 99.99% / <180ms lose the tabular alignment that makes financial dashboards feel trustworthy
vs
ledger-alcheon.app With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#1F6FEB
--color-bg#0D1117
--font-headingInter
--font-monoJetBrains Mono
--btn-radius6px
--badge-radius4px
DNA: github_com × betterstack_com × fantasy_co × designbetter_co × affinity_serif_com
What Alcheon's tokens produced
- Primary color: #1F6FEB — synthesized from github_com × betterstack_com × fantasy_co × designbetter_co × affinity_serif_com; cool blue carries institutional trust, not a CSS library default
- Financial data font: JetBrains Mono on all metric values ($4.2B, 99.99%, <180ms, 140+) — Alcheon's brief specifies monospace for every financial data register; tabular numbers build parity with fintech dashboard credibility
- Hero background: #0D1117 (GitHub dark) with subtle glassmorphism + radial gradient overlay — section inspiration from github_com × betterstack_com; layered depth creates the premium dark-mode atmosphere expected of payments infrastructure
- Buttons: --btn-radius: 6px — rectangular developer tooling register, consistent with the source sites; hover shifts background color from the motion system, not a library default
- Animate-in: opacity:0 → 1 + translateY(20px) → 0 staggered at 100ms intervals — Alcheon's motion spec (cubic-bezier(0.23,1,0.32,1), 500ms); entrance animation pacing communicates engineering quality
02
Feature / Capabilities
ledger-generic.app/features Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Category chips: Inter in soft pill shape — the brief's component anatomy specifies JetBrains Mono at 9px 700 uppercase with 4px radius; losing mono on chip labels removes the data-precision signal that enterprise buyers read as technical authority
- Card border: rgba(99,102,241,0.2) — off the synthesized #1F6FEB; indigo drift accumulates across 6 cards into overall brand-color inconsistency
- Stat rows: Inter for latency / success rate values — brief assigns JetBrains Mono to all financial and technical metrics; numbers in a proportional font lose the monospace register that fintech dashboards require
- Section BG: Flat dark — brief specifies radial-gradient(circle closest-corner, #1a1a1a, #000000); radial gradient gives depth and draws attention to the card grid center without a visible gradient stop
- Card hover: translateY(-2px) produced but with wrong shadow color — brief's explicit hover spec is 0px 8px 24px rgba(0,0,0,0.5); generic interpolated shadows use the primary color or thinner spread
vs
ledger-alcheon.app/features With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#1F6FEB
--color-bg#0D1117
--font-headingInter
--font-monoJetBrains Mono
--btn-radius6px
--badge-radius4px
DNA: github_com × betterstack_com × fantasy_co × designbetter_co × affinity_serif_com
What Alcheon's tokens produced
- Category chips: JetBrains Mono 9px 700 uppercase at 4px radius — Alcheon's component anatomy spec for fintech status chips; the radius distinction (4px chip vs 9999px badge) is intentional and only survives via token-aware generation
- Card border: 1px solid rgba(31,111,235,0.15) — exact synthesized primary; hover state escalates to rgba(31,111,235,0.35), creating a subtle focus progression that generic output misses
- Stat rows: JetBrains Mono for all technical metrics (<180ms, 0.003%, 99.97%) — three-register type system separates data from prose; builds the dashboard credibility fintech buyers expect
- Section background: #171824 surface card on #0D1117 base — from Alcheon's surface alternation inspired by github_com × betterstack_com; tonal depth without a visible line, guiding eye toward card content
- Card hover: shadow deepens to 0 4px 12px rgba(0,0,0,0.2) — restrained hover effect from the brief's motion spec; shadow shift reinforces interaction without distracting lift
03
Pricing Section
ledger-generic.app/pricing Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Price amounts: Inter on $199, $599, "Custom" — the brief assigns JetBrains Mono to all price amounts and "/month" units; proportional type on financial figures removes the tabular precision CFOs expect from infrastructure pricing pages
- Buttons: Pill-radius on all three plan CTAs — --btn-radius: 8px from the brief; pill shape signals consumer freemium, rectangular signals B2B enterprise; shape mismatch weakens the purchase signal for the developer/CFO audience
- Featured card: Generic indigo (#6366f1) border and tint — off the synthesized primary; the featured card's purpose is to anchor the eye with peak brand color; a drifted hue diffuses that signal
- Billing toggle: Inter labels, generic toggle styling — brief specifies JetBrains Mono for "Save 20%" chip at 4px radius; losing mono makes the savings callout look decorative rather than data-precise
- Tier name chips: Inter uppercase — brief spec uses JetBrains Mono for tier name labels; the font distinction separates structural labels from copy, a detail only token-aware generation preserves
vs
ledger-alcheon.app/pricing With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#1F6FEB
--color-bg#0D1117
--font-headingInter
--font-monoJetBrains Mono
--btn-radius6px
--badge-radius4px
DNA: github_com × betterstack_com × fantasy_co × designbetter_co × affinity_serif_com
What Alcheon's tokens produced
- Price amounts: JetBrains Mono on $199, $599, and all "/month" units — Alcheon's brief explicitly assigns monospace to all financial figures; tabular numerals align columns and signal enterprise data precision
- Buttons: --btn-radius: 6px on all three plan CTAs — rectangular shape reinforces the developer-and-CFO audience registration; primary plan hover shifts to #145CB6 from the motion spec
- Featured card: rgba(31,111,235,0.5) border + rgba(31,111,235,0.08) surface tint — exact synthesized primary applied to featured-card elevation; peak brand signal at the conversion moment
- Billing toggle chip: JetBrains Mono "Save 20%" at 4px radius — brief's component anatomy; mono font makes the savings figure read as a data label, not marketing copy
- Tier name chips: JetBrains Mono uppercase — structural label font separates tier identity from prose; a component-anatomy distinction the brief preserves that generic defaults collapse
04
Testimonials / Social Proof
ledger-generic.app/customers Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Metric callouts: Inter on 47%, 340 hrs, 99.97% — brief assigns JetBrains Mono to all testimonial metric numbers; proportional type on outcome metrics loses the dashboard-data credibility that makes payment success rates believable
- Author role labels: Inter sentence-case — brief specifies JetBrains Mono uppercase for role labels; mono uppercase for structural metadata is a different register from Inter body copy, and that distinction is absent
- Section background: Flat dark — brief specifies #171824 for the testimonials section to create surface alternation from the #0D1117 base; the rhythm that separates sections on a page requires the token
- Card border color: rgba(99,102,241,0.15) — off the synthesized primary; the spotlight card's conversion signal is weakened by the hue drift
- Asymmetric layout: 3fr+2fr grid produced, but cards lack brand-specific surface tint on spotlight — without rgba(31,111,235,0.08), the featured card doesn't visually anchor the section
vs
ledger-alcheon.app/customers With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#1F6FEB
--color-bg#0D1117
--font-headingInter
--font-monoJetBrains Mono
--btn-radius6px
--badge-radius4px
DNA: github_com × betterstack_com × fantasy_co × designbetter_co × affinity_serif_com
What Alcheon's tokens produced
- Metric callouts: JetBrains Mono on 47%, 340 hrs, 99.97% inside metric callout boxes — Alcheon's brief maps the mono font to all outcome figures; numbers in a payment context read as audited data when monospaced
- Author role labels: JetBrains Mono uppercase — structural metadata font separates VP Engineering / CFO / Head of Payments role labels from prose; institutional authority is a font choice, not just copy
- Section background: #171824 — brief's surface alternation token; dark surface rhythm distinguishes the testimonials section from the #0D1117 features section and draws eye to the spotlight card
- Spotlight card: rgba(31,111,235,0.08) surface tint + rgba(31,111,235,0.3) border — exact primary applied to the anchoring conversion moment; the metric callout box uses rgba(31,111,235,0.08) fill, reinforcing the brand color at the trust signal
- No stars: No 5-star ratings — brief explicitly omits stars for B2B fintech; outcome metrics (47% faster settlement) carry more purchase intent weight for the developer/CFO audience than generic star ratings
05
CTA / Conversion Banner
ledger-generic.app/get-started Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Input shape: Pill border-radius — --input-radius: 8px from the brief; pill inputs on an engineering-focused payments platform send a consumer-app signal; rectangular inputs match developer tooling conventions from the source sites
- Submit button: Pill shape in #6366f1 — double registration error (wrong color, wrong radius); the email capture button is the primary conversion action and carries both brand color and shape identity
- Disclaimer text: Inter — brief specifies JetBrains Mono for the "No credit card required · SOC2 Type II" compliance line; mono type on compliance statements reads as technical specification, not marketing fluff
- Code panel: Generic syntax highlight colors without JetBrains Mono for identifiers — code panel in Inter proportional font loses the terminal-emulator register that developer-audience landing pages use to signal API quality
- Background gradient: Generic dark flat — brief's radial-gradient(ellipse at 30%, rgba(31,111,235,0.15)) creates a directional brand glow toward the form; depth pulls attention to the conversion goal
vs
ledger-alcheon.app/get-started With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#1F6FEB
--color-bg#0D1117
--font-headingInter
--font-monoJetBrains Mono
--btn-radius6px
--badge-radius4px
DNA: github_com × betterstack_com × fantasy_co × designbetter_co × affinity_serif_com
What Alcheon's tokens produced
- Input shape: --input-radius: 8px — rectangular inputs match the developer tooling register of github_com × betterstack_com; the 2px focus ring in #1F6FEB signals active state with brand color precisely as the brief specifies
- Submit button: #1F6FEB at 6px radius — primary CTA uses synthesized brand color at the correct radius; hover shifts to #145CB6 from the motion spec, not a default
- Disclaimer text: JetBrains Mono 10px — Alcheon's brief assigns mono to compliance and technical specification labels; "SOC2 Type II compliant" reads as a data point rather than marketing boilerplate
- Code panel: JetBrains Mono throughout — API response block uses mono font with token-aware syntax colors; the code block signals API quality and sets developer expectations accurately
- Background: radial-gradient(ellipse at 30%, rgba(31,111,235,0.15)) + secondary ellipse — directional brand glow focuses the eye on the email form; synthesized primary applied at low opacity creates depth without flattening the dark surface
06
Empty State / Onboarding
ledger-generic.app/dashboard Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- API status chip: "API · UNCONFIGURED" in Inter pill — brief specifies JetBrains Mono 9px 700 uppercase at 4px radius; the status chip is the most important label in the onboarding view; losing mono removes the console/terminal register that tells developers this is a technical product
- Primary button: Pill shape in #6366f1 — the empty state CTA is the first conversion click in any real-world user session; pill shape on a payments developer tool misregisters the product category
- Sidebar section labels: Inter — brief assigns JetBrains Mono to sidebar section headers like "Developer" and "Overview"; without mono, structural chrome labels are indistinguishable from content labels
- Ghost metric cards: Flat placeholder with no brand color — brief specifies indigo-primary-tinted skeleton state; brand color on ghost states reinforces product identity during load, not just after
- Empty state icon: Indigo fill in #6366f1 — off-primary icon in the conversion moment; the CTA button, icon, and status chip should all reference the same brand color anchor, which drifts without the synthesized token
vs
ledger-alcheon.app/dashboard With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#1F6FEB
--color-bg#0D1117
--font-headingInter
--font-monoJetBrains Mono
--btn-radius6px
--badge-radius4px
DNA: github_com × betterstack_com × fantasy_co × designbetter_co × affinity_serif_com
What Alcheon's tokens produced
- API status chip: "API · UNCONFIGURED" in JetBrains Mono 9px 700 uppercase at 4px radius — Alcheon's component anatomy for fintech status chips; the radius distinction (4px) is explicit in the brief and only survives token-aware generation; mono font signals console/terminal precision
- Primary button: "Generate API Key" at --btn-radius: 6px in #1F6FEB — developer console register; rectangular shape + exact primary color + hover to #145CB6 match the motion spec; the first conversion click uses every relevant token simultaneously
- Sidebar section labels: JetBrains Mono uppercase for "Overview" and "Developer" — structural chrome labels use mono; navigation architecture is visually distinct from content labels; a three-register type system operating across the entire product shell
- Sidebar active state: rgba(31,111,235,0.1) tint with #1F6FEB text — synthesized primary consistently applied at the persistence layer; brand color follows the user through every navigation interaction, not just marketing moments
- Empty state radial glow: radial-gradient(ellipse at 50% 120%, rgba(31,111,235,0.06)) behind the empty state content — the brief's ambient gradient technique; brand color creates directional warmth in the conversion zone without visible boundary
The Brief
Pulse
A product analytics and experimentation platform for growth teams and engineers. Dark-themed, data-dense, technically precise — mixpanel_com × posthog_com × datadoghq_com.
Design DNA from mixpanel_com posthog_com datadoghq_com
01
Hero Section
pulse-generic.app Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Primary color: #6366f1 generic indigo — Alcheon synthesized #533AFD electric indigo-purple from mixpanel_com × posthog_com × datadoghq_com; the hue shift toward violet carries the precise brand signal of product analytics tools, not CSS library defaults
- Live event feed: Inter font on all event data — the brief assigns ui-monospace to event names, user IDs, and latency values; tabular monospacing on analytics data is what separates an analytics platform from a marketing page
- Badge shape: Pill (9999px) on the hero chip — the brief specifies --badge-radius: 4px; a square chip on "REAL-TIME" reads as a data label from a technical dashboard; a pill reads as a consumer app tag
- Hero background: Flat dark with faint radial — the brief specifies linear-gradient(to bottom, #4A3AFF, #16004D) as the hero gradient; the directional purple-to-black signals depth and analytics precision absent from a flat default
- Stat numbers: Inter for all numeric metrics — Alcheon's brief assigns ui-monospace to every metric value; monospaced stats (1B+, 99.99%, <80ms) register as live dashboard data, not marketing copy
vs
pulse-alcheon.app With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#533AFD
--color-bg#0A0D11
--font-headingIBM Plex Sans
--font-monoui-monospace
--btn-radius6px
--badge-radius4px
DNA: mixpanel_com × posthog_com × datadoghq_com
What Alcheon's tokens produced
- Primary color: #533AFD — synthesized precisely from mixpanel_com × posthog_com × datadoghq_com; an electric indigo-violet that carries the analytics-tool brand authority absent from the generic #6366f1 default
- Live event table: ui-monospace for event names, user IDs, and timestamps — Alcheon's brief assigns monospace to every analytics data register; the result reads as a live terminal feed, immediately communicating real-time product intelligence
- Hero badge: 4px radius on "REAL-TIME ANALYTICS" chip — --badge-radius: 4px from the brief; square-corner chips signal technical precision and data density; contrasted directly with the pill default, the difference in product category register is immediate
- Background: linear-gradient(to bottom, #4A3AFF, #16004D) with rgba(83,58,253,.18) radial overlay — section gradient from the brief; directional deep purple creates the visual weight expected of an analytics platform hero
- Stat bar: ui-monospace on all metric values (1B+ events/day, 99.99% uptime, <80ms latency) — Alcheon's mono assignment on data numbers; tabular rendering signals live measurement, not marketing rounding
02
Feature / Capabilities
pulse-generic.app/features Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Feature chips: Pill (9999px) at #6366f1 — the brief specifies 4px badge-radius for capability labels; round tags read as consumer app chips; square-corner chips read as technical feature categories from an engineering tool
- Icon wells: rgba(99,102,241,.12) fill — the synthesized primary is #533AFD; without the exact token the icon well tint is slightly desaturated and shifts toward blue-indigo rather than the brief's violet-indigo register
- Card hover: translateY(-4px) on the card itself — the brief's hover motion applies box-shadow depth only; lifting the entire card on hover reads as a consumer product interaction, not an analytics dashboard component
- Feature labels: Inter throughout — Alcheon assigns ui-monospace to short capability labels and tag text; the type register distinction between body copy (IBM Plex Sans) and data labels (mono) is collapsed without the brief
- Card radius: 12px default — the brief specifies --card-radius: 8px; the lower radius tightens the visual density toward the analytics platform register; small radius differences compound across a full component grid
vs
pulse-alcheon.app/features With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#533AFD
--color-bg#0A0D11
--font-headingIBM Plex Sans
--font-monoui-monospace
--btn-radius6px
--badge-radius4px
DNA: mixpanel_com × posthog_com × datadoghq_com
What Alcheon's tokens produced
- Feature chips: 4px radius in ui-monospace at rgba(83,58,253,.12) — Alcheon's badge anatomy for analytics capability labels; square tags with mono font signal technical feature taxonomy rather than consumer feature marketing
- Icon wells: rgba(83,58,253,.12) fill at 8px radius — exact synthesized primary at low opacity; the violet-indigo tint carries the brand identity into every feature card's structural chrome, not only in primary CTAs
- Card hover: box-shadow depth increase only, no translateY — the brief's motion spec; analytics dashboard cards signal depth through shadow, not physical lift; interaction register matches the source sites
- Feature labels: ui-monospace on category chips — IBM Plex Sans for card body copy, mono for chip labels; two-register type system signals the distinction between prose content and structured data at the card level
- Staggered entrance: 80ms-interval opacity + translateY animation per card — Alcheon's motion specification; cascade timing communicates rendering confidence, the pacing pattern synthesized from posthog_com × datadoghq_com dashboard interactions
03
Pricing Section
pulse-generic.app/pricing Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Price numbers: Inter proportional font — the brief assigns ui-monospace to all price values; proportional numbers in a pricing grid do not column-align; tabular mono figures signal pricing precision expected from a per-seat analytics tool
- "Most Popular" badge: Inter pill (9999px) — Alcheon specifies ui-monospace 9px uppercase at 4px radius for the featured plan badge; the pill shape projects consumer SaaS; the square mono label projects technical tooling
- Plan CTA buttons: Pill CTA × 9999px radius — --btn-radius: 8px from the brief; every CTA on a developer-first pricing page should use the rectangular radius that signals the correct product category
- Feature list: Flat sequential list — Alcheon's pricing structure groups features under ui-monospace category labels (DATA, EXPERIMENTS, SECURITY); ungrouped lists bury the architecture of what a plan includes
- Annual toggle: Inter "Save 20%" in the toggle row — the brief assigns ui-monospace to the savings label; mono framing makes the discount read like a computed output rather than marketing copy
vs
pulse-alcheon.app/pricing With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#533AFD
--color-bg#0A0D11
--font-headingIBM Plex Sans
--font-monoui-monospace
--btn-radius6px
--badge-radius4px
DNA: mixpanel_com × posthog_com × datadoghq_com
What Alcheon's tokens produced
- Price numbers: ui-monospace — all price figures and per-seat units use --font-mono; tabular number rendering mirrors the product itself (analytics dashboards), where every numeric value is monospaced for register alignment
- "Most Popular" badge: ui-monospace 9px 700 uppercase at 4px radius in #533AFD — Alcheon's badge anatomy applied to the highest-signal label on the pricing page; the square chip in the synthesized primary is immediately recognisable as brand
- Plan CTAs: 8px radius in #533AFD — rectangular developer-tool buttons; the CTA shape is consistent with the hero, features, and every other section; the token system makes the entire product feel deliberate
- Feature grouping: ui-monospace category labels (DATA, EXPERIMENTS, SECURITY) — Alcheon's taxonomy structure for analytics pricing; grouped feature architecture exposes the product model, not just a list of checklist items
- Annual toggle "Save 20%": ui-monospace chip separate from the toggle label — the savings indicator treated as a data output; the brief's mono assignment to computed values extends to pricing UX, signalling that numbers are always exact
04
Social Proof / Testimonials
pulse-generic.app/customers Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Layout: Uniform 3-column equal grid — the brief specifies an asymmetric 2fr/1fr layout with a spotlight card spanning 2 rows; equal grids treat all testimonials identically and miss the editorial hierarchy of a featured customer story
- Role badges: Inter pill (9999px) — the brief assigns ui-monospace at 4px radius to role labels; pill role chips read as consumer social proof; mono square chips read as technical team role data from a B2B analytics tool
- Quote mark: #6366f1 generic indigo — Alcheon synthesized #533AFD; the oversized quote mark is the brand signal anchor for the entire social proof section; the hue shift matters when the rest of the page is already using the correct synthesized primary
- Company name: Regular-weight Inter — the brief renders company names in IBM Plex Sans uppercase at low opacity; this type treatment signals organisational data rather than a name in running prose
- Live stat chip: Absent — Alcheon's social proof spec includes a live usage chip ("1,240 teams shipped a feature this week") with a pulsing brand-primary dot; real-time social data from a product analytics platform is its own strongest proof point
vs
pulse-alcheon.app/customers With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#533AFD
--color-bg#0A0D11
--font-headingIBM Plex Sans
--font-monoui-monospace
--btn-radius6px
--badge-radius4px
DNA: mixpanel_com × posthog_com × datadoghq_com
What Alcheon's tokens produced
- Asymmetric spotlight layout: 2fr/1fr grid with a featured card spanning 2 row slots — Alcheon's social proof layout spec synthesized from posthog_com × mixpanel_com; editorial hierarchy rewards the highest-signal testimonial with structural prominence
- Role badges: ui-monospace at 4px radius in rgba(83,58,253,.12) — Alcheon's badge anatomy for role labels; mono badges convert "Head of Growth at Acme" into structured team data rather than prose attribution
- Quote mark: #533AFD oversized — synthesized primary applied as the decorative anchor; the exact violet-indigo hue is the same token used in the hero badge, pricing chip, and CTA; brand signal consistency across the page is only possible with a shared token system
- Company name: IBM Plex Sans uppercase at 0.35 opacity — Alcheon's company-name treatment from the brief; low-opacity uppercase signals organisational metadata, visually subordinate to the quote but structurally present
- Live stat chip: "1,240 teams shipped a feature this week" with pulsing #533AFD dot — Alcheon's social proof live-data pattern from posthog_com; a product analytics platform citing real-time usage data is self-referential proof that the product works
05
CTA / Conversion
pulse-generic.app/get-started Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Fine-print: Inter proportional — the brief assigns ui-monospace to compliance and trust-signal labels ("14-DAY FREE TRIAL · NO CREDIT CARD REQUIRED"); mono fine-print signals a computed policy statement rather than casual boilerplate
- Email input: Rounded pill input field — the brief specifies --input-radius: 8px with a 2px #533AFD focus ring; pill-radius inputs lose the developer-console register that rectangular inputs establish for a technical analytics product
- CTA button: Pill CTA in #6366f1 — --btn-radius: 8px from the brief; the final conversion CTA should use the same rectangular developer-tool shape as every other button in the product to maintain consistent product register
- Heading: Inter gradient text with no accent word scoping — Alcheon's CTA heading uses IBM Plex Sans with a single <em> accent scoped to 2 key words in #533AFD; the selective accent creates brand resonance without the diluted gradient fill
- Background: Flat dark — the brief specifies a centred radial-gradient(rgba(83,58,253,.12)) glow behind the form and a bottom linear-gradient border in the synthesized primary; directional warmth focuses the eye on the conversion zone
vs
pulse-alcheon.app/get-started With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#533AFD
--color-bg#0A0D11
--font-headingIBM Plex Sans
--font-monoui-monospace
--btn-radius6px
--badge-radius4px
DNA: mixpanel_com × posthog_com × datadoghq_com
What Alcheon's tokens produced
- Fine-print: ui-monospace uppercase ("14-DAY FREE TRIAL · NO CREDIT CARD REQUIRED") — Alcheon's mono assignment to compliance labels; the statement reads as policy specification rather than marketing reassurance, matching the brief's technical-product register
- Email input: 8px radius + 2px #533AFD focus ring — --input-radius aligns with --btn-radius from the brief; the focus ring in the exact synthesized primary connects the form to the brand every time a user interacts with the input
- CTA button: #533AFD at 8px radius — same shape and color token as the hero, features, and pricing CTAs; token-system consistency means the final conversion click uses identical brand signal as the first button a user saw
- Heading accent: IBM Plex Sans 800 with <em> scoped to 2 words in #533AFD — selective word-level accent from the brief; the approach focuses brand color on the highest-meaning words rather than diluting the heading with a full gradient fill
- Background glow: radial-gradient(rgba(83,58,253,.12)) + linear-gradient bottom rule — the brief's CTA section atmosphere; centred radial warmth directs visual attention to the form; the bottom gradient border in the synthesized primary closes the section with brand acknowledgement
06
Empty State / Onboarding
pulse-generic.app/dashboard Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius4px
--badge-radius4px
DNA: none · unguided generation
What the AI chose on its own
- Sidebar section labels: Inter — the brief assigns ui-monospace to sidebar structural labels (Analytics, Experiments); without mono, navigation chrome is indistinguishable from content; the three-register type hierarchy (heading / body / mono) collapses to one
- Empty state chip: Pill badge in Inter — Alcheon specifies ui-monospace at 4px radius for the "No dashboards yet" indicator chip; the badge above the heading is the first data label a new user sees; its typography should match the product's data register, not a pill tag
- Primary CTA: Pill in #6366f1 — the first conversion click inside a product dashboard should use the same rectangular 8px button that appears in every marketing section; inconsistent radius between marketing and product creates register mismatch
- Ghost chart bars: Absent — the brief specifies ghost bar segments in rgba(83,58,253,.04-.18) gradient fills behind the empty state; for an analytics product, placeholder chart structure in the empty state tells users exactly what content they will see when data arrives
- Background: Flat dark — the brief specifies a radial-gradient(ellipse, rgba(83,58,253,.07)) centred behind the empty-state content; subtle brand-primary warmth behind the empty zone converts anticipation into brand recall at the lowest-data moment of the user journey
vs
pulse-alcheon.app/dashboard With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#533AFD
--color-bg#0A0D11
--font-headingIBM Plex Sans
--font-monoui-monospace
--btn-radius6px
--badge-radius4px
DNA: mixpanel_com × posthog_com × datadoghq_com
What Alcheon's tokens produced
- Sidebar section labels: ui-monospace uppercase for "Analytics" and "Experiments" — Alcheon's structural chrome type spec; navigation section labels in mono signal that the sidebar architecture is a product schema, not just a list of links
- Empty state chip: ui-monospace at 4px radius, rgba(83,58,253,.12) — Alcheon's badge anatomy applied to the empty-state indicator; the "No dashboards yet" chip in mono and square radius reads as a system state message rather than a friendly UI label
- Primary CTA: "New Dashboard" at 8px radius in #533AFD — the first product action uses the exact same button shape and color that appears across all six marketing sections; no token drift between marketing and product registers
- Ghost chart bars: Gradient bars in rgba(83,58,253,.04) → rgba(83,58,253,.18) — Alcheon's placeholder state pattern for analytics products; ghost bar anatomy behind the empty-state content previews the product's visual language before any data exists
- Sidebar active state: rgba(83,58,253,.12) tint with #533AFD text — synthesized primary at the persistence layer; brand color follows the user across every navigation state, consistent with how posthog_com and mixpanel_com handle active sidebar states
The Brief
Bloom
A monthly plant subscription and care guidance app for design-aware plant lovers. Light-themed, warm and earthy — grovemade_com × loom_com × are_na × svelte_dev × planetscale_com.
Design DNA from grovemade_com loom_com are_na
01
Hero Section
plantbox-generic.app Without Alcheon
No input0 tokens · AI defaults
--color-primary#22C55E
--color-bg#FFFFFF
--font-headingInter
--font-bodyInter
--btn-radius9999px
--badge-radius9999px
DNA: none · unguided generation
What the AI chose on its own
- Green primary: #22C55E Tailwind green-500 — Alcheon synthesized #52B788 sage green from grovemade_com × loom_com × are_na; the hue shift from vivid emerald to muted sage carries the earthy craft-goods signal that separates a premium plant brand from a generic health app
- Heading font: Inter throughout — the brief's primary differentiator is Lora (serif) for all display headings; a serif-sans pairing is the typographic signal of a curated, design-aware consumer brand; Inter-only reads as a generic SaaS landing page regardless of color
- Button radius: 9999px pill — Alcheon's brief specifies --btn-radius: 8px; the slight corner creates the exact middle ground between clinical-square and consumer-pill that premium subscription boxes occupy; pill buttons flatten the brand into a mobile-app template
- Background: Pure #FFFFFF — the brief specifies #FCFDFC warm near-white; six hex points of warmth shift the page baseline from a clinical white toward a natural paper feel; the warmth compounds with the sage green and Lora to produce organic coherence
- Hero accent: No decorative elements — Alcheon's brief includes organic leaf SVG decorations at 4% opacity as structural visual texture; absent these, the hero reads as blank utility whitespace rather than an immersive botanical brand environment
vs
bloom-alcheon.app With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#52B788
--color-bg#FCFDFC
--font-headingLora (serif)
--font-bodyInter
--btn-radius8px
--badge-radius4px
DNA: grovemade_com × loom_com × are_na × svelte_dev × planetscale_com
What Alcheon's tokens produced
- Sage green: #52B788 — synthesized from grovemade_com × loom_com × are_na; a desaturated, earthy hue that carries genuine craft-goods brand authority; where #22C55E signals "app is working", #52B788 signals "this was chosen by a designer"
- Lora serif headings: The brief's most impactful single token — Lora at 700 weight for the h1 transforms the same marketing copy from a SaaS template into a botanical brand voice; the serif-sans pairing (Lora display + Inter body) expresses product category with typography alone
- Button radius: 8px — the brief's --btn-radius; a considered corner that sits between utility-square and consumer-pill, communicating premium subscription rather than either clinical B2B or throwaway consumer; the choice reflects grovemade_com's product-page CTA anatomy
- Hero background: linear-gradient(to bottom, #F4F9F6, #FCFDFC) with organic leaf SVG textures — the warm near-white baseline plus a sage-tinted gradient creates visual depth without imagery; the leaf SVGs at 4% opacity add sensory brand signal that pure color cannot
- Stat bar typography: Lora on metric values (50K+, 4.9★, 140+) — the brief applies the heading font to display numbers; Lora serif numerals in the stats bar communicate craft authority on social proof data rather than raw utility
02
Feature / Capabilities
plantbox-generic.app/features Without Alcheon
No input0 tokens · AI defaults
--color-primary#22C55E
--color-bg#FFFFFF
--font-headingInter
--font-bodyInter
--btn-radius9999px
--badge-radius9999px
DNA: none · unguided generation
What the AI chose on its own
- Feature card headings: Inter 700 for card titles — the brief assigns Lora to all feature names in cards; the absence of a serif heading font flattens care journal, botanist chat, and curated selection into the same generic SaaS voice
- Chip badges: 9999px pill at #22C55E — the brief specifies --badge-radius: 4px for feature chips; round chips signal consumer app category labels; square-corner chips at 4px with a muted earthy tint signal taxonomic product features from a craft subscription service
- Icon wells: rgba(34,197,94,0.1) — built from the default #22C55E; without Alcheon's synthesis the icon well tint is conspicuously pure emerald rather than the earthy sage tone that anchors the premium plant brand palette
- Section background: #F3F4F6 standard Tailwind gray — the brief specifies #F8F8F8 for section-alt-bg; a nearly-invisible but perceptible warmth difference; the Tailwind gray reads as a default developer template; the warm near-white belongs to the botanical brand
- Card shadow: 0 1px 3px rgba(0,0,0,.1) flat — the brief specifies 0 4px 12px rgba(0,0,0,.06); greater offset with lower opacity creates depth through spatial displacement rather than darkness blur; the resulting cards feel elevated, not just bordered
vs
bloom-alcheon.app/features With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#52B788
--color-bg#FCFDFC
--font-headingLora (serif)
--font-bodyInter
--btn-radius8px
--badge-radius4px
DNA: grovemade_com × loom_com × are_na × svelte_dev × planetscale_com
What Alcheon's tokens produced
- Lora feature headings: The brief applies the heading font token to every card title — Lora at 600 weight on "Care Journal", "Botanist Chat", and "Curated Selection" turns feature naming into a brand voice act; the same words in Inter feel like feature documentation
- Feature chips: 4px radius in sage rgba(82,183,136,.1) — square-corner chips with a muted earthy fill signal that the labels are product taxonomy from a thoughtful subscription service, not interactive filters from a consumer app
- Icon wells: rgba(82,183,136,.1) fill — the exact synthesized sage primary at low opacity; the earthy tint carries the brand's palette into every card's structural chrome without competing with the content; consistency across 6 icons that all feel botanically placed
- Card shadow: 0 4px 12px rgba(0,0,0,.06) — the brief's card-shadow: greater offset and lower opacity than the default; each card in the grid feels individually elevated above the #F8F8F8 section background, creating a curated product-shelf spatial metaphor
- Staggered reveal: IntersectionObserver with 100ms card-index delay — the brief's motion specification synthesized from are_na × loom_com portfolio interactions; cascade timing communicates deliberate curation, each feature arriving as part of a considered set
03
Pricing Section
plantbox-generic.app/pricing Without Alcheon
No input0 tokens · AI defaults
--color-primary#22C55E
--color-bg#FFFFFF
--font-headingInter
--font-bodyInter
--btn-radius9999px
--badge-radius9999px
DNA: none · unguided generation
What the AI chose on its own
- Price amounts: Inter 700 at 2.75rem — the brief's most deliberate token is Lora for price display; a serif numeral like £39 in Lora at 700 weight carries the visual weight of a premium, hand-curated subscription; the same number in Inter reads as an app invoice
- Plan CTAs: Pill (9999px) buttons — Alcheon specifies 8px for --btn-radius; the pill CTA on a pricing card works against the premium-tier register the copy establishes; the slight corner expresses considered craft rather than mass-market SaaS defaults
- Featured card highlight: Background color shift on featured card — the brief specifies a 2px solid #52B788 border plus 0 0 0 2px rgba(82,183,136,.25) outer glow; a highlighted background is the cheapest tier-differentiation signal; the border + glow anatomy communicates design attention
- Price subtext: Inter at the same weight as body copy — price labels ("per month"), period labels, and tier names all collapse into visual parity; Alcheon's token hierarchy (Lora for amount, Inter for label) creates clear reading order through type contrast alone
- Tier names: "Starter / Standard / Premium" generic naming — the brief's tiers are "Seed / Garden / Sanctuary"; naming that extends the botanical metaphor deepens brand coherence; generic tier naming foregoes the category signal that the brand stakes its positioning on
vs
bloom-alcheon.app/pricing With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#52B788
--color-bg#FCFDFC
--font-headingLora (serif)
--font-bodyInter
--btn-radius8px
--badge-radius4px
DNA: grovemade_com × loom_com × are_na × svelte_dev × planetscale_com
What Alcheon's tokens produced
- Lora price amounts: The brief's --font-heading applied to price display numbers transforms the pricing card into a typographic statement; Lora at 3rem 700 weight on £39 communicates premium positioning through letter anatomy; the serif numeral carries inherited craft-goods authority from grovemade_com
- 8px CTA radius: Every plan's subscription button respects the brief's --btn-radius: 8px; the slight, deliberate corner throughout the pricing grid produces visual consistency that communicates a designer's intention — neither clinical square nor mass-market pill
- Featured card border + glow: 2px solid #52B788 border plus 0 0 0 2px rgba(82,183,136,.25) outer glow on the Garden tier — a border-based highlight anatomy borrowed from grovemade_com product pages; the result differentiates by design attention rather than background color contrast alone
- Botanical tier naming: Seed / Garden / Sanctuary — names that extend the brief's world; each tier name doubles as a botanical metaphor that deepens the product's category signal without a single extra pixel of design
- Terracotta secondary: --color-secondary #E67E22 appears on the "Most popular" label badge; the earthy orange-terracotta against sage green creates a palette pair synthesized from the source sites' warmth; a secondary colour signal that reads as a deliberate design choice, not a highlight utility
04
Testimonials Section
plantbox-generic.app/reviews Without Alcheon
No input0 tokens · AI defaults
--color-primary#22C55E
--color-bg#F3F4F6
--font-headingInter
--font-bodyInter
--btn-radius9999px
--badge-radius9999px
DNA: none · unguided generation
What the AI chose on its own
- Quote body font: Inter 400 for testimonial text — the brief's most critical testimonial token is Lora at font-style: italic for quote paragraphs; italic Lora transforms a plain text testimonial into a voice with texture; Inter regular renders the same words as a database entry
- Star rating color: Amber #F59E0B — the brief assigns star ratings to --color-secondary #E67E22 terracotta; the terracotta-sage pair is a synthesized earthy palette from the source sites; amber stars are the default for every rating widget on the web and carry no brand signal
- Plan badges: Pill (9999px) in generic green — Alcheon specifies 4px radius on plan tags; the small square corner is part of the brief's taxonomy signal set; pill plan badges suggest a social media follower count tag, not a subscription tier from a curated service
- Quote marks: Plain text content without decorative treatment — the brief applies Lora-rendered curly quotation marks in #52B788 sage before each testimonial; styled quote marks in the brand's primary color are a typographic identity marker that costs nothing to implement but signals everything
- Proof bar values: Inter bold on statistics (50K+, 4.9★, 94%) — the brief applies Lora to display numbers throughout; plain-sans proof stats carry the same visual register as body copy; Lora serif on proof numbers communicates a different epistemic authority
vs
bloom-alcheon.app/reviews With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#52B788
--color-secondary#E67E22
--font-headingLora (serif)
--font-bodyInter
--btn-radius8px
--badge-radius4px
DNA: grovemade_com × loom_com × are_na × svelte_dev × planetscale_com
What Alcheon's tokens produced
- Lora italic quotes: The brief's typography tokens applied to testimonial paragraphs — Lora at font-style: italic renders the entire quote body in a humanist serif voice; the combination of a real person's name and their words in italic Lora creates the impression of a handwritten letter, not a review widget
- Curly quotes in sage: A CSS ::before pseudo-element applying a large Lora " in #52B788 — a direct typographic identity marker using the brief's --font-heading and --color-primary together; the quote mark becomes a brand touch-point that repeats three times on this page alone
- Terracotta star ratings: --color-secondary #E67E22 on the ★★★★★ — the synthesized earthy orange-terracotta against the sage card background creates the brief's intended warm palette pair; the secondary colour has clear semantic utility in the testimonial section where ratings dominate
- Plan badges at 4px: Square-corner plan level tags (Garden, Sanctuary, Seed) in the author footer — the brief's --badge-radius applied to plan attribution; small-radius tags create a membership tier visual that reads as taxonomy from a designed system, not a consumer label
- Proof bar with Lora nums: 50K+, 4.9★, 94%, 87% in Lora at 1.875rem — the brief's heading font applied to social proof metrics; serif proof numbers communicate that the statistics are established facts, not live counters; the type choice elevates the credibility register of the entire brand story
05
CTA / Sign-up
plantbox-generic.app/start Without Alcheon
No input0 tokens · AI defaults
--color-primary#22C55E
--color-bg#F3F4F6
--font-headingInter
--font-bodyInter
--btn-radius9999px
--badge-radius9999px
DNA: none · unguided generation
What the AI chose on its own
- Section background: #F3F4F6 flat Tailwind gray — the brief specifies a linear-gradient(to bottom, #F4F9F6, #F9FDF9) warm sage-tinted gradient; the gradient carries the botanical color palette into the call-to-action section, turning the email capture into an immersive brand environment rather than a form on a gray panel
- No organic decorations: Plain background with no visual texture — the brief specifies organic leaf SVGs at 4–5% opacity as absolute-positioned background elements; their absence removes the sensory product signal from the most conversion-critical section of the page
- Heading: Inter 700 "Start growing today" — with Alcheon's Lora token, the same headline becomes a display-serif statement; the italic green em on "today" in Lora is a typographic micro-decision that communicates brand attention at the exact moment of conversion intent
- Email input focus: Default browser outline or flat border-color shift — the brief's input :focus uses a sage-tinted rgba(82,183,136,.15) box-shadow ring; the colored focus state ties the form's active state to the brand palette rather than the browser default
- CTA button: Pill #22C55E — the brief's --btn-radius: 8px applies here too; a consistent 8px CTA button throughout all 6 sections is what makes the design system feel systemic rather than component-by-component
vs
bloom-alcheon.app/start With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#52B788
--color-bg#FCFDFC
--font-headingLora (serif)
--font-bodyInter
--btn-radius8px
--badge-radius4px
DNA: grovemade_com × loom_com × are_na × svelte_dev × planetscale_com
What Alcheon's tokens produced
- Warm gradient section: linear-gradient(to bottom, #F4F9F6, #F9FDF9) — the brief's section background pattern applied to the CTA panel; the sage-green tint in the gradient signals brand continuity at the conversion moment; the gradient is inextricable from its #52B788 token origin
- Organic leaf SVGs: Three absolute-positioned leaf shapes at 4–5% opacity — the brief's decorative texture pattern appears in both the hero and the CTA, creating a before-and-after bookend structure; the textures appear at the natural moments of botanical brand expression
- Lora italic headline: The h2 "Start your green sanctuary" applies Lora's italic weight to the botanical brand word in the primary green — a condensed version of the same technique from the hero; headline consistency through Lora italic across sections creates a typographic signature
- Focus ring: rgba(82,183,136,.15) box-shadow on the email input :focus — the brief's --color-primary at 15% opacity as a focus indicator; the colored ring ties interactive state feedback to the brand palette, eliminating the browser-default blue outline that's present in the unguided version
- Trust strip icons: Sage green check icons in the trust strip below the form — the brief's primary color applied to micro-trust signals; even at 16px the earthy sage differentiates the credibility signals from generic checkbox iconography
06
Empty State
plantbox-generic.app/collection Without Alcheon
No input0 tokens · AI defaults
--color-primary#22C55E
--color-bg#FFFFFF
--font-headingInter
--font-bodyInter
--btn-radius9999px
--badge-radius9999px
DNA: none · unguided generation
What the AI chose on its own
- Empty state heading: Inter 700 "Your collection is empty" — Alcheon's Lora token applied here transforms the same words from a zero-data error message into a gentle brand voice; the empty state is the highest-anxiety screen in a subscription app — Lora's warmth is functionally important, not decorative
- Illustration circle: rgba(34,197,94,.08) flat green tint — the brief's empty illustration uses rgba(82,183,136,.08); the sage tint is perceptibly warmer and less saturated; these micro-differences compound across every zero-state, hover state, and background fill on the platform
- Primary CTA: Pill (9999px) "Browse plants" button — Alcheon's 8px applies here; the most vulnerable user—one who has subscribed but not yet received a plant—encounters this screen first; a 9999px pill button signals mass-market; 8px signals a designed product they premium-purchased
- Starter plant chips: 9999px pill "Easy care", "Low light", "Air purifying" — the brief's 4px badge-radius on all taxonomy chips; pill chips in the plant card starter suggestions flatten the labels into decorative noise; square chips signal curated attribute taxonomy
- Page background: Pure #FFFFFF — the brief's warm near-white #FCFDFC creates the same organic baseline warmth in the empty state as everywhere else; a consistent background token is the simplest form of design system cohesion; it cannot be achieved without a token
vs
bloom-alcheon.app/collection With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#52B788
--color-bg#FCFDFC
--font-headingLora (serif)
--font-bodyInter
--btn-radius8px
--badge-radius4px
DNA: grovemade_com × loom_com × are_na × svelte_dev × planetscale_com
What Alcheon's tokens produced
- Lora empty state heading: The --font-heading token applied to the most human screen in the product — "Your garden is waiting" in Lora at 600 weight reads as a brand voice act, not a system error string; typography at this moment determines whether a new subscriber feels welcomed or processed
- Illustration circle: rgba(82,183,136,.08) sage-tinted circle containing the leaf icon — the brief's --color-primary at 8% opacity creates a warm botanical staging area for the iconography; the tint connects the empty state illustration to the brand palette with a single color variable
- Browse CTA at 8px: The brief's --btn-radius consistent through to the empty state CTA — a new subscriber's first action button in the app carries the same 8px radius as the hero conversion button; design system consistency is directly visible in the token outputs across all 6 sections
- Starter plant chips at 4px: "Low maintenance", "Bright indirect", "Rare" labels in rgba(82,183,136,.1) square-corner chips — the brief's badge anatomy applied in the empty state suggestion grid; the chip style is consistent with feature chips, pricing badges, and plan tags throughout the brand
- Card hover state: border-color: var(--color-primary) on .plant-card:hover — the brief's interaction spec brings the sage primary into hover state feedback; hovering a starter plant card in the empty state gets the same brand response as hovering a pricing card; token consistency produces emergent interaction language
The Brief
Hearth
A B2B employee benefits and HR platform for People Ops teams at 50–500 person companies. Light-themed, warm amber serif — vsco_co × headspace_com × mojo_video.
Design DNA from vsco_co headspace_com mojo_video
01
Hero Section
hearth-generic.app Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#000000
--font-headingInter
--font-monoInter
--btn-radius9999px
--badge-radius9999px
DNA: none · unguided generation
What the AI chose on its own
- Dark mode background: #000000 — an HR benefits platform for People Ops teams is a trust-critical B2B product; dark mode connotes developer tooling and consumer entertainment; the warm cream #FBF8F4 Alcheon synthesized from vsco_co × headspace_com positions Hearth in the same visual register as premium insurance and professional services — industries where warmth signals care, not code
- Indigo primary: #6366f1 Tailwind indigo — generic SaaS default that appears on hundreds of platforms; Alcheon synthesized #F59E0B amber from vsco_co's #ffbc3c and headspace_com's #ffce00 palette; amber communicates warmth, wellness, and energy — a deliberate emotional signal for a product that touches employee wellbeing
- Inter heading: Inter 800 with gradient clip text — the brief's primary differentiator is Playfair Display for all display headings; a serif announces trust, editorial authority, and craft; Inter gradient text reads as a developer portfolio hero, not a premium HR partner that HR directors will pay $8–30/employee/month for
- Pill button: 9999px radius indigo — Alcheon's brief specifies --btn-radius: 8px; the slight-corner button occupies the considered space between clinical-square (B2B cold) and full-pill (consumer casual); pill buttons on an HR admin product flatten brand into a generic fintech template
- No IBM Plex Mono: Badge in Inter pill — Alcheon's synthesis introduced IBM Plex Mono as a third typeface for status chips and system labels; monospace on a non-developer HR product creates a sophisticated signal of precision and reliability without being technical; Inter pill is both typographically and semantically indistinguishable from a marketing badge
vs
hearth-alcheon.app With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#F59E0B
--color-bg#FBF8F4
--font-headingPlayfair Display (serif)
--font-monoIBM Plex Mono
--btn-radius8px
--badge-radius4px
DNA: vsco_co × headspace_com × mojo_video
What Alcheon's tokens produced
- Warm cream background: #FBF8F4 — synthesized from vsco_co's warm-white editorial frames and mojo_video's parchment-toned UI; the 6-point warm shift from pure white establishes an immediate sensory baseline of care and warmth before a single word of copy; all other warm tones on the page calibrate against this base
- Amber primary: #F59E0B with gradient to #FFC107 — derived from vsco_co #ffbc3c and headspace_com #ffce00; amber is the unanimous warmth signal across the three source brands; the gradient extends the amber from vivid-warm to gold-warm, communicating energy and optimism — the exact emotional register for a product promising happier employees
- Playfair Display headings: The single highest-impact token — Playfair Display 700 italic for the h1 with italic amber em transforms the same copy from SaaS utility to premium brand voice; the serif signals editorial authority without formality; HR leaders and CHROs buy from brands whose visual authority matches their organizational seniority
- IBM Plex Mono badge: "NEW — Wellness stipends now available" at 4px radius, 10px uppercase — the monospace font on a non-developer product creates a calm precision signal; 4px square-corner badge communicates structured system information rather than marketing noise; together they say: this product was designed with intention
- Amber radial glow: rgba(245,158,11,0.12) radial gradient decoration — the subtle warmth bloom in the hero background acts as a visual anchor for the amber palette; it creates luminous depth without imagery; the glow is a direct reflection of headspace_com's warm light halos used on their meditation product hero
02
Feature / Capabilities
hearth-generic.app/features Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius9999px
--badge-radius9999px
DNA: none · unguided generation
What the AI chose on its own
- No category grouping labels: Features rendered as an undifferentiated 6-grid — Alcheon's synthesis introduced IBM Plex Mono category labels (BENEFITS, PLATFORM) that group features into semantic zones; without them, healthcare coverage, dental, wellness stipends, enrollment automation, and compliance all sit at equal typographic weight; the grouping is the information design, not just decoration
- Dark section background: #111827 — Alcheon synthesized #FCEFD9 warm peach for the features section-alt-bg; the amber-tinted section break creates visual rhythm between the cream hero and peach features; a flat dark section has no rhythm, no tonal progression — it reads as a continuation of hero, not a modular page
- Indigo icon wells: rgba(99,102,241,0.15) — the brief specifies rgba(245,158,11,0.1); amber icon wells on a warm background create tonal unity across the feature grid; indigo icon wells on a dark background create arbitrary contrast rather than semantic warmth; the icon well tint is the first signal of brand vocabulary, not just color
- Generic hover animation: translateY(-4px) overshoot — the brief specifies --hover-lift: translateY(-2px); the precise micro-interaction distance matches vsco_co's and headspace_com's restrained hover states; 4px carries the energy signature of a developer bootstrap template, 2px carries the signature of a deliberate product designer
- Card radius absent from feature label: No IBM Plex Mono chips visible on cards — the with-version's category chips group six features into two narrative arcs (employee-facing benefits vs platform capabilities); the grouping converts a feature list into a product story; without chips, the AI generates an even grid that requires users to construct the narrative themselves
vs
hearth-alcheon.app/features With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#F59E0B
--color-bg#FCEFD9
--font-headingPlayfair Display (serif)
--font-monoIBM Plex Mono
--btn-radius8px
--badge-radius4px
DNA: vsco_co × headspace_com × mojo_video
What Alcheon's tokens produced
- Warm peach section background: #FCEFD9 — Alcheon's --color-alt-bg token creates tonal page rhythm; stepping from #FBF8F4 cream (hero) to #FCEFD9 peach (features) creates visual cadence without a border or divider; the warm section alternation is the page architecture itself — headspace_com uses the same light-mode warm-neutral rhythm across its product pages
- IBM Plex Mono category labels: "BENEFITS" and "PLATFORM" at 9px uppercase, rgba(245,158,11,0.7) amber — a three-typeface system (Playfair Display for display, Inter for body, IBM Plex Mono for system labels) creates a typographic hierarchy that signals deliberate information design; without these labels the feature grid is a commodity layout; with them, it communicates product structure
- Amber icon wells: rgba(245,158,11,0.1) — amber at 10% opacity on the warm cream card surface creates icon well tints that are tonally coherent with the page baseline; unlike the indigo wells in the without-version, these wells read as part of the brand palette rather than a design decision made independently of the page surface
- Precise hover lift: translateY(-2px) per --hover-lift spec — the exact micro-animation value reflects the brief's easing curve (cubic-bezier(0.32, 0.94, 0.6, 1)) and duration (300ms); 2px lift with a premium deceleration ease communicates the same product quality as the typography and color — nothing here is a bootstrap default
- White cards on peach background: Background contrast strategy — contrast between the #FCEFD9 section base and #fff card surface creates depth without box-shadow weight; the warm card surface + amber icon wells + IBM Plex Mono category chips create a cohesive benefit card language that the HR buyer immediately reads as professional and considered
03
Pricing
hearth-generic.app/pricing Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius9999px
--badge-radius9999px
DNA: none · unguided generation
What the AI chose on its own
- Inter price numerals: Inter 700 for $12, $28, $49 — Alcheon's brief routes price display to Playfair Display (the heading font); large serif numerals on a pricing page communicate craft and authority; a well-designed serif price tag implies the product is worth its price — Inter numerals are typographically identical to a SaaS pricing spreadsheet
- Pill "MOST POPULAR" badge: 9999px radius, indigo — the brief specifies --badge-radius: 4px for IBM Plex Mono status chips; a square-corner monospace "MOST POPULAR" chip communicates structured product data; a pill badge communicates a design asset pasted from a UI kit; the 4px-radius monospace chip is the difference between system-information and decoration
- Indigo featured card border: Plain 1px indigo border for featured plan — Alcheon's featured card uses a 3px amber gradient top bar and a warm #FCEFD9 surface tint; the gradient top bar creates visual differentiation that survives print and greyscale; a border-only differentiation is invisible unless zoomed and collapses in low-contrast environments
- Generic "Save 20%" text: Plain Inter text next to billing toggle — the brief makes the save indicator an IBM Plex Mono chip with 4px radius and amber tint; the chip elevates a price incentive into structured system information; plain text incentive reads as an afterthought added during implementation, not a designed conversion mechanism
- Feature items without category grouping: Flat list of checkmarks across all plans — the with-version uses IBM Plex Mono section headers (BENEFITS, PLATFORM) within each pricing card to group features by capability area; this grouping makes the pricing page a product architecture document as well as a conversion surface
vs
hearth-alcheon.app/pricing With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#F59E0B
--color-bg#FBF8F4
--font-headingPlayfair Display (serif)
--font-monoIBM Plex Mono
--btn-radius8px
--badge-radius4px
DNA: vsco_co × headspace_com × mojo_video
What Alcheon's tokens produced
- Playfair Display price numerals: The heading font applied to the dollar amounts — large Playfair Display numerals on a pricing page carry the visual authority of a premium product; the serif stroke contrast in a 3rem price number communicates that the price reflects crafted value, not commodity volume pricing; this is the same typographic strategy premium insurance and financial services brands use
- IBM Plex Mono "MOST POPULAR" chip: 4px radius, amber background, uppercase — the brief's monospace-for-system-labels rule applied to the highest-conversion pricing element; square-corner IBM Plex Mono chips read as structured product data in the same way a stock ticker or server status chip does; the distinction turns a label into a signal
- Amber gradient featured card top bar: 3px linear-gradient(#F59E0B, #FFC107) — a gradient accent line at the top of the featured plan creates immediate visual hierarchy without altering card dimensions; the amber gradient connects the featured plan to the primary brand color through geometry rather than just fill, making the recommendation feel systematic not arbitrary
- Warm card surface tint: rgba(252,239,217,0.3) on the featured plan — a barely-visible amber tint on the featured card surface differentiates it from sibling cards at every zoom level and in greyscale; the warmth tint compounds with the gradient top bar and IBM Plex Mono chip to create three layers of visual differentiation, any one of which would survive print or accessibility constraints
- "Save 20%" IBM Plex Mono chip: 4px radius inline with the billing toggle — the price incentive presented as a structured system chip rather than inline text elevates it from a note to a feature; the monospace font and rounded-square shape match the rest of the system labels, creating a coherent information design language that runs through the entire page
04
Testimonials / Social Proof
hearth-generic.app/testimonials Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius9999px
--badge-radius9999px
DNA: none · unguided generation
What the AI chose on its own
- Equal 3-column grid: All testimonial cards at identical size — Alcheon's brief drives an asymmetric layout with a 2-row spotlight card for the highest-impact testimonial; equal grids distribute social proof weight evenly; the spotlight layout creates a primary testimonial that anchors trust and secondary testimonials that reinforce it — a deliberate conversion hierarchy
- Inter body text in blockquotes: Quote text in Inter 400 — the brief's heading font (Playfair Display) applied to blockquotes transforms "Our open enrollment took two days instead of three weeks" from a data point into a human voice; Playfair Display italic text in testimonials is how editorial design gives quoted speech authority and personality
- Indigo quotation marks: Generic primary-color quotation marks — Alcheon's brief produces amber oversized quotation marks at 25% opacity as structural background decoration; the muted amber quote marks create visual warmth and depth behind the testimonial text; indigo quotation marks use contrast to fight for attention against the quote text rather than frame it
- Inter pill role chips: "Head of People" in Inter 11px pill badge — the brief specifies IBM Plex Mono 9px uppercase at 4px radius for role attribution chips; monospace role chips signal professional taxonomy (Head of People, VP People, HR Director) rather than just a label; the 4px radius chip matches the badge system from pricing and features, creating consistent product information vocabulary across pages
- Dark background flattens emotional warmth: The testimonials section is where emotional resonance peaks on an HR benefits page; dark #0D1117 backgrounds communicate developer utility, not human connection; the warm peach #FCEFD9 section background in the with-version creates the emotional temperature that makes testimonials from People Ops leaders feel credible and human
vs
hearth-alcheon.app/testimonials With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#F59E0B
--color-bg#FCEFD9
--font-headingPlayfair Display (serif)
--font-monoIBM Plex Mono
--btn-radius8px
--badge-radius4px
DNA: vsco_co × headspace_com × mojo_video
What Alcheon's tokens produced
- Playfair Display italic blockquotes: The heading font applied to testimonial text — Playfair Display italic in a testimonial creates the reading experience of a pull-quote in a premium business publication; the same copy in Inter reads as a support ticket summary; the typographic register must match the emotional weight of what the customer said to make the testimonial feel earned
- Asymmetric spotlight layout: A full-height featured testimonial spanning two rows beside two stacked cards — the layout hierarchy expresses that not all social proof is equal; the Chief People Officer's testimonial about eNPS moving from 34 to 61 deserves more prominence than a general satisfaction note; the layout itself is product positioning
- Amber oversized quotation marks: 25% opacity amber at 6rem in the spotlight card — muted amber at high scale creates structural depth behind the testimonial text without visual noise; the quote mark becomes a brand texture rather than a punctuation symbol; this treatment is drawn directly from headspace_com's large-scale typographic decoration on their wellbeing content
- IBM Plex Mono role chips: "HEAD OF PEOPLE · FINTECH CO." at 9px uppercase, 4px radius, amber tint — monospace role attribution creates an institutional register for the testimonial; the chip signals: this is a title, a role, a professional identity — not a first name and company added as filler; the IBM Plex Mono vocabulary is consistent with every other system label on the page
- Warm peach section background: #FCEFD9 completes the tonal structure — the testimonials section in the warm peach alt-bg creates the page's emotional peak in the warmest register; the combination of peach background, Playfair italic quotes, amber quotation mark texture, and IBM Plex Mono role chips produces a social proof section that feels like a curated case study rather than a grid of praise
05
Call to Action
hearth-generic.app/#cta Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius9999px
--badge-radius9999px
DNA: none · unguided generation
What the AI chose on its own
- Two pill buttons — no email form: The without-version converts with two pill CTA buttons; the with-version converts with an inline email capture form; an email form is a soft commitment that advances the funnel without requiring immediate account creation; in B2B SaaS the email capture before onboarding is a proven higher-intent signal than a generic CTA click
- Gradient text heading: Inter 800 with white-to-indigo gradient clip — Alcheon's CTA heading uses Playfair Display italic with an amber em emphasis word; the gradient text treatment is visually complex and associated with developer portfolios and web3 landing pages; a Playfair Display italic heading for an HR benefits CTA reads like a premium magazine ad for employee wellbeing
- Dark background CTA: #0D1117 dark mode — a CTA section in dark mode creates an emotional dissonance for a product selling warmth and care to HR teams; the amber gradient background in the with-version (linear-gradient from #FCEFD9 to #FBF8F4) creates a luminous warmth that rises to match the emotional peak of the conversion ask
- No IBM Plex Mono fine print: The trust-building fine print ("No credit card · 14-day free trial · Cancel anytime") appears in Inter 12px muted — the brief renders this line in IBM Plex Mono 10px uppercase; the monospace treatment gives commitment-reducing fine print the same typographic authority as legal fine print in a financial contract; it signals precision and honesty
- Purple radial glow decoration: Generic indigo vignette — the with-version layers a radial amber glow directly derived from headspace_com's hero warmth treatment; the amber glow amplifies the warm brand signal at the moment of maximum conversion intent; an indigo glow at maximum conversion is a temperature mismatch between visual and emotional register
vs
hearth-alcheon.app/#cta With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#F59E0B
--color-bg#FCEFD9
--font-headingPlayfair Display (serif)
--font-monoIBM Plex Mono
--btn-radius8px
--badge-radius4px
DNA: vsco_co × headspace_com × mojo_video
What Alcheon's tokens produced
- Amber gradient section background: linear-gradient(160deg, #FBF8F4 → #FCEFD9 → #FBF8F4) — the gradient background creates the warmest page moment as a tonal crescendo; the CTA section is warmer than the hero and features sections; this tonal architecture guides the eye from warm (hero) to warmer (features) to warmest (CTA), mirroring the emotional arc of a product that sells care
- Email capture form: Input with 8px radius + amber gradient CTA button — the email form is a direct application of the --btn-radius and --color-primary tokens; the 8px-radius input field (not pill, not square) matches the button and badge system; the form creates visual coherence as a unit; the amber gradient button inside this warm-background section creates tonal harmony at the conversion point
- Playfair Display italic heading with amber em: "Benefits your team will actually love" — the italic amber emphasis word within the Playfair Display heading creates a rhetorical stress through typography; the italic serif signals voice, personality, and editorial craft; it's the typographic equivalent of a spokesman leaning forward to make a point — a human signal in a B2B sales context where every competitor headline is flat
- IBM Plex Mono fine print: "NO CREDIT CARD · 14-DAY FREE TRIAL · CANCEL ANYTIME" in 10px uppercase monospace — this is the brief's monospace-for-system-information rule at maximum conversion value; commitment-reducing guarantees rendered in monospace acquire the authority of terms and conditions; they feel factual and precise rather than marketing copy, which is the register HR buyers need for final conversion
- IBM Plex Mono stat bar with Playfair Display numbers: "3,200+" in Playfair Display with "Companies" in IBM Plex Mono label — the social proof strip below the form uses both the heading and mono fonts simultaneously; Playfair Display for the metric, IBM Plex Mono for the label — the same typographic pattern from the hero stat bar, creating page-level consistency that signals a single, intentional design system
06
Empty State
app.hearth-generic.com/benefits Without Alcheon
No input0 tokens · AI defaults
--color-primary#6366f1
--color-bg#0D1117
--font-headingInter
--font-monoInter
--btn-radius9999px
--badge-radius9999px
DNA: none · unguided generation
What the AI chose on its own
- Dark mode empty state: #161B22 card on #0D1117 background — an HR admin product where the user's first task is to add benefit plans for their employees should not feel like staring at a blank GitHub repository; the dark empty state communicates incompleteness through absence; the warm cream with amber ghost cards in the with-version transforms the same emptiness into anticipation and invitation
- Generic indigo icon: Circular indigo icon container with a clock SVG — the without-version uses one generic icon to signal "empty"; the with-version uses four ghost benefit plan cards (dashed amber outline) that show exactly what the user will create; the ghost cards are the content as placeholder rather than an icon standing in for content — a fundamentally different information architecture
- No status chip: Page title "Benefit Plans" without a status chip — the with-version places an IBM Plex Mono "BENEFITS · EMPTY" chip above the page title; the status chip communicates current system state in the same typographic language as product labels elsewhere; it positions the empty state as a system status rather than just a blank page
- Inter heading — no warmth: "No benefit plans yet" in Inter 700 — the with-version uses Playfair Display: "Your first benefit plan awaits" with italic amber em; the serif heading in the empty state carries the same brand warmth as the marketing site; the with-version maintains typographic identity at the product layer, where trust is most critical — the first session after account creation
- Pill CTA buttons: Two 9999px pill buttons — the with-version uses 8px amber gradient primary + 8px ghost secondary; consistent button radius across marketing and product UI enforces brand continuity; pill buttons in the empty state signal a different design system than the marketing site, creating a brand discontinuity at the highest-stakes moment of the user journey
vs
app.hearth-alcheon.com/benefits With Alcheon
Alcheon input6 tokens · 6 sections
--color-primary#F59E0B
--color-bg#FBF8F4
--font-headingPlayfair Display (serif)
--font-monoIBM Plex Mono
--btn-radius8px
--badge-radius4px
DNA: vsco_co × headspace_com × mojo_video
What Alcheon's tokens produced
- Ghost benefit plan cards: Four dashed 1.5px amber-border cards with amber icon wells and skeleton lines — the empty state shows the structure of what the user will create; four ghost cards (health, wellness, dental, time) make the feature set visible before it exists; the amber dashed border and rgba(245,158,11,0.02) card surface use the brand palette to make emptiness feel like potential rather than absence
- IBM Plex Mono status chip: "BENEFITS · EMPTY" at 4px radius above the page title — the page communicates its own state in system language; the chip is the same component as status badges from pricing and features, applied to the product layer; this cross-page token consistency means the design system is not just a style guide — it is a product language that persists from marketing to onboarding
- Playfair Display italic heading: "Your first benefit plan awaits" with italic em — the serif heading in the empty state maintains the brand register at the moment of first use; the word "awaits" in italic Playfair Display communicates invitation and anticipation — a deliberate emotional signal to the HR leader who has just completed onboarding and is looking at the blank dashboard
- Amber radial illustration: Circular amber radial gradient container with + SVG — the illustration is constructed from brand tokens: rgba(252,239,217,0.9) inner fill, rgba(245,158,11,0.08) outer edge, 1.5px dashed amber border; the entire illustration is made of brand palette values; without Alcheon's color synthesis there is no palette vocabulary to build an illustration with — the generic version uses an arbitrary icon on a flat background
- IBM Plex Mono quickstart checklist: "QUICK START · 3 STEPS" header over three numbered steps with matching 4px-radius step indicators — the empty state includes a process guide that uses the same monospace chip vocabulary; the checklist converts an empty state from a passive blank into an interactive onboarding guide; each step number uses the same border and amber accent as system labels elsewhere on the page
The Brief
Waveform
An AI-powered podcast editing and audio production SaaS for independent podcasters, audio journalists, and content creators. Bold dark aesthetic with electric magenta and teal accents — edit audio like editing a document.
Design DNA from descript_com cron_com zapier_com railway_app midjourney_com
01
Hero Section
audioedit-generic.app Without Alcheon
No input0 tokens · AI defaults
--color-primary#7C3AED
--color-bg#ffffff
--font-headingInter
--font-bodyInter
--btn-radius9999px
--gradient-ctanone
DNA: none · unguided generation
What the AI chose on its own
- Background: White (#ffffff) — the brief's deep navy #06051D is absent; plain white reads as a generic SaaS tool with no creative identity; the dark canvas is where the audio editor product lives
- Typography: Inter only — no IBM Plex Serif headings, no DM Sans body, no JetBrains Mono for technical labels; a single font register collapses Waveform's three-tier editorial voice into homogeneous prose
- Buttons: Pill-radius (9999px) primary in solid #7C3AED — the brief specifies a linear-gradient(135deg, #E200C0, #00E2C0) CTA with 6px radius; pill-violet reads as a consumer app, gradient-magenta reads as a creative-tool brand
- Hero UI mockup: Single flat audio progress bar + track list cards — no glassmorphism, no waveform bars, no three-track editor; the product capability is not communicated visually from the first screen
- Accent system: #7C3AED monochrome — no electric magenta/teal duality; the brief's dual-accent gradient (E200C0 × 00E2C0) creates instant visual differentiation from every other audio app
vs
waveform-alcheon.app With Alcheon
Alcheon input6 tokens · 5 sources
--color-bg#06051D
--color-accent#E200C0
--color-teal#00E2C0
--font-headingIBM Plex Serif
--font-bodyDM Sans
--font-monoJetBrains Mono
DNA: descript_com × cron_com × zapier_com × railway_app × midjourney_com
What Alcheon's tokens produced
- Background: #06051D deep navy with grain texture (body::before) — synthesized from descript_com × midjourney_com dark canvas aesthetic; the UI mockup reads as a real audio editor environment, not a landing page placeholder
- Typography: IBM Plex Serif 700 for h1 with italic em in magenta→teal gradient, DM Sans body, JetBrains Mono for technical labels — three-register type system from cron_com × railway_app DNA; heading register signals editorial intelligence, not SaaS utility
- Gradient CTA: linear-gradient(135deg, #E200C0, #00E2C0) on primary button — the brief's --gradient-cta; dual-accent magenta-to-teal creates instant visual differentiation from every other audio app; hover reverses gradient at 250ms transition
- Audio editor mockup: Three CSS track lanes (Host Voice / SFX / Music) with animated waveform bars, glassmorphism AI Suggestions panel, gradient playhead — product capability communicated from the first screen; from the descript_com section blueprint
- Stats bar: Glassmorphism backdrop-blur surface with JetBrains Mono stat values (48K+ creators / 3.2M episodes / 90% time saved / 4.9★) — social proof following zapier_com × cron_com pattern; mono register on stat values adds precision to the social data
02
Features Section
audioedit-generic.app Without Alcheon
No input0 tokens · AI defaults
--color-primary#7C3AED
--color-bg#ffffff
--font-headingInter
--font-bodyInter
--btn-radius9999px
--gradient-ctanone
DNA: none · unguided generation
What the AI chose on its own
- Background: White (#ffffff) — the dark navy canvas from the brief is absent; feature cards on white blend into the most common SaaS template; the dark canvas is where a production-grade audio editor lives
- Typography: Inter only — no three-register type system; category chips use the same font as body text; JetBrains Mono chips for INTELLIGENCE/EDITING/PRODUCTION create a precise taxonomic header for each card group
- Color coding: All chips in #EDE9FE/#7C3AED monochrome — tokens produce three distinct category colors (magenta / teal / violet); single-color chips collapse Intelligence, Editing, and Production into one undifferentiated feature list
- Hover state: translateY(-3px) card lift — token version holds cards in place and deepens box-shadow only; lifting cards creates visual instability in a tool interface that should feel precise and grounded
- Stat rows: Absent — each feature card in the token version closes with a JetBrains Mono precision data row (98.4% accuracy / 23 min / 16 tracks); the without version omits all quantified evidence from the feature presentation
vs
waveform-alcheon.app With Alcheon
Alcheon input6 tokens · 5 sources
--color-bg#06051D
--color-accent#E200C0
--color-teal#00E2C0
--font-headingIBM Plex Serif
--font-bodyDM Sans
--font-monoJetBrains Mono
DNA: descript_com × cron_com × zapier_com × railway_app × midjourney_com
What Alcheon's tokens produced
- Background: #06051D with radial-gradient violet glow (rgba(122,63,241,0.18)) — six feature cards on the deep navy canvas; the tool reads like a production environment, not a landing-page placeholder; synthesized from midjourney_com × descript_com dark-canvas patterns
- Three-register typography: IBM Plex Serif h2 with em gradient, DM Sans body text, JetBrains Mono category chips — from cron_com × railway_app DNA; the heading register declares editorial brand voice; 9px bold JetBrains Mono chips create precise taxonomic labels for each feature group
- Color-coded category system: Magenta (#E200C0) for Intelligence / Teal (#00E2C0) for Editing / Violet (#7A3FF1) for Production — icon wells, chip backgrounds, and stat-row dots each use a distinct token-derived accent; six features are immediately sorted into three experiential domains
- IntersectionObserver stagger: 60ms per card — cards reveal sequentially on scroll, matching descript_com's progressive disclosure pattern; the staggered animation creates narrative momentum through the feature taxonomy
- Stat rows at card base: JetBrains Mono precision data with category-colored dot — 98.4% accuracy / 23 min saved / 16 tracks / −42 dB / 12,000+ tracks / 94.7% chapter accuracy; quantified evidence in the mono technical register anchors every feature claim
03
Pricing Section
audioedit-generic.app/pricing Without Alcheon
No input0 tokens · AI defaults
--color-primary#7C3AED
--color-bg#ffffff
--font-headingInter
--font-bodyInter
--btn-radius9999px
--gradient-ctanone
DNA: none · unguided generation
What the AI chose on its own
- Background: White — pricing tiers on white read as undifferentiated; the deep navy canvas pairs price numbers with the visual weight of a premium creative tool rather than a generic software subscription page
- Typography: Inter 700 for price numbers — the $29 in Inter is a data point; in IBM Plex Serif 700 it is an editorial assertion; JetBrains Mono "/mo" in the token version creates a deliberate type hierarchy between value and unit descriptor
- Featured card: Solid #7C3AED border + background tint — token version uses a 3px linear-gradient(135deg,#E200C0,#00E2C0) ::before top bar; the gradient bar is a brand structural signal vs a generic colored border
- Plan badge: Pill "MOST POPULAR" in solid #7C3AED — token version uses var(--gradient-cta) background with black text on the magenta→teal gradient; the gradient badge is unmistakably Waveform; the indigo pill is any SaaS app
- Billing toggle: Generic gray → indigo checked track — token version uses var(--color-accent) magenta on the checked track; small UI elements like toggle tracks should follow the brand accent, not a borrowed primary
vs
waveform-alcheon.app/pricing With Alcheon
Alcheon input6 tokens · 5 sources
--color-bg#06051D
--color-accent#E200C0
--color-teal#00E2C0
--font-headingIBM Plex Serif
--font-bodyDM Sans
--font-monoJetBrains Mono
DNA: descript_com × cron_com × zapier_com × railway_app × midjourney_com
What Alcheon's tokens produced
- Dark canvas price display: #06051D background with IBM Plex Serif price numbers — the $29 at 3.5rem IBM Plex Serif 700 on dark navy reads as an editorial assertion about value; the canvas makes the pricing table match Waveform's identity as a professional studio tool
- Gradient top bar signature: 3px linear-gradient(135deg, #E200C0, #00E2C0) ::before pseudo-element on the Pro card — the brand's gradient-cta motif applied as a structural marker on the featured plan; the same gradient from CTA buttons becomes architectural emphasis
- JetBrains Mono type hierarchy: IBM Plex Serif for price numbers, JetBrains Mono for "/mo" unit and "SAVE 30%" chip — deliberately contrasting registers; serif sets value as editorial weight, mono sets units/labels as technical precision
- Plan badge: var(--gradient-cta) background with #000 text — black on magenta→teal is a high-contrast brand choice; the gradient badge is unmistakably Waveform, not an interchangeable SaaS "popular" indicator
- Teal check system: Included features use var(--color-teal) (#00E2C0) check icons — the second brand accent converts the feature checklist into a branded component; excluded features use a muted X, creating clean signal/noise contrast across all three plan columns
04
Testimonials Section
audioedit-generic.app Without Alcheon
No input0 tokens · AI defaults
--color-primary#7C3AED
--color-bg#ffffff
--font-headingInter
--font-bodyInter
--btn-radius9999px
--gradient-ctanone
DNA: none · unguided generation
What the AI chose on its own
- Background: #F3F4F6 light gray — a generic section break; the token version uses #111827 dark card surface, creating a dramatic visual pause in Waveform's dark aesthetic flow instead of a lighter interruption
- Layout: 3 equal columns — all testimonials receive identical visual weight; the token version uses an asymmetric 3:2 spotlight grid, elevating the strongest testimonial into a feature position; equal columns signal mechanical rendering, not editorial curation
- Typography: Inter italic quotes — standard blockquote styling that matches any site; IBM Plex Serif italic in the token version elevates customer words to pull-quote authority, matching the editorial register of a podcast production brand
- Quote mark: Solid #7C3AED at 64px — token version renders the decorative quote character in var(--gradient-cta) background-clip text at 120px; the gradient quote mark becomes the section's branded visual anchor, not a typographic convention
- Attribution: Plain Inter text — token version uses JetBrains Mono uppercase for role · show attribution with the listener count in var(--color-teal); the mono register anchors the author's name to verifiable, quantified credentials
vs
waveform-alcheon.app With Alcheon
Alcheon input6 tokens · 5 sources
--color-bg#06051D
--color-accent#E200C0
--color-teal#00E2C0
--font-headingIBM Plex Serif
--font-bodyDM Sans
--font-monoJetBrains Mono
DNA: descript_com × cron_com × zapier_com × railway_app × midjourney_com
What Alcheon's tokens produced
- Background: #111827 section alt surface — testimonial cards sit on the deeper card layer; contrast with #06051D page background creates a section break using depth rather than a contradictory hue; synthesized from descript_com's content block pattern
- Asymmetric spotlight layout: 3fr × 2 rows + 2fr 2-stacked — the strongest testimonial (80% time saved) receives a full-height feature position via grid-row: 1/3; the asymmetry signals editorial curation rather than mechanical rendering of equal testimonials
- IBM Plex Serif italic quotes: 1.25rem spotlight / 1rem stacked — the serif italic register elevates customer words to pull-quote authority; the 120px decorative quote mark in var(--gradient-cta) background-clip text becomes the section's visual anchor
- JetBrains Mono attribution: Uppercase role · show name with listener count in var(--color-teal) — the mono register treats the podcaster's credentials as precision data labels; the teal count adds quantified reach signal without disrupting card hierarchy
- Card hover: border-color rgba(226,0,192,0.2) + box-shadow deepening — cards acknowledge interaction without moving; the accent border-color on hover is Waveform's magenta applied as a hover convention, maintaining accent coherence across all interactive states
05
CTA Section
audioedit-generic.app Without Alcheon
No input0 tokens · AI defaults
--color-primary#7C3AED
--color-bg#ffffff
--font-headingInter
--font-bodyInter
--btn-radius9999px
--gradient-ctanone
DNA: none · unguided generation
What the AI chose on its own
- Background: #F9FAFB light gray — the highest-intent section in the product has the lowest energy background; no radial glow, no depth, no visual momentum toward the action being asked of the user
- Typography: Inter 700, "Start your free trial" — the most common CTA heading construction on the web; communicates nothing about Waveform's identity; the token heading in IBM Plex Serif — "Start editing like a professional." — is a brand voice statement
- CTA button: Pill 9999px in solid #7C3AED — the brief's signature gradient-cta (magenta→teal) absent from the most conversion-critical element; the pile indigo button is indistinguishable from a thousand other B2B SaaS CTAs
- Input border-radius: Pill — the token version uses var(--btn-radius) 8px on both the email input and button; the matching rectangle radius signals a tool interface; mismatched pill input + pill button signals a consumer subscription form
- Fine print: Italic gray Inter — token version uses JetBrains Mono 10px uppercase: "14-DAY FREE TRIAL · NO CREDIT CARD · CANCEL ANYTIME"; the mono register reads these as technical guarantees, not marketing-department reassurances
vs
waveform-alcheon.app With Alcheon
Alcheon input6 tokens · 5 sources
--color-bg#06051D
--color-accent#E200C0
--color-teal#00E2C0
--font-headingIBM Plex Serif
--font-bodyDM Sans
--font-monoJetBrains Mono
DNA: descript_com × cron_com × zapier_com × railway_app × midjourney_com
What Alcheon's tokens produced
- Background: #06051D with dual radial-gradient glow — rgba(226,0,192,0.12) magenta + rgba(0,226,192,0.06) teal at 50% 50%; the centered glow creates a product spotlight effect from midjourney_com × descript_com dark-canvas CTA patterns; the section's visual energy matches the conversion intent
- IBM Plex Serif heading: "Start editing like a professional." with em gradient — italic emphasis on "a professional." is an aspirational brand voice statement in the editorial serif register; the gradient em is the same motif used on hero and features headings, creating cross-section consistency
- Trust row: JetBrains Mono stat values (48K+ / 3.2M / 90% / 4.9★) with gradient-cta text fill — reusing the hero stats with gradient text fill transforms them into a cross-section brand motif; stats flow from hero data to conversion-section conviction
- Focus ring: rgba(226,0,192,0.18) box-shadow on email input focus — the input's focus state uses var(--color-accent) rather than browser-default blue; a focused input field becomes branded at the precise moment of user decision-making
- Fine print: JetBrains Mono 10px uppercase letter-spaced — "14-DAY FREE TRIAL · NO CREDIT CARD · CANCEL ANYTIME" in the technical register reads as product guarantees backed by precision engineering, not marketing copy tucked below a button
06
Empty State
app.audioedit-generic.app Without Alcheon
No input0 tokens · AI defaults
--color-primary#7C3AED
--color-bg#ffffff
--font-headingInter
--font-bodyInter
--btn-radius9999px
--gradient-ctanone
DNA: none · unguided generation
What the AI chose on its own
- App shell: White sidebar + white main area — no visual hierarchy between sidebar and main canvas; the token version creates three distinct depth layers (#06051D main / #0C0B27 sidebar / backdrop-blur topbar) from railway_app × descript_com product UI DNA
- Empty state icon: Generic folder SVG with #EDE9FE background — communicates "file system," not "audio editor"; the token version fills the background with 25 waveform bars in the gradient-cta at 0.04 opacity; the product metaphor is present before any text is read
- Heading: "No projects yet" in Inter — functional and unbranded; token version uses IBM Plex Serif "Your studio is waiting." — the possessive serif registers the empty state as a product voice moment; the period is a declarative statement, not an error condition
- Active sidebar state: #EDE9FE background + #7C3AED text on active nav item — serviceable but generic; token version uses rgba(226,0,192,0.1) background + 3px left border in var(--color-accent); the accent bar carries the brand's architectural convention into the application chrome
- CTA button: Pill #7C3AED primary — the application's first user action in generic solid indigo; token version carries the gradient-cta to signal that "New project" is the product's primary intended action from first launch
vs
app.waveform-alcheon.app With Alcheon
Alcheon input6 tokens · 5 sources
--color-bg#06051D
--color-accent#E200C0
--color-teal#00E2C0
--font-headingIBM Plex Serif
--font-bodyDM Sans
--font-monoJetBrains Mono
DNA: descript_com × cron_com × zapier_com × railway_app × midjourney_com
What Alcheon's tokens produced
- App shell depth: #06051D main / #0C0B27 sidebar / rgba(6,5,29,0.9) backdrop-blur topbar — three distinct dark depths create a real application hierarchy; synthesized from railway_app × descript_com product chrome patterns; the tool signals professional environment on first render
- Waveform SVG texture: 25 bars in linear-gradient(to top, #E200C0, #00E2C0) at 0.04 opacity — the background illustration is made from the product's core metaphor (waveform) using the dual-accent gradient; the product tells you what it is before any text is read
- JetBrains Mono status chip: "PROJECT · EMPTY" at badge-radius 4px with rgba(226,0,192,0.1) background — the chip reads as a machine-generated status indicator from inside the product; the dot-separator format mirrors the mono attribution format used in testimonials and the fine print in CTA
- IBM Plex Serif heading: "Your studio is waiting." — the possessive serif creates emotional connection in the empty state; the period makes it a declarative statement, not an error condition; from descript_com's DNA which frames the editor as a creative space, not a utility that's missing content
- Actions hierarchy: gradient-cta primary ("New project") + ghost secondary ("Browse templates") — in the dark application context, the gradient-cta primary button is unmistakably the brand's intended first action; the ghost secondary uses rgba border that matches the dark surface's border convention
The Brief
Meridian
An AI-powered legal contract operations platform for in-house legal teams at scaling B2B companies. Intelligent contract review, risk surface extraction, clause negotiation tracking, and deadline automation. Authoritative editorial aesthetic — The Economist crossed with a modern developer tool.
Design DNA from anthropic_com metalab_com mobbin_com admiretheweb_com muz_li
01
Hero Section
legalops-generic.app Without Alcheon
No input0 tokens · AI defaults
--color-primary#7C3AED
--color-bg#ffffff
--font-headingInter
--font-bodyInter
--btn-radius9999px
--gradient-ctanone
DNA: none · unguided generation
What the AI chose on its own
- Background: White (#ffffff) — the brief's #F0EEE6 warm cream parchment is absent; white reads as a generic SaaS homepage, while cream signals the editorial authority of a publication-grade legal intelligence tool
- Typography: Inter only — no Spectral serif for headings, no JetBrains Mono for contract references; a single font register collapses Meridian's three-tier editorial voice (authoritative / readable / precise) into generic utility prose
- Buttons: Pill-radius (9999px) in solid #7C3AED — the brief specifies 8px-radius buttons in #2E54FF; pill-violet reads as a consumer mobile app, 8px-radius electric blue reads as a precise, purposeful legal tool
- Hero layout: Center-aligned single column with simple contract list widget — Meridian's token version uses a two-column split with an active contract review card showing real risk scores (#7.8), risk chips (HIGH/MEDIUM/LOW), and JetBrains Mono deadline callouts; the product's intelligence is absent from the first screen
- Accent system: Generic #7C3AED indigo — no #2E54FF electric blue; indigo is the default SaaS accent; electric blue on cream parchment creates the unmistakable Meridian visual signature
vs
meridian-alcheon.app With Alcheon
Alcheon input7 tokens · 5 sources
--color-bg#F0EEE6
--color-primary#2E54FF
--color-card#FFFFFF
--font-headingSpectral (serif)
--font-bodyInter
--font-monoJetBrains Mono
--btn-radius8px
DNA: anthropic_com × metalab_com × mobbin_com × admiretheweb_com × muz_li
What Alcheon's tokens produced
- Background: #F0EEE6 warm cream parchment — synthesized from anthropic_com × admiretheweb_com editorial surface patterns; every other brand in this comparison uses white or dark; cream is immediately and exclusively Meridian's visual identity
- Three-register typography: Spectral serif 700 for h1 with italic em ("Review. Redline. Resolve."), Inter for sub-text, JetBrains Mono for contract refs and stat labels — from metalab_com × mobbin_com DNA; Spectral headings signal legal editorial authority, not SaaS productivity
- Contract review mockup: White card on cream with risk score "7.8/10" in #2E54FF, three risk chip rows (HIGH #ff6060 / MEDIUM #F59E0B / LOW #10B981), JetBrains Mono "RENEWS IN 47 DAYS" deadline callout, and a progress bar — product intelligence is present from the first screen
- 8px-radius CTA: #2E54FF electric blue button with precisely 8px radius — from admiretheweb_com precision button patterns; the radius communicates trust and exactness, matching the precision of a legal risk score; pill buttons belong to consumer apps, not legal software
- Floating context card: "$2.4M across 14 open agreements" in Spectral serif — a portfolio-scale number that makes the platform's business consequence concrete; synthesized from muz_li data visualization patterns; the card anchors product value with a CFO-legible metric
02
Features Section
legalops-generic.app/features Without Alcheon
No input0 tokens · AI defaults
--color-primary#7C3AED
--color-bg#F9FAFB
--font-headingInter
--font-bodyInter
--btn-radius9999px
--gradient-ctanone
DNA: none · unguided generation
What the AI chose on its own
- Background: Light gray (#F9FAFB) — cards on gray-white is the most common SaaS feature grid pattern; the token version's cream #F0EEE6 with white cards creates an editorial contrast that signals publication-quality design intelligence
- Typography: Inter only — without Spectral for h2 headings, the feature section shares the same font weight and character width as the body text; Spectral 700 at the section heading creates a visual anchor that readers of The Economist instinctively trust
- Category chips: All chips in identical #F5F3FF / #7C3AED indigo — tokens produce four distinct category colors (INTELLIGENCE blue / NEGOTIATION violet / AUTOMATION sky / WORKFLOW green); single-color chips collapse six features from three domains into one undifferentiated list
- Card top accent bar: Absent — each token-version card has a per-category colored 3px ::before top bar (blue / violet / sky / green); the bar provides immediate scannable categorization before the user reads the chip label
- Precision stat rows: Plain text beneath each feature — token version renders "99.2% clause accuracy" and "340+ event types tracked" in JetBrains Mono bold; quantified evidence in the mono technical register converts feature claims into verifiable data points
vs
meridian-alcheon.app/features With Alcheon
Alcheon input7 tokens · 5 sources
--color-bg#F0EEE6
--color-primary#2E54FF
--color-card#FFFFFF
--font-headingSpectral (serif)
--font-bodyInter
--font-monoJetBrains Mono
--card-radius12px
DNA: anthropic_com × metalab_com × mobbin_com × admiretheweb_com × muz_li
What Alcheon's tokens produced
- Background: #F0EEE6 cream with #FFFFFF cards — synthesized from anthropic_com × admiretheweb_com editorial surface patterns; white cards on warm cream create stronger contrast than cards on #F9FAFB; the editorial surface tells the eye "this is a different kind of software"
- Spectral h2 heading: "Every contract, accounted for." in Spectral 700, letter-spacing -0.02em — from metalab_com × admiretheweb_com heading patterns; a serif heading on a feature grid positions the product in editorial authority territory rather than generic SaaS utility
- Four-color category system: INTELLIGENCE (#2E54FF blue) / NEGOTIATION (#533AFD violet) / AUTOMATION (#0EA5E9 sky) / WORKFLOW (#10B981 green) — each chip, card top bar, and icon well carries the category color; users can scan the feature taxonomy at a glance across six cards
- Card hover interaction: translateY(-2px) + box-shadow deepens to rgba(0,0,0,0.08) — from mobbin_com card interaction patterns; the restrained 2px lift matches the brief's precision emphasis; no bounce, no exaggerated Z-axis travel; legal software should feel grounded
- JetBrains Mono stat rows: "99.2% clause detection accuracy" / "Tracks 12 negotiation dimensions" / "340+ contract event types tracked" in bold mono — quantified evidence that is visually distinct from feature prose; the mono register communicates that these numbers are measured, not estimated
03
Pricing Section
legalops-generic.app/pricing Without Alcheon
No input0 tokens · AI defaults
--color-primary#7C3AED
--color-bg#ffffff
--font-headingInter
--font-bodyInter
--btn-radius9999px
--gradient-ctanone
DNA: none · unguided generation
What the AI chose on its own
- Background: White with featured plan in solid #7C3AED — indigo-filled card on white is the most common SaaS pricing pattern; the token version's cream background with a 3px #2E54FF ::before top bar on the featured plan is subtler, more precise, and immediately legible as a legal product
- Price typography: Inter 800 for price numerals — "$149" in Inter is a retail price tag; in Spectral 700 with JetBrains Mono "/mo" unit it is an editorial assertion; the type hierarchy deliberates the price as a considered investment rather than a commodity subscription
- Featured card CTA: Pill-radius "Start free trial" in solid #7C3AED — token version uses linear-gradient(135deg, #1a1a2e, #533AFD) on an 8px-radius button; the gradient CTA is structurally distinguished from the ghost buttons and carries the brand's deep navy-to-indigo authority
- Annual badge: Generic green pill "Save 20%" — token version uses a JetBrains Mono 9px bold uppercase chip with 4px radius; the mono badge reads as a precise, system-generated callout rather than a marketing label; legal buyers trust precision over promotion
- Plan name typography: Inter 700 plan names — token version uses Spectral 700 for plan names; Spectral "Professional" carries editorial weight that Inter "Professional" does not; plan naming in a legal tool is a brand assertion, not a UI label
vs
meridian-alcheon.app/pricing With Alcheon
Alcheon input7 tokens · 5 sources
--color-bg#F0EEE6
--color-primary#2E54FF
--font-headingSpectral (serif)
--font-monoJetBrains Mono
--gradient-ctalinear-gradient(135deg,#1a1a2e,#533AFD)
--btn-radius8px
--badge-radius4px
DNA: anthropic_com × metalab_com × mobbin_com × admiretheweb_com × muz_li
What Alcheon's tokens produced
- Background: #F0EEE6 cream — the parchment surface transforms the pricing section from a purchase decision into an editorial statement; cream-on-card contrast is softer and more considered than white-on-white; synthesized from anthropic_com × admiretheweb_com surface patterns
- Spectral price numerals: "$149" in Spectral 700 with JetBrains Mono "/mo" unit — three-register hierarchy applied to pricing; Spectral carries the weight of a deliberate editorial assertion; JetBrains Mono signals that the unit is a measured system label; from metalab_com × mobbin_com data hierarchy DNA
- Gradient CTA button: linear-gradient(135deg, #1a1a2e, #533AFD) on 8px-radius "Start 14-day free trial" — the --gradient-cta token applied to the highest-value CTA; deep navy-to-indigo gradient is structurally distinct from any other element on the page; impossible to miss, impossible to mistake for another brand
- JetBrains Mono "Most popular" chip: 9px bold uppercase with 4px badge-radius — vs a indigo pill badge; the mono chip reads as a system-generated classification rather than a marketing label; legal buyers respond to precision; the 4px radius from the brief's --badge-radius token is applied consistently across all chips on the page
- Annual toggle: Blue #2E54FF active track vs gray inactive — the billing toggle uses the primary accent consistently; the "Save 20%" chip uses the same 4px badge-radius and JetBrains Mono as all other system chips; every token in the brief is expressed across every UI element, not just the hero
04
Testimonials Section
legalops-generic.app Without Alcheon
No input0 tokens · AI defaults
--color-primary#7C3AED
--color-bg#F3F4F6
--font-headingInter
--font-bodyInter
--btn-radius9999px
--gradient-ctanone
DNA: none · unguided generation
What the AI chose on its own
- Layout: Symmetric 3-column grid — equal weight to all three testimonials misses the opportunity for an editorial hierarchy; the token version uses an asymmetric spotlight grid (1 large + 2 stacked) that draws the eye to the highest-value quote first
- Quote typography: Inter at 15px — a legal testimonial quoting "$240K in exposure" and "3× more contracts" deserves Spectral italic; Spectral italic for pull-quotes creates conviction that Inter at any size cannot replicate
- Background: #F3F4F6 gray — the token version uses #FAf9f5 (--section-alt-bg), a slightly warm off-white that sits between cream and white; the warmth of the surface makes the quote text feel considered rather than clinical
- Quote highlight: Absent — token version wraps "$240K in exposure" and "3× more contracts" in a #2E54FF left-border highlight block (background: rgba(46,84,255,0.08)); the highlight creates scannable visual evidence of ROI without requiring the user to read the full quote
- Attribution: Inter 14px name + 12px muted role — token version uses Inter 600 for name and JetBrains Mono 10px bold uppercase for title/company; the role in mono creates precision attribution that matches the product's data-rich identity
vs
meridian-alcheon.app With Alcheon
Alcheon input7 tokens · 5 sources
--section-alt-bg#FAf9f5
--color-primary#2E54FF
--color-card#FFFFFF
--font-headingSpectral (serif)
--font-bodyInter
--font-monoJetBrains Mono
--card-radius12px
DNA: anthropic_com × metalab_com × mobbin_com × admiretheweb_com × muz_li
What Alcheon's tokens produced
- Asymmetric spotlight grid: One large card spanning two rows on the left + two smaller cards stacked on the right — from admiretheweb_com × metalab_com editorial grid DNA; the Sarah Mitchell quote about "$240K in exposure" leads visually before the other two; hierarchy is an editorial argument, not just aesthetic preference
- Spectral italic quotes: "Meridian found a liability clause…" in Spectral italic 1.4rem — the brief specified Spectral for pull-quote moments; at the testimonial scale, italic serif creates the voice of a credible witness; Inter at the same size reads as a copied review
- Blue inline highlight blocks: Key metrics wrapped in rgba(46,84,255,0.08) background with 2px #2E54FF left border — "$240K in exposure" and "3× more contracts" are visually extractable without reading the full quote; from anthropic_com evidence-surfacing patterns; the highlight is the skim-layer of the testimonial
- Large quotation mark: Spectral 8rem opening " in #2E54FF at 25% opacity — from admiretheweb_com decorative typographic patterns; the oversize glyph positions the quote as an editorial statement; it is purely typographic, zero imagery, consistent with the brief's stock_photography avoidance constraint
- JetBrains Mono attribution: "GENERAL COUNSEL · LATTICE" in 10px mono uppercase letter-spacing 0.06em — from mobbin_com attribution chip patterns; the mono register on attribution signals that the person and company are a precise data point, not a decorative social proof name
05
CTA Section
legalops-generic.app Without Alcheon
No input0 tokens · AI defaults
--color-primary#7C3AED
--color-bg#F9FAFB
--font-headingInter
--font-bodyInter
--btn-radius9999px
--gradient-ctanone
DNA: none · unguided generation
What the AI chose on its own
- Background: Light gray #F9FAFB — the brief's --gradient-cta (linear-gradient(135deg, #1a1a2e, #533AFD)) is absent; a gray CTA section blends into the page and signals the end of content; the deep navy-to-indigo gradient creates a visual terminus that commands action
- Heading: Inter 800 "Start managing contracts smarter." — the brief specifies Spectral serif for the CTA heading; "Join 200+ legal teams that close faster." in Spectral italic is an editorial statement that closes the narrative arc; Inter renders it as a generic SaaS signoff
- Input field: Pill-radius rounded input — the brief specifies 8px-radius inputs with a #2E54FF focus ring; pill inputs belong to search bars and consumer forms; an 8px-radius input with a precise focus ring reads as a professional enterprise data entry interaction
- Fine print: "Free for 14 days. No credit card required." in italic Inter 12px — token version uses JetBrains Mono 9px bold uppercase "14-DAY FREE TRIAL · SOC 2 TYPE II · CANCEL ANYTIME"; the mono fine print reads as a system specification, not a marketing reassurance; legal buyers respond to specification language
- Stats row: Plain Inter stat numbers — token version uses Spectral serif for the large stat values (200+ / 73% / 340+ / 99.2%) with JetBrains Mono uppercase stat labels below; the Spectral numerals carry the editorial weight of a legal document's exhibit row
vs
meridian-alcheon.app With Alcheon
Alcheon input7 tokens · 5 sources
--gradient-ctalinear-gradient(135deg,#1a1a2e,#533AFD)
--color-primary#2E54FF
--font-headingSpectral (serif)
--font-monoJetBrains Mono
--btn-radius8px
--badge-radius4px
--color-foreground#141414
DNA: anthropic_com × metalab_com × mobbin_com × admiretheweb_com × muz_li
What Alcheon's tokens produced
- Gradient background: linear-gradient(135deg, #1a1a2e, #533AFD) — the --gradient-cta token applied to the full section background; deep navy flows to indigo at 135°; the gradient is structurally distinguished from every other section on the page; this is the only place --gradient-cta appears, which makes it the definitive brand moment of the entire journey
- Spectral italic heading: "Join 200+ legal teams that close faster." in Spectral 700 italic em at clamp(2rem,5vw,3.2rem) — from admiretheweb_com × metalab_com editorial heading patterns; the italic serif on a dark gradient creates the visual weight of a legal brief's ruling heading; the em italic is deliberate typographic punctuation
- 8px-radius input with focus ring: rgba(255,255,255,0.08) background with rgba(255,255,255,0.2) border, focus state → border rgba(255,255,255,0.5) — from anthropic_com precise form input patterns; the glass-effect input on gradient background is enterprise-grade; the 8px radius matches --btn-radius exactly, creating consistent form-language across the page
- JetBrains Mono fine print: "14-DAY FREE TRIAL · SOC 2 TYPE II · CANCEL ANYTIME" in 9px bold uppercase letter-spacing 0.12em — from mobbin_com app specification chip patterns; the mono fine print reads as a system contract, not marketing copy; "SOC 2 TYPE II" in mono caps is the single most credible trust signal in legal SaaS
- Stats row: Spectral 2.2rem stat values with #7B9FFF light-blue numerals and JetBrains Mono labels below a token-derived border — the stats are visually weighted as editorial conclusions, not just social proof numbers; the blue numeral tint on the dark gradient maintains the #2E54FF accent hierarchy across the entire section
06
Empty State
legalops-generic.app/contracts Without Alcheon
No input0 tokens · AI defaults
--color-primary#7C3AED
--color-bg#ffffff
--font-headingInter
--font-bodyInter
--btn-radius9999px
--gradient-ctanone
DNA: none · unguided generation
What the AI chose on its own
- App shell surfaces: All-white sidebar + all-white main area — the token version uses white sidebar (#FFFFFF) + cream main area (#F0EEE6) + dark topbar (#141413); three distinct surface levels communicate information hierarchy in the app chrome before any content is present
- Empty state heading: "No contracts yet" in Inter 700 — a functional state label, not a brand moment; "Your contract library is ready." in Spectral 700 reframes the empty state as a brand promise; the Spectral heading answers: what kind of product is this?
- State identifier chip: Absent — token version shows "CONTRACT LIBRARY · EMPTY" in JetBrains Mono 9px bold uppercase with 4px badge-radius; the mono chip identifies the state with the precision of a system log entry; the user knows exactly where they are in the app's information architecture
- Illustration approach: Indigo folder icon (32px) in an #EDE9FE rounded square — token version uses a large SVG document outline at 15% opacity with animated circular upload indicator, sized at 160×160; the low-opacity illustration fills the empty state area with contextual structure without occupying cognitive foreground
- CTA buttons: Pill "Upload contract" in solid #7C3AED + pill "Browse templates" outlined — token version uses 8px-radius "Upload contract" in #2E54FF + 8px-radius ghost; the consistent --btn-radius across both buttons maintains the brand's precision language inside the product, not just on the marketing site
vs
meridian-alcheon.app/contracts With Alcheon
Alcheon input7 tokens · 5 sources
--color-bg#F0EEE6 (main area)
--color-card#FFFFFF (sidebar)
--topbar-bg#141413 (topbar)
--color-primary#2E54FF
--font-headingSpectral (serif)
--font-monoJetBrains Mono
--badge-radius4px
DNA: anthropic_com × metalab_com × mobbin_com × admiretheweb_com × muz_li
What Alcheon's tokens produced
- Three-surface app shell: Dark topbar (#141413) + white sidebar (#FFFFFF) + cream main area (#F0EEE6) — all three surface colors from the Meridian token set applied to the app chrome; the hierarchy communicates primary navigation (dark) → secondary navigation (white) → content canvas (cream) before any data is present
- Dark topbar navigation: Spectral "Meridian" logo in white + JetBrains Mono "LEGAL OPS PLATFORM" label in rgba(255,255,255,0.45) + avatar — from anthropic_com × mobbin_com app topbar patterns; the dark bar grounds the product in enterprise infrastructure; the Spectral logo maintains brand continuity from marketing to product
- JetBrains Mono state chip: "CONTRACT LIBRARY · EMPTY" with 4px badge-radius and dot — synthesized from mobbin_com app state chip patterns; the chip communicates the application state with the precision of a terminal log entry; no emoji, no illustration-dependent copy; system language for a systems-oriented buyer
- Spectral empty state heading: "Your contract library is ready." — a brand promise framed in the product's editorial voice; "ready" is a deliberate reframe: the library is a pre-built environment waiting for work, not a blank slate waiting for setup; Spectral 700 delivers the promise with editorial conviction
- Sidebar navigation system: JetBrains Mono 9px uppercase section labels ("WORKSPACE" / "INTELLIGENCE") + Inter 13px nav items with active state in rgba(46,84,255,0.07) background + #2E54FF text — from metalab_com × admiretheweb_com sidebar navigation patterns; the sidebar architecture makes intelligence a first-class section alongside the contract library
Give Your AI
Real Design Intelligence
Stop getting generic defaults. Start building interfaces with design DNA from the world's best websites.