Andrew Chiappetta A* markBrand Guidelines
Andrew Chiappetta

the personal brand of

ANDREW

CHIAPPETTA

Builder of businesses — held to the A∗ standard
01 — Logo ↓
02 / SECTION

Color

A monochrome world interrupted once. The red is a heartbeat, never a coat of paint.

Surfaces
Void
#080808
Page canvas — the floor
Absolute
#000000
Deepest surface
Charcoal
#171617
Footer / inverted
Smoke
#262525
Elevated blocks
Graphite
#393939
Card surface
Type & Neutrals
Bone White
#fcfcfc
Primary text & hairlines
Linen
#f3efef
Inverted body panel
Ash
#d4d2d2
Secondary text
Pebble
#b5b2b2
Tertiary metadata
Iron
#525252
Underlines & dividers
Accent
Arterial Red
#fe1e34
The sole accent — a drop of blood
Crimson
#ff0000
Typographic emphasis only

Use #fe1e34 on one or two elements per view at most — a hairline border, the cursor dot, a single underline. Never as a fill behind body text, never as a text color for paragraphs. Spread it thin and it stops meaning anything.

03 / SECTION

Type

Two voices in dialogue — architectural caps against a hand-scripted signature. Nothing else is needed.

Aa
InterDisplay & UI — the blocks
300 · 400 · 500 · 700 · 800

Set tight. Headlines run -0.05em to -0.08em so caps compress into architecture.

Aa
Pinyon ScriptThe signature — calligraphic
400

Used only for connective words, signatures, and pull-quotes. The script against the heavy caps is the contrast.

Built for the Long
Inter 800 + Pinyon Script — the two-voice signature
Inter
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & * ! ? — “ ” ↗
Pinyon Script
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 & * ! ? — “ ” ↗
Type scalesize · tracking / leading
Caption
10px
0.8px / 1.2
Body
14px
-0.24px / 1.5
Subheading
24px
-0.9px / 1.1
Heading
42px
-2px / 1.05
Display
80px
-6px / 0.9
Display XL
160px
-12.8px / 0.9
04 / SECTION

Voice

Say less. State the fact, end the sentence. Confidence reads as restraint, not volume.

—

Declarative

Short sentences. No hedging, no filler reassurance.

—

Specific

Real numbers and named things over abstract verbs.

—

Unbothered

Never shout. The work is the proof; the type does the talking.

Say this
  • “I build businesses and the systems that scale them.”
  • “Three companies. One standard.”
  • “Held to the A∗ standard.”
Not this
  • “We leverage synergies to deliver world-class solutions.”
  • “Passionate, results-driven entrepreneur and visionary.”
  • “Let's connect and explore how I can add value!”
In application
Business card
Andrew Chiappetta A* mark
Andrew Chiappetta
Founder & Builder
Social tile
Andrew Chiappetta A* mark
Built for the long
Web hero
the brand ofChiappetta
05 / SECTION

Build

Drop the brand into any project. Copy the commands, paste the tokens, ship.

1 — Install the hero effect
terminal
npx shadcn@latest add "https://reactbits.dev/r/TextPressure-TS-TW.json"

The animated name in the hero is the TextPressure component from React Bits, added through the shadcn CLI.

2 — Use it
tsx
import TextPressure from "@/components/TextPressure";

<div className="h-[18vw] min-h-[110px] w-full">
  <TextPressure
    text="CHIAPPETTA"
    flex width weight
    italic={false}
    textColor="#fcfcfc"
    minFontSize={56}
  />
</div>
3 — Paste the design tokens
css
/* app/globals.css */
@import "tailwindcss";

@theme {
  --color-void: #080808;      /* page canvas      */
  --color-charcoal: #171617;  /* footer / panels  */
  --color-smoke: #262525;     /* content blocks   */
  --color-graphite: #393939;  /* card surface     */
  --color-bone: #fcfcfc;      /* primary text     */
  --color-ash: #d4d2d2;       /* secondary text   */
  --color-iron: #525252;      /* dividers / rules */
  --color-arterial: #fe1e34;  /* sole accent      */

  --font-display: var(--font-inter);    /* caps / UI    */
  --font-serif: var(--font-pinyon);     /* signature    */
}
4 — Wire up the fonts
tsx
// app/layout.tsx
import { Inter, Pinyon_Script } from "next/font/google";

const inter = Inter({
  variable: "--font-inter",
  subsets: ["latin"],
  weight: ["400", "500", "700", "800"],
});

const pinyon = Pinyon_Script({
  variable: "--font-pinyon",
  subsets: ["latin"],
  weight: "400",
});

// <html className={`${inter.variable} ${pinyon.variable}`}>