Design Blueprint

Notexs Design System

Complete handoff reference — brand, colors, typography, components, and patterns used across the Notexs platform.

Brand & Logo

Logo Variants

Favicon / Icon

Full Logo

On Light

Specifications

Icon file/logo/favicon.png

Full logo/logo/logo.png

SVG source/logo/logo.svg

Icon sizeFavicon: 32×32 · Nav: 30×30 · Display: 48×48

Clear spaceMin 8px around icon

Corner radiusrounded-lg (8px)

Color Palette

brand

Slate 950

#020617

Backgrounds, button fills

Slate 900

#0f172a

Card backgrounds, sections

Slate 800

#1e293b

Secondary surfaces

Slate 700

#334155

Borders, subtle fills

accent

Blue 500

#3b82f6

Primary accent, links

Blue 400

#60a5fa

Dark mode accent

Cyan 400

#22d3ee

Gradient secondary, highlights

Indigo 500

#6366f1

Gradient tertiary

semantic

Green 400

#4ade80

Success, published status

Amber 400

#fbbf24

Warning, draft status

Red 500

#ef4444

Destructive, errors

text

White

#ffffff

Primary text (dark mode)

Gray 300

#d1d5db

Body text (dark mode)

Gray 400

#9ca3af

Muted text

Gray 900

#111827

Primary text (light mode)

Gradients

Title Gradient

bg-gradient-to-r from-blue-500 via-cyan-400 to-indigo-500

Section headings

Title Gradient (Dark)

bg-gradient-to-r from-blue-400 via-cyan-300 to-indigo-400

Dark mode headings

Button Outer

radial-gradient(circle 80px at 80% -10%, #fff, #0f172a)

GlassButton outer shell

Button Inner

radial-gradient(circle 80px at 80% -50%, #334155, #0f172a)

GlassButton inner fill

Blob Accent

radial-gradient(circle 60px at 0% 100%, #3fe9ff, blue/50%, transparent)

GlassButton cyan blob

Typography

Font FamilyInter (Google Fonts)

Weights Used400 Regular · 500 Medium · 600 Semibold · 700 Bold

Featuresfont-feature-settings: "rlig" 1, "calt" 1

Letter Spacing-0.011em (global)

Display

Notexs

text-5xl lg:text-7xl

Heading 1

Section Title

text-4xl lg:text-5xl

Heading 2

Feature Title

text-2xl lg:text-3xl

Heading 3

Card Title

text-xl font-semibold

Body Large

Body text for descriptions and paragraphs.

text-lg leading-relaxed

Body

Standard body text for general content.

text-base leading-relaxed

Small

Small text for labels and captions.

text-sm

Tiny

Tiny text for badges and metadata.

text-xs

Buttons — GlassButton

Import: import { GlassButton } from "@/components/ui/glass-button"

Variants

variant="primary"

variant="secondary"

variant="ghost"

variant="outline"

Sizes

size="sm"

size="md"

size="lg"

With Icons

Badges & Labels

✨ Feature BadgeDraft StatusPublished Active

Shadows & Effects

Card Shadow

shadow-[0_8px_40px_-12px_rgba(0,0,0,0.7)]

Blue Glow

Blue-tinted shadow for CTAs

Hero Shadow

shadow-[0_20px_80px_-12px_rgba(0,0,0,0.6)]

Theme Variants

Notexs supports multiple editor themes applied via CSS class on the root element.

Default

Nord

Monokai

Rose

Colorblind

Spacing & Layout

Max content widthmax-w-7xl (80rem / 1280px)

Max content (narrow)max-w-6xl (72rem / 1152px)

Horizontal paddingpx-4 sm:px-6 lg:px-8

Section spacingpy-12 sm:py-16 md:py-20 lg:py-24

Card border radiusrounded-2xl (1rem)

Button border radiusrounded-full

Base radius (--radius)0.75rem

Iconography

LibraryLucide React

Default sizew-5 h-5 (20px)

Small sizew-4 h-4 (16px)

Stroke width2 (default)

ArrowRight

Check

Download

Star

Zap

Globe

Lock

Share2

Key Files Reference

Global CSSapp/globals.css

Tailwind Configtailwind.config.ts

Glass Buttoncomponents/ui/glass-button.tsx

Navbarcomponents/ui/resizable-navbar.tsx

Landing Pageapp/(marketing)/page.tsx

Marketing Layoutapp/(marketing)/layout.tsx

Logo Filespublic/logo/faviconnotexs.png · logo.png · logo.svg

Utilslib/utils.ts (cn function)