Tategumi — Design System

Tategumi（建組）is a Japanese-only marketing site for a solo-architect practice tool. Its visual language borrows from the architect’s own instruments: the drafting sheet, the hairline, the axonometric drawing, the title block. The design is not decorated — it is specified.

The four working rules

• Closed sets. Color, type size, and spacing are fixed vocabularies. Do not add a fifth color, a seventh size, a new gradient, shadow, radius, or spacing token.
• Hairline over shadow. Separation is drawn with a 1px Hairline rule, never a drop shadow, card lift, or glow.
• Ink is the default; yellow is the exception. Buttons are filled Architect Ink. AMARELO Signal appears in only four places site-wide (see §01).
• Structure carries meaning. Section numbers, mono labels, and title blocks encode order and role — they are information, not ornament.

This page is built entirely from the system it documents, using the site’s own Shell, tokens, and components. If a rule below were broken here, you would see it — that is deliberate.

Where yellow is allowed — and nowhere else

AMARELO Signal appears in exactly four places across the marketing funnel. In /tools, one more rule holds: yellow is reserved for the per-tool export CTA, and the hub page uses none.

1. Price table — a 4px vertical rule on the Tategumi row
2. Founder signature — a 1px hairline beneath the name (LP + About)
3. Primary CTA hover — the animated 1px hairline under the button label
4. Text selection highlight — the ::selection background

Everywhere else: zero yellow. Section numbers, labels, and icons are Ink — not Signal.

Six sizes, closed. Mono is used for numerals, labels, captions, and title-block metadata — not for prose.

Section heights

Vertical rhythm is drawn from named section-height tokens, not arbitrary padding.

Motion — three effects only

• 01State confirmation — 200–400ms, ending in yellow (e.g. the CTA hairline, a submitted-field cue).
• 02Page-load reveal — 600ms, LP only. Never on supporting pages.
• 03CTA hover hairline — the 300ms left-to-right underline shown above.

No parallax, hover-lift, Lottie, or scroll-jacking. Motion confirms an action or reveals a page — nothing else. All motion respects prefers-reduced-motion.

These break the drafting-sheet language. None are permitted in any production build.

The site carries three kinds of image, plus social and icon assets. Each has a fixed treatment. The common law across all of them: 1px Hairline frame, no border-radius, no shadow, no gradient overlay. Images sit on the drafting sheet like plates in a drawing set. The three demos below are the site’s real assets and components — not mockups.

Real photos are rendered desaturated to grayscale via the grayscale class, framed in a 1px Hairline border. Never shown at full saturation.

Product screenshots go through <ScreenshotFrame>: Hairline border, Drafting-Paper mat, mono caption. Mobile is centered on the mat.

2台のラップトップと外部モニターの軸測投影図

A-01

現場の机

N.T.S.建組

Illustrations are axonometric line drawings, mounted on a <DrawingPlate>: a hairline drawing sheet with a title block. Until the real drawing exists, the plate carries the brief. Never substitute icons, emoji, or stock art.

Rules of handling

• Always use next/image with explicit width, height, and a sizes hint — never a bare <img> for content imagery.
• Grayscale is a class, not a baked-in edit where possible: className="… grayscale". Keeps the source asset reusable.
• Alt text is Japanese and descriptive, in the site’s plain voice — it describes what is in the frame, not “image of…”. Decorative-only frames use role="img" with an aria-label.
• Captions are mono, uppercase, tracked (Micro size), below the frame — never overlaid on the image.
• Open Graph: one shared /og-default.jpg at 1200×630. Favicon is icon.svg — a line mark, not a raster.

// Product screenshot — always through the shared frame
<ScreenshotFrame
  src="/screenshots/estimate-preview.png"
  alt="見積書プレビュー画面。項目ごとの金額と合計が並ぶ。"
  width={1400} height={900}
  variant="desktop"
  caption="ESTIMATE — PREVIEW"
/>

// Photograph — grayscale + hairline, via next/image
<Image
  src="/screenshots/founder-desk.jpg"
  alt="ドレ・グスタボの作業机。2台のラップトップと外部モニター。"
  width={1600} height={1000}
  className="block h-auto w-full grayscale border border-hairline"
/>

When a new image is needed — a photo, an illustration, a social card — it must be born inside the system, not filtered into it afterward. Below is how to shoot, draw, generate, and export so the result belongs on the sheet.

Photography

• Subject is real.The founder’s actual desk, a real jobsite（現場）, real paper. No stock, no staged clichés — those are forbidden (§05).
• Light flat and neutral. Even daylight, no strong color cast, no dramatic contrast. The frame must survive being desaturated to grayscale with detail intact.
• Compose with room. Slight negative space so the 16:10 / 16:9 crop sits calmly; the image is a plate, not a poster.
• Deliver grayscale-ready. Desaturate on export, or keep color but apply the grayscale class at render. Never deliver a heavily color-graded photo.

Line drawings — the house illustration style

• Axonometric (isometric) projection — parallel lines, no vanishing-point perspective. The drawing language the whole site references.
• 1px Architect Ink strokes on Drafting Paper. Uniform line weight. No fills, no shading, no texture.
• At most one AMARELO accent, used once per drawing to point at the single thing that matters — and only where yellow is already sanctioned. When unsure, use none.
• Technical, not cute. It should read like an assembly or furniture drawing, not a marketing spot illustration.
• Mount it on a plate. Every drawing sits inside a <DrawingPlate> — hairline frame, faint drafting-dot grid, corner registration ticks, and a title-block cartouche (plate no. · title · N.T.S. · 建組). The same plate holds the brief before the drawing exists and the finished drawing after — so a slot is never an empty box.

# Reusable prompt for a house-style line drawing
Axonometric (isometric) line drawing of {SUBJECT},
uniform 1px black ink strokes, no shading, no fill, no perspective,
flat warm off-white background (#FAF8F5), ink color #1A1A1A,
minimal technical drawing style, generous negative space,
no text, no labels, no color
# optional, only where yellow is already allowed:
— exactly one small accent stroke in golden yellow #F4C430 on {FOCAL ELEMENT}

Social card (Open Graph)

• 1200×630, Drafting Paper ground. Ink wordmark or headline in the display/heading scale, generous margin, one mono metadata line.
• No photograph bleed, no gradient, no yellow flood — treat it as a title block, not a banner.

Export & format matrix

Before you commit an image — checklist

• ・Grayscale (photo) or ink-on-paper (drawing)? No stray color?
• ・Framed with a 1px Hairline, square corners, no shadow?
• ・Yellow used zero times — or exactly once in a sanctioned spot?
• ・Served through next/image with width, height, and Japanese alt text?
• ・Would it sit unremarkably beside a real architectural drawing? If not, it is too loud.