Logoverry.dev
arrow_backBACK TO HOME
FOUNDATIONS & COMPONENTS // SPECIFICATION

Design System

Design tokens, typography scale, component specs, and structural layout patterns for verry.dev (Stitch Minimalist Editorial Spec).

Next.js 16 (App Router)React 19Tailwind CSS 4Framer Motion
INDEX:
FOUNDATIONS // 01

Colors

Semantic tokens via CSS custom properties. Each token dynamically adapts between light and dark themes as defined in tokens.css.

Surface (Background)

bg-surface

--color-surface

Default canvas background color across pages.

Light: #f9f9f9Dark: #0a0b0d
Surface Container Low

bg-surface-container-low

--color-surface-container-low

Subtle background fill for cards, inputs, and code blocks.

Light: #f3f3f3Dark: #111318
Surface Container

bg-surface-container

--color-surface-container

Container fill for hovered elements and active states.

Light: #eeeeeeDark: #1a1c23
Surface Container High

bg-surface-container-high

--color-surface-container-high

Higher contrast container state for active dropdowns.

Light: #e8e8e8Dark: #242731
Primary Text / Ink

text-primary

--color-primary

High-contrast headings, active text, and primary actions.

Light: #000000Dark: #ffffff
Secondary Text / Muted

text-secondary

--color-secondary

Metadata labels, timestamps, and secondary captions.

Light: #5e5e5eDark: #94a3b8
On Surface Variant

text-on-surface-variant

--color-on-surface-variant

Standard body text color for high legibility.

Light: #4c4546Dark: #9ca3af
Outline Variant (Hairline)

border-outline-variant

--color-outline-variant

Hair-thin 1px borders for cards, dividers, and tables.

Light: #cfc4c5Dark: rgba(255,255,255,0.08)
Outline (Solid)

border-outline

--color-outline

Hover and focused state border color.

Light: #7e7576Dark: rgba(255,255,255,0.2)
Grid Line

bg-grid-line

--color-grid-line

Subtle 96px background architectural grid line overlay.

Light: rgba(0,0,0,0.035)Dark: rgba(255,255,255,0.035)
tokens.css — Color Token Definitions
:root {
  --color-surface: #f9f9f9;
  --color-surface-container-low: #f3f3f3;
  --color-on-surface: #1b1b1b;
  --color-primary: #000000;
  --color-secondary: #5e5e5e;
  --color-outline-variant: #cfc4c5;
}

.dark, [data-theme="dark"] {
  --color-surface: #0a0b0d;
  --color-surface-container-low: #111318;
  --color-on-surface: #f3f4f6;
  --color-primary: #ffffff;
  --color-secondary: #94a3b8;
  --color-outline-variant: rgba(255, 255, 255, 0.08);
}
FOUNDATIONS // 02

Typography

Inter for body and headings. JetBrains Mono for technical labels, code, and metadata. High-contrast apertures for an architectural editorial feel.

DISPLAY XL / H1font-display-xl (clamp 2.5rem - 4.5rem, weight 800)

Editorial Portfolio

Used for primary hero title and impact statements.

HEADLINE LARGE / H2font-headline-lg (clamp 2rem - 3rem, weight 700)

Selected Works & Architecture

Used for major section titles and essay headers.

HEADLINE MOBILE / H3font-headline-mobile (1.5rem - 2rem, weight 700)

Spring Boot Enterprise Backends

Used for card headlines and modal titles.

BODY TEXTfont-body text-base leading-relaxed

Software Engineer based in Jakarta, Indonesia. Specializing in high-concurrency Spring Boot microservices, computer vision pipelines, and minimalist user interfaces built with performance and architectural rigor.

LABEL MONO / METADATAfont-label-mono text-xs uppercase tracking-wider

FEATURED CASE STUDY // SPRING BOOT 3 & REDIS EDGE CACHE

CODE INLINEfont-mono text-xs bg-surface-container px-2 py-1
const design = "minimalist-editorial";
FOUNDATIONS // 03

Spacing & Border Radius

Responsive spacing tokens and architectural soft corners (0.25rem per Stitch spec).

TOKEN / USAGEMOBILEDESKTOPCSS VARIABLE / CLASS
Container Max Width100%1100pxmax-w-container-max
Page Gutter Padding16px24pxpx-gutter
Section Gap64px120pxpy-section-gap / mb-section-gap
Element Gap20px32pxgap-element-gap
Card Paddingp-5 (20px)p-6 to p-8 (24px - 32px)p-6 md:p-8

BORDER RADIUS SCALE

rounded-sm

0.125rem (2px)

rounded-DEFAULT

0.25rem (4px)

rounded-md

0.375rem (6px)

rounded-lg

0.5rem (8px)

COMPONENTS // 01

Cards

Flat card design without heavy drop-shadows. Defined by a 1px hairline border (border-outline-variant) that subtly darkens on hover.

CASE STUDY // BACKENDschedule 5 MIN READ

High-Concurrency Redis Edge Caching Layer

Optimizing API latency from 450ms down to 18ms using upstash Redis caching, distributed locks, and Spring Boot webflux non-blocking I/O pipelines.

#SPRING-BOOT#REDIS
VIEW PROJECT arrow_forward
Card Markup Specification
<div className="group border border-outline-variant p-6 rounded-DEFAULT bg-surface hover:bg-surface-container-lowest transition-all">
  <div className="flex items-center justify-between font-label-mono text-xs text-secondary mb-3">
    <span>CATEGORY // METADATA</span>
    <span>DATE / READ TIME</span>
  </div>
  <h3 className="font-headline-mobile text-lg text-primary group-hover:underline">Title</h3>
  <p className="font-body text-sm text-on-surface-variant mt-2">Description</p>
</div>
COMPONENTS // 04

Tags & Chips

Monospaced chips with 1px hairline borders for technology tags, filters, and topic indicators.

INTERACTIVE TAG FILTER DEMO (CLICK TO SELECT)

Currently Active Filter Token: #NEXTJS

COMPONENTS // 05

Buttons & Inputs

High-contrast solid and hairline buttons along with subtle input search boxes.

BUTTON VARIANTS
INPUT FIELD & SEARCH BAR
search
PATTERNS // 01

Page Structure

Standard template structure for building new pages in this portfolio.

Page Template Blueprint (React / Next.js App Router)
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";

export default function NewPage() {
  return (
    <div className="min-h-screen flex flex-col transition-colors duration-300">
      <Navbar />
      <main className="max-w-container-max mx-auto px-gutter flex-1 w-full py-16 md:py-24">
        {/* Header Section */}
        <div className="space-y-4 mb-12 border-b border-outline-variant pb-8">
          <span className="font-label-mono text-secondary text-xs uppercase">
            CATEGORY // SECTION
          </span>
          <h1 className="font-display-xl text-primary">
            Page Title
          </h1>
          <p className="font-body text-base md:text-lg text-on-surface-variant max-w-2xl leading-relaxed">
            Description of the page content.
          </p>
        </div>

        {/* Content Section: mt-12 sm:mt-16 */}
      </main>
      <Footer />
    </div>
  );
}
PATTERNS // 02

Grid Background Overlay

The portfolio uses a signature 96px x 96px architectural grid line overlay background with radial center masking implemented in globals.css.

globals.css Grid CSS Pattern Definition
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image: 
    linear-gradient(to right, var(--color-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-grid-line) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(circle at center, black 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(circle at center, black 30%, transparent 90%);
}