feat: redesign marketing site on the console + docs design system#18
Merged
Conversation
…gn system Rebuild the website to share the Deploys.app console + docs visual identity: magenta "signal" primary on console Ink (dark) / Paper (light) surfaces, Hanken Grotesk + JetBrains Mono, hairline borders, soft shadows, and the blueprint-grid texture, with a full light/dark theme toggle. - New semantic SCSS system (theme → reset → base → layout → components → content → home); drops the old atomic-ish component/ + function/ trees. - Ink sticky navbar with brand mark, theme toggle, and a pure-CSS mobile menu. - Homepage: Ink hero with a signature pure-CSS console-dashboard preview, feature card grid, quickstart terminal, solutions splits, regions band, the live billing.skus pricing table restyled, and an Ink CTA + footer. - Self-contained inline Lucide icon partial (replaces the Font Awesome SVG files); privacy page restyled with a page-hero + .prose. - Pre-paint theme script + minimal JS (theme toggle, mobile menu) in partials. - Refresh CLAUDE.md to document the new architecture; trim stale _headers paths. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
Preview deleted (PR closed). |
Replace the magenta-tile + rocket brand mark with the actual product logo (the gradient "D"), copied from the console repo (static/images/logo.*). Shared `brand.html` partial renders logo + wordmark for the navbar and footer via a <picture> (webp + png). The favicon was already the product mark (matches console). Re-add the /image/* immutable cache header for the fingerprinted logo. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Feature/solution tile icons (.card-icon, .feature-icon) drove their glyph color from --color-primary-600, which dark mode brightens to 72% L — hotter than the console, whose brand-tinted icons use the signal magenta hsl(336 86% 60%). Add a scoped --color-icon-brand token (primary-600 on Paper, hsl(336 86% 60%) on Ink) so the icons read the same as the console without changing primary-600 itself (still used for button fills / emphasis text on Ink). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Redesign the marketing site from scratch on the console + docs design system
A ground-up rebuild of the website so it reads as the front door of the same product as the console and docs — same magenta "signal" identity, console Ink (dark) / Paper (light) surfaces, Hanken Grotesk + JetBrains Mono, hairline-defined panels, soft shadows, and the blueprint-grid texture, with a full light/dark theme toggle.
Hero — light / dark
The hero art is a pure-CSS/HTML faux console dashboard (chrome, sidebar, stat tiles, a deployment table with status pills and inline-SVG sparklines) — no screenshot image, so it stays crisp and theme-aware.
Full page — light / dark
Pricing (live
billing.skus) & mobileWhat changed
theme → reset → base → layout → components → content → home. Drops the old atomic-ishcomponent/+function/trees and the stock photography._theme.scss), incl.html.darkoverrides; light is the default. Sections that stay dark in both themes use.u-grid-ink+ inverse content tokens (hero, regions, CTA).billing.skuspricing table restyled as an instrument panel, Ink CTA + real footer.{{ partial "icon" "rocket" }}), replacing the Font Awesome SVG files..prose.<html class="dark">script (no flash) + minimal JS (theme toggle, mobile menu) in partials.CLAUDE.md; trimmed stalestatic/_headerspaths.Notes
resources.GetRemote "https://api.deploys.app/billing.skus"— a build needs network access toapi.deploys.app. Verified figures render (CPU ฿1,555.20/mo, Allocated Memory ฿181.44/mo, …).hugobuild is clean (no errors/warnings).🤖 Generated with Claude Code
Follow-ups (in this branch)
Product logo in the brand lockup — replaced the magenta-tile + rocket mark with the actual product logo (the gradient "D"), copied from the console repo. A shared
brand.htmlpartial renders logo + wordmark (<picture>webp+png) in the navbar and footer. The favicon was already the product mark (byte-identical to console).Dark-theme icon color matched to the console — the console drives brand-tinted icons from its signal magenta
hsl(336 86% 60%), but the feature tile icons used the brightenedprimary-600(72% L) in dark mode. Added a scoped--color-icon-brandtoken (primary-600on Paper,hsl(336 86% 60%)on Ink) so the icons read the same as the console — without changingprimary-600itself (still used for button fills / emphasis text). Verified via a cross-repo icon-color audit; light mode is unchanged.