# graphicalui.com

Source: https://www.graphicalui.com/
Captured: 2026-10-07
Tags: saas, landing, light, both, minimal, calm, confident, technical, friendly, premium
Colors: #ffffff, #909090, #afafaf, #d1d1d1, #737373, #4e4e4e, #2d2d2d, #acaffc
Type (h1): GT Standard L · 48px/64px · 500 · tracking -0.024px — "A tool to create visual themes , customize colors , and build interfaces with Ch"
Type (h2): GT Standard L · 48px/64px · 500 · tracking -0.024px — "Create your theme in Graphical"
Type (h3): Timeless Grotesk · 24px/32px · 500 — "Bugs & technical issues"
Type (body): GT Standard L · 20px/32px · 400 — "Select a highlighted word to explore another option."
Type (small): -apple-system · 12px/20px · 500 — "my-app — zsh"
Type (button): Timeless Grotesk · 14px/20px · 500 — "Week"
Button: "Week" — fill #faf8f7, text #46433f, radius 12px, border 0px, padding 12px 12px, height 31px, type 14px/500
Radii: 999px (9), 12px (7), 14.451px (7), 6px (5), 23.1215px (4)

## Images

- Hero (desktop): https://media.lvly.design/library/graphicalui-com/hero.webp?v=fca66bea
- Page crop (mid-1): https://media.lvly.design/library/graphicalui-com/mid-1.webp?v=7b0d722c
- Page crop (mid-2): https://media.lvly.design/library/graphicalui-com/mid-2.webp?v=f17c3284
- Hero (mobile): https://media.lvly.design/library/graphicalui-com/mobile-hero.webp?v=1c8ada4a
- Full page (desktop): https://media.lvly.design/library/graphicalui-com/full.jpg?v=283a9c69
- Full page (mobile): https://media.lvly.design/library/graphicalui-com/mobile-full.jpg?v=01aa5b55
- Clip preview (mp4): https://media.lvly.design/library/graphicalui-com/video-4caasl.preview.mp4?v=f8723f65

A near-silent white page for a theming tool aimed at coding agents. It opens with almost nothing: a thick-stroked pill wordmark and one three-line sentence in GT Standard 48/64 at weight 500, where the nouns sit inside soft gray chips with colorful 3D icons. There is no nav except a pale gray "Login". After that, the page alternates centered 48px headlines with large product artifacts: a theme-editor collage, a black macOS terminal with lavender ASCII art, and an app window mock. Each artifact floats on a wide, very diffuse shadow. Color is rationed: the chrome stays white and #909090–#2d2d2d grays, and hue comes only from the product shots and one periwinkle (#acaffc) thread. A single black pricing slab breaks the white near the end. The footer is a fanned spill of tilted UI cards.

## Steal-worthy details

- The wordmark is a thick-outlined stadium pill: a bold grotesk inside a ~6px black stroke, radius 999px, centered as the hero's only graphic. It works as logo, badge and visual anchor in one, with no illustration needed
- Inline icon chips in the headline: key nouns ("themes", "colors", "ChatGPT") sit in #f0f0f0 pill backgrounds with a small glossy 3D icon on the left, running with the text. The hero sentence reads as a list of features without becoming one
- The header is one gray "Login" link at the top right in #909090, with no logo bar, no menu and no CTA. The hero wordmark does the branding
- A handwritten "try it out" scribble with an arrow sits beside a centered section title and points at the interactive editor. One human mark on an otherwise clinical page
- Product artifacts float on one huge, soft drop shadow (roughly 0 40px 80px rgba(0,0,0,.12)) instead of a border. The black terminal and the white app window lift off the white page the same way
- The terminal is the install proof: a real-looking zsh window with ASCII-art branding in lavender, teal file names and a blinking block cursor. It shows the developer workflow instead of describing it
- The feature grid uses only line icons and type: a 2-column list with 1.5px-stroke icons, a 20px #111 title, and #909090 body at 20/32, with no cards at all
- A three-up card row is split by hairlines inside one 24px-radius outlined container, a single box with internal dividers rather than three separate cards
- The pricing slab is the page's only black surface: a near-black rounded panel with a white pill button reading "Buy for $49" and a struck-through "$99" in gray. The scheme flip marks the one decision point
- The footer shows a fanned collage of tilted UI cards bleeding off both edges. It ends the page on product variety instead of a link farm

## Style recipe

Build on pure white (#ffffff, with #f7f7f7 for subtle wells) and a strict gray ramp: #111/#2d2d2d for headlines, #4e4e4e for strong body, #909090 for secondary body and nav, #d1d1d1 for hairlines. Set everything in one neutral grotesk (GT Standard, or Inter/Söhne as a fallback). Use 48/64 at weight 500 with -0.02px tracking for section headlines, always centered and two lines max, and 20/32 at weight 400 for body. Allow almost no hue in the chrome. Keep color for product imagery and one soft periwinkle accent (#acaffc) used in code tints, small highlights and glows. Make the logo a bold word inside a thick black stadium outline (radius 999px). Turn key nouns in headlines into inline chips: #f0f0f0 pill, 0.15em padding, a small glossy icon on the left. Leave out the nav bar and use a single gray text link at the top right. Show product as floating artifacts (terminal windows, app windows, editor panels) with no border and one very diffuse shadow, about 0 40px 80px rgba(0,0,0,.12). Use radius 12px for controls, 14–24px for panels and 999px for pills. Present features as cardless line-icon lists (1.5px stroke, ~28px) or as one outlined 24px-radius container split by 1px hairlines. Spend black (#111) on exactly one surface, the purchase panel, with a white pill CTA inside. Space sections 200px+ apart and let whitespace carry the pacing. Add at most one handwritten annotation for warmth.