Skip to content
DesignMunkDesignMunk Submit a site

Ycode

ycode.com
Modern visual builder with freedom of open source control.
Design Tools Technology Next.js Tailwind Homepage Inter
Share Visit site
ycode.com DESKTOP · 1440
Ycode

AI Breakdown

Design export

---
version: alpha
name: Ycode
description: Modern visual builder with freedom of open source control.
colors:
  primary: "#ffffff"
  neutral: "#0a0a0a"
  border: "#374151"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Inter
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1
  headline-md:
    fontFamily: Inter
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-sm:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.2
  headline-xs:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.22
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 6px
  sm: 26px
  md: 48px
  lg: 64px
  xl: 140px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.full}"
    padding: 0px 12px
    height: 32px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 0px 12px
    height: 32px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Ycode: Dark Monochrome Framed by an Editor Preview

## Overview

Ycode presents a focused, technical brand for builders. The interface is deliberately minimal and monochrome to emphasize product proof over decoration. Expect confident, low-noise layouts, large sectional spacing, and crisp contrast suitable for both B2B and indie audiences. Default to dark mode and keep the tone straightforward and instructional.

## Colors

- Primary (#ffffff): Primary ink for text and high-emphasis elements, also the fill for primary buttons.
- Neutral (#0a0a0a): Core canvas and app-like surfaces across the site.
- Border (#374151): Cool slate used for dividers, outlines, and subtle separators.
- Surface ({colors.neutral} → #0a0a0a): Section and card backgrounds in dark mode.
- On-surface ({colors.primary} → #ffffff): Text and icon color on dark surfaces.

## Typography

Inter is the sole family across headings and body, reinforcing a product-first tone. It is available via Google Fonts and can be loaded directly; recommended fallbacks when webfonts are unavailable: system-ui, Helvetica Neue, Arial. Headline-lg (Inter 56px/500, 1) is for the hero. Headline-md (40px/500, 1.1, -0.02em) handles section leads and pricing headings. Headline-sm (20px/500, 1.2) and Headline-xs (18px/500, 1.22) cover card titles and UI labels. Body-md (16px/400, 1.5) is the default paragraph and feature-list size. Prefer weights 400 and 500 to match the measured styles.

## Layout

Spacing is generous and stepped: xs 6px for micro gaps, sm 26px for paddings in compact bars, md 48px for intra-section rhythm, lg 64px for block spacing, and xl 140px for section padding. Use a simple centered content column with wide breathing room; let the hero and preview frame span large widths. Cards and lists rely on spacing plus borders rather than shadows for separation. Card internal padding is 16px per component token.

## Elevation & Depth

Shadows are disabled at all sizes. Depth is conveyed through tonal contrast (neutral surface vs. white type), thin slate borders (#374151), and ample whitespace. Emphasize hierarchy with type size/weight and spacing, not blur or glow. Interactive focus should be handled with color and outline rather than drop shadows.

## Shapes

Two radii define the language: sm 8px for cards and containers, and full 9999px for all CTAs, tags, and chips. Pills signal action; rounded rectangles signal content. Avoid mixing other radii to keep the page cohesive.

## Components

Buttons and card variants are foundational:
- Button Primary: background #ffffff, text #0a0a0a, pill radius 9999px, height 32px, horizontal padding 12px.
- Button Secondary: text #ffffff, pill radius 9999px, height 32px, horizontal padding 12px; no fill by default.
- Button Link: text #ffffff, square corners, no padding tokenized beyond text.
- Card: background #0a0a0a, text #ffffff, 8px radius, 16px internal padding.

Distinctive components on this page:

### Top Navigation Bar
Dark surface (#0a0a0a) with 16px Inter links. Right-aligned CTAs use the 32px pill pattern. Horizontal padding aligns to sm 26.

### Hero with Dual CTAs
Headline-lg Inter 56px/500 with a single paragraph in body-md 16px/1.5. Primary + secondary pill buttons stacked inline. Optional small status chips precede the heading.

### Editor Preview Frame
A wide app-like frame showing the builder UI. Use surface #0a0a0a with subtle slate borders for the frame chrome; internal labels can use headline-xs 18px where needed.

### Install Steps Grid
Three steps in a responsive grid. Each step uses headline-sm 20px for the title and body-md 16px for copy, with md 48px gaps between items.

### AI Provider Matrix
Provider names in headline-sm 20px with sub-model lists in body-md 16px. Use border color #374151 to separate columns or rows.

### Pricing Tiers
Two cards side by side. Plan names in headline-md 40px, price emphasis can share that size. Feature lists in body-md 16px with md 48px vertical rhythm. CTAs use primary and secondary button styles.

### Releases Feed
A stacked list. Version labels in headline-sm 20px, descriptions in body-md. Dividers use the border color.

### Community Testimonials
Quote text in body-md with author lines in headline-xs 18px. Maintain lg 64px spacing between quotes for scanability.

### Footer CTA Band
Section headline in headline-md 40px with dual CTAs reusing the hero pattern.

## Do's and Don'ts

- Do keep the background at #0a0a0a and use #ffffff for all primary text and CTAs.
- Do use Inter 500 for headings and 400 for body; avoid heavier weights.
- Do keep CTAs at 32px height with a 9999px pill radius; avoid alternative sizes or shapes.
- Do separate sections with spacing and the #374151 border; don't add drop shadows.
- Do use the provided spacing steps (26/48/64/140px) for rhythm; don't improvise in-between values.
- Don't introduce accent colors; the system is intentionally monochrome on this page.

## Agent Prompt Guide

Quick color reference — Text: #ffffff, Background: #0a0a0a, Border: #374151, Accent/Primary button fill: #ffffff (with #0a0a0a text).

1) Build a dark hero section
- Background #0a0a0a.
- H1: Inter 56px, weight 500, line-height 1, color #ffffff.
- Body copy: Inter 16px, weight 400, line-height 1.5, color #ffffff.
- Buttons: Primary pill 32px high, 12px horizontal padding, radius 9999px, fill #ffffff with text #0a0a0a; Secondary pill 32px high, text #ffffff, no fill.
- Spacing: top/bottom 140px, gap between H1 and copy 48px, gap to buttons 26px.

2) Three-step install grid
- Section padding: 140px top/bottom.
- Each step: title Inter 20px/500 (1.2), body Inter 16px/400 (1.5), color #ffffff.
- Card container optional: background #0a0a0a, radius 8px, padding 16px, thin border #374151.
- Grid gap: 48px between items; 64px between title and description blocks.

3) Two-tier pricing
- Background #0a0a0a.
- Plan card: radius 8px, padding 16px, border #374151.
- Plan title and price: Inter 40px/500 (1.1, letter-spacing -0.02em) in #ffffff.
- Features: Inter 16px/400 (1.5).
- CTAs: primary and secondary buttons per tokens (32px height, 12px padding, 9999px radius).
- Column gap 64px; section margin 140px.

4) Releases list
- Section padding 140px.
- Version label: Inter 20px/500 (1.2), color #ffffff.
- Description: Inter 16px/400 (1.5).
- Use dividers/borders in #374151 between entries and vertical gaps of 48px.

## Similar Brands

- Webflow — Similar dark canvases and restrained sans-serif type; Ycode pushes monochrome further and leans harder on pill CTAs.
- Framer — High-contrast dark marketing with a central product preview; Framer introduces bright accents where Ycode stays grayscale.
- Vercel — Minimal dark aesthetic and developer-forward tone; Ycode is more marketing-friendly with step guides and pricing on the same page.
- Supabase — Open-source narrative and changelog prominence; Ycode's UI is more design-tool oriented than database tooling.

More like this

Browse Design Tools →
tokens.studio
Tokens Design Tools
Tokens
Single source of truth for design tokens—automate, sync, scale effortlessly.
Homepage · 17 hours ago
quickpick.space
QuickPick Design Tools
QuickPick
Keep your entire creative world organized in one space.
Homepage · 3 days ago
landify.design
Landify Design Tools
Landify
Your next website starts here—build faster with Landify UI.
Homepage · 1 week ago
cubefabs.com
Cubefabs AI
Cubefabs
Revolutionize manufacturing with AI factories for next-gen materials.
Homepage · 1 week ago