Skip to content
DesignMunkDesignMunk Submit a site

NoCodeTech

nocode.tech
The Internet’s biggest hub of NoCode tools, tutorials, and inspiration.
Developer Tools Education Next.js Homepage Druk Graphik
Share Visit site
nocode.tech DESKTOP · 1440
NoCodeTech

AI Breakdown

Design export

---
version: alpha
name: NoCodeTech
description: The Internet’s biggest hub of NoCode tools, tutorials, and inspiration.
colors:
  primary: "#1d1d1d"
  secondary: "#acacfc"
  tertiary: "#5955f4"
  neutral: "#ffffff"
  border: "#e5e7eb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Druk web
    fontSize: 95px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Druk web
    fontSize: 62px
    fontWeight: 700
    lineHeight: 1.16
  headline-sm:
    fontFamily: Graphik web
    fontSize: 41px
    fontWeight: 600
    lineHeight: 1.2
  headline-xs:
    fontFamily: Druk web
    fontSize: 27px
    fontWeight: 500
    lineHeight: 1.78
  body-md:
    fontFamily: Graphik web
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 8px
  sm: 16px
  md: 30px
  lg: 56px
  xl: 80px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 16px 24px
    height: 54px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px 24px
    height: 54px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# NoCodeTech: Druk Headlines and Purple Editorial Rails

## Overview

A fast, editorial system aimed at no-code builders and operators. Personality is confident and pragmatic: big headlines, compact body copy, and conversion-focused purple accents. Layout is spacious at the section level and dense inside cards, supporting quick scanning and deep reading. Default to clarity over flourish; decoration is secondary to scannability and link discoverability.

## Colors

- **primary (#1d1d1d):** Core text and headline ink; use for high-contrast typography and icons.
- **secondary (#acacfc):** Soft lavender accent for badges, subtle links, and hover states; avoid using it for critical CTAs.
- **tertiary (#5955f4):** Primary action and announcement color; reserve for buttons, the top notice bar, and key interactive states.
- **neutral (#ffffff):** Page background and card surfaces.
- **border (#e5e7eb):** Hairline dividers, card outlines, inputs, and grid separators.
- **surface ({colors.neutral}):** Default surface color alias; matches neutral.
- **on-surface ({colors.primary}):** Default text on surfaces; matches primary.

## Typography

- Druk web: Used for dominant headlines and emphatic labels. Sizes: headline-lg 95px/700 (-0.02em tracking), headline-md 62px/700, headline-xs 27px/500 for compact kickers. Proprietary (custom source); substitutes: Anton (Google), Bebas Neue (Google), Archivo Black (Google). Use all-caps sparingly; Druk carries weight without shouting.
- Graphik web: System body and secondary headlines. headline-sm 41px/600 for section subheads; body-md 18px/400 for paragraphs and UI copy. Proprietary (custom source); substitutes: Inter (Google), Work Sans (Google), Plus Jakarta Sans (Google).
- Soehne mono dreiviertelfett: Mono accent for technical labels or metrics when needed. Proprietary (custom source); substitutes: IBM Plex Mono (Google), Space Mono (Google), Roboto Mono (Google).

## Layout

Spacing follows an 8px root: xs 8, sm 16, md 30, lg 56, xl 80. Use lg/xl for section paddings and hero breathing room; md for card gutters and grid gaps; sm for intra-card spacing; xs for micro-separators. Employ a responsive multi-column editorial grid; align "Latest," "Guides," "Explainers," and "Opinion" to the same card width and rhythm. Keep content containers consistent; section headers and "See all" actions align to the same left edge.

## Elevation & Depth

The system is mostly flat. Only the sm shadow is active (rgba(0,0,0,0.4) 0 30px 80px) and should be reserved for modals, sticky elements, or media overlays. Everyday hierarchy relies on borders (#e5e7eb), contrast between #ffffff and #1d1d1d, and generous whitespace. Avoid decorative drop shadows on cards or buttons.

## Shapes

Corners are minimal and functional. Interactive controls (primary/secondary buttons) use 4px (rounded.sm) for a crisp tap target. Containers like cards adopt 8px (rounded.md) to soften groups of content. Links and text buttons stay square (0px) for an editorial feel. Use one radius per tier to keep the language consistent.

## Components

Buttons and card styles are standardized across sections.
- Button, Primary: #5955f4 background, #ffffff text, 4px radius, 16x24 padding, fixed height 54px. Use for critical CTAs like "Try Stacker Free".
- Button, Secondary: Text-colored (#1d1d1d) with transparent background; optional 1px #e5e7eb outline on light surfaces. Same 4px radius and 54px height.
- Button, Link: Text-only, 0px radius; pair with subtle hover color shifts.
- Card: #ffffff surface, #1d1d1d text, 8px radius, 16px padding. Add a 1px #e5e7eb border for definition when cards sit on white.

### Announcement Bar
- Full-width strip at the top promoting the matching quiz.
- Background: #5955f4; text: #ffffff; compact padding (xs–sm). Links inherit neutral text with strong underline or weight.

### Global Navigation
- Left-aligned logo, central nav links, right-aligned actions (search, Join Free).
- "Join Free" uses the primary button spec; other links are text-only with sm spacing between items.

### Hero Header
- Headline: Druk web headline-lg (95px/700) in #1d1d1d, centered.
- Supporting copy: Graphik body-md (18px/400).
- Actions: Primary "Try Stacker Free" and secondary "Explore the latest," spaced by sm–md.
- Use xl vertical padding.

### Latest Articles Rail
- Section label in Druk (headline-xs) or Graphik (headline-sm) depending on viewport; divider line in #e5e7eb.
- Cards: image/eyebrow optional, 16px internal padding, 8px radius, 1px #e5e7eb border; headline in Graphik 41px/600.

### Audience Pathways
- Three horizontal tiles ("startup," "small business," "enterprise").
- Each tile is a card with 8px radius, 16px padding, title in Druk headline-xs and a concise link using Button Link style.

### Guides / Explainers / Opinion Sections
- Reuse the article card with consistent spacing and a right-aligned "See all" link.
- Maintain equal gutters (md) between cards.

### Video Lightbox (Get Moving)
- Poster tile styled as a card with 8px radius; on activation, apply the sm shadow to the overlay.

### Newsletter Block
- Heading set in Graphik headline-sm; body at 18px; input with 1px #e5e7eb border and 8px radius; submit uses the primary button.

### Footer Columns
- Multi-column link lists with small caps or kicker style; dividers use #e5e7eb; keep link color #1d1d1d with subtle hover.

## Do's and Don'ts

- Do reserve #5955f4 for high-intent actions and the announcement bar; use #acacfc only for supportive accents.
- Do keep primary buttons at 54px height with 4px corners; align secondary buttons to the same metrics.
- Do set long-form body copy in Graphik (or Inter substitute) at 18px with 1.5 line-height for readability.
- Don't apply shadows to cards or buttons; default to borders (#e5e7eb) for separation.
- Don't mix radii on a single component; buttons use 4px, containers use 8px.
- Don't use Druk for body text; restrict it to headlines and short labels.

## Agent Prompt Guide

Quick color reference — Text: #1d1d1d | Background: #ffffff | Border: #e5e7eb | Accent (CTA): #5955f4

1) Build the hero
- Container padding: top/bottom 80px, sides 30px (xl, md)
- Headline: "Build business software with AI"
  • Font: "Druk web", fallback Anton
  • Size/weight: 95px / 700, letter-spacing -0.02em, line-height 1.2
  • Color: #1d1d1d
- Paragraph: Graphik 18px/400 (fallback Inter), color #1d1d1d, max-width 70ch
- Buttons:
  • Primary: background #5955f4, text #ffffff, height 54px, padding 16px 24px, radius 4px
  • Secondary: transparent, text #1d1d1d, height 54px, padding 16px 24px, radius 4px, optional 1px border #e5e7eb
- Gap between elements: md (30px)

2) Article card grid (Latest)
- Grid: 3 columns with 30px gaps (md); section padding top 56px (lg), bottom 56px (lg)
- Card: background #ffffff, border 1px solid #e5e7eb, radius 8px, padding 16px
- Eyebrow: Druk 27px/500, color #1d1d1d
- Title: Graphik 41px/600 (fallback Inter SemiBold), color #1d1d1d
- Teaser: Graphik 18px/400, color #1d1d1d
- Link: Button Link style (text #1d1d1d)

3) Announcement bar
- Full-width strip with padding 8px 16px (xs, sm)
- Background #5955f4, text #ffffff using Graphik 18px/600 for emphasis
- Inline link uses underline or bold; heart emoji optional

4) Newsletter block
- Section padding: top 56px, bottom 80px (lg, xl)
- Title: Graphik 41px/600; body: Graphik 18px/400
- Email input: 1px border #e5e7eb, radius 8px, padding 16px
- Submit button: #5955f4 background, #ffffff text, height 54px, radius 4px
- Supporting stat (e.g., "15,000+"): set in Druk 62px/700 for emphasis

5) Footer columns
- Background #ffffff; top border 1px #e5e7eb
- Column headings: Druk 27px/500; links: Graphik 18px/400
- Link hover: text color stays #1d1d1d with underline; spacing between links 8px (xs)

## Similar Brands

- Webflow University — Editorial learning hub with crisp cards and a purple accent; NoCodeTech runs heavier headline styling and simpler shadows.
- Zapier — Resource-heavy blog with clear taxonomies; NoCodeTech uses stronger display type (Druk) for section impact.
- Vercel — Monochrome-first developer aesthetic with sparing color; NoCodeTech adds a lavender secondary to soften the palette.
- Smashing Magazine — Magazine-style grid and typographic hierarchy; NoCodeTech is cleaner, with tighter radii and fewer decorative elements.

More like this

Browse Developer Tools →
maillayer.com
MailLayer Developer Tools
MailLayer
Everything you need. Nothing you don't.
Homepage · 17 hours ago
superdevpro.com
SuperDev Pro Developer Tools
SuperDev Pro
One extension replaces your browser toolbox—no clutter, no context switching.
Homepage · 18 hours ago
adapt.com
Adapt AI
Adapt
One agent. Full control on the full-stack AI platform.
Homepage · 22 hours ago
stigg.io
Stigg AI
Stigg
Every AI request is a spend decision—make it in milliseconds.
Homepage · 4 days ago