# videorc.com

Source: https://www.videorc.com/
Captured: 2026-10-09
Tags: saas, landing, dark, both, dark-techno, minimal, technical, confident, edgy, serious
Colors: #131317, #2f2f32, #4c4c4f, #f6f6f7, #6e6d70, #aeaeb0, #cececf, #8f8f91
Type (h1): -apple-system · 84px/85.68px · 500 · tracking -2.1px — "The future of video starts here."
Type (h2): -apple-system · 52px/54.6px · 500 · tracking -1.3px — "Everything you need in one window"
Type (h3): -apple-system · 36px/40px · 500 · tracking -0.9px — "Record locally for free"
Type (body): -apple-system · 16px/26px · 400 — "Record your screen, camera, and mic, then go live on 6+ platforms at once, free."
Type (small): -apple-system · 13px/13px · 500 — "492"
Type (button): -apple-system · 14px/20px · 500 — "Download"
Button: "Download" — fill #f5f5f6, text #18181b, radius 9999px, border 0px, padding 0px 24px, height 52px, type 14px/500
Radii: 9999px (31), 24px (23), 18px (7), 8px (7), 4px (4)

## Images

- Hero (desktop): https://media.lvly.design/library/videorc-com/hero.webp?v=f8ee6fda
- Page crop (mid-1): https://media.lvly.design/library/videorc-com/mid-1.webp?v=0278cbf4
- Page crop (mid-2): https://media.lvly.design/library/videorc-com/mid-2.webp?v=967d3c1a
- Hero (mobile): https://media.lvly.design/library/videorc-com/mobile-hero.webp?v=a8763f1f
- Full page (desktop): https://media.lvly.design/library/videorc-com/full.jpg?v=7c28cdc4
- Full page (mobile): https://media.lvly.design/library/videorc-com/mobile-full.jpg?v=1cf38018
- Clip preview (mp4): https://media.lvly.design/library/videorc-com/video-cwvtbl.preview.mp4?v=ffe0c613

A near-black, almost fully achromatic desktop-app landing page. The only "color" is a grimacing orc mascot, a gray-on-gray stencil scattered with app screenshots across the hero, and the platform logos. Everything else is a zinc ramp from #131317 to #f6f6f7. The system font (-apple-system / SF Pro) does all the display work at weight 500 with tight negative tracking, so the page reads like Apple's product chrome rather than gamer-neon. Bright white pill buttons stand in for an accent. Below the hero the layout turns sober: full-bleed hairline-ruled feature rows with mono index numbers, a mono tabbed product walkthrough, then two big 24px-radius pricing cards. The monster decal gives it attitude without breaking the restraint.

## Steal-worthy details

- The center nav pill doubles as a scroll-progress readout. A white "Menu" capsule holds a gray inner chip that counts up 0% → 33% → 67% as you scroll, so wayfinding and navigation share one control
- A split, floating nav: logo tile and a ghost-bordered link capsule on the left, the white menu pill centered, and GitHub star count + Login + a white Download pill on the right, all with no header bar
- The hero background is a sparse scatter of rotated, irregular blob-masked tiles of app screenshots and the mascot, knocked down to roughly 15% contrast against #131317. You get texture and product proof without competing with the headline
- The headline is system UI at 84px/1.02, weight 500, tracking -2.1px (-0.025em), and every heading below it keeps the same -0.025em ratio (52px/-1.3px, 36px/-0.9px). Premium display type without loading a webfont
- A lowercase monospace microlabel ("What are we supporting?") sits over a row of full-color platform glyphs. The only saturated color in the hero, earned by the logos themselves
- Paired pill CTAs at the same 52px height: solid #f5f5f6 with #18181b text, next to a ghost pill with a faint 1px border. Hierarchy comes from fill alone
- Feature list as full-bleed rows split by hairlines: mono "04" index at the far left, a 36px heading, and the muted body copy pushed to a narrow right column. A spec sheet instead of a card grid
- A product walkthrough driven by a mono-numbered segmented tab bar (01 02 03 04) on a dark rounded track, sitting directly above the framed app screenshot
- Pricing cards at 24px radius, set apart only by tonal fill (#1c1c20 versus a darker card). The billing toggle carries a tiny outlined "2 months free" pill, and the price uses a superscript dollar sign
- A giant, clipped "Videorc" wordmark in barely-there gray bleeds off the bottom of the footer as a sign-off

## Style recipe

Build a dark, achromatic, tool-grade marketing page. Background #131317; raised surfaces #1c1c20 to #2f2f32; hairlines #2f2f32 at 1px; text #f6f6f7 for headings, #aeaeb0 for body, #6e6d70 for meta. Use no brand hue: white #f5f5f6 filled pills with #18181b text are the accent, and real color appears only in content (logos, screenshots, an illustrated mascot). Type is the system stack (-apple-system, SF Pro Text, Segoe UI) throughout. Display weight is 500 with tracking at -0.025em: 84px/1.02, 52px/1.05, 36px/1.1. Body is 16px/26px weight 400, and buttons are 14px weight 500. Pair it with a monospace face for index numbers, tab labels and small lowercase microlabels. Radii: 9999px for every button, nav island and chip; 24px for large cards; 18px for media frames; 8px and 4px for small UI. Buttons are 52px tall with 24px side padding: primary is a solid near-white pill, secondary a ghost pill with a 1px hairline border. Navigation floats as separate pill islands with no header bar, and the center island can show scroll progress. Lay out features as full-width rows split by hairlines, with a mono index, a heading and a narrow muted description column, rather than card grids. Texture dark heroes with sparse, low-contrast, blob-masked image tiles at about 15% visibility. Separate surfaces by tonal step rather than shadow. End with an oversized, faded wordmark cropped by the page edge.