Typography First Design

Typography First Design

"The words are the interface. No distractions, just beautiful text."

When to Use

Use this sub-style when the user's request matches the aesthetic described above. This is a child reference of the design-it skill and is not meant to be triggered directly.

Core Principles

1. Hyper-Sized Typography: The main headline is so large it becomes an abstract graphic element.
2. Minimal UI Chroming: Buttons are just text. Navigation is just text. No boxes, no backgrounds.
3. Kinetic Typography: Text that moves, scrolls, or reacts to the user's cursor.

Visual DNA

• Colors: Extreme high contrast. Pure black and white, or a very dark background with a single neon accent color. Midnight Luxury works well.
• Typography: Display fonts with extreme character. Try Oswald, Anton, or Bebas Neue for impact, or a massive serif.
• Layout: Often centers the massive text perfectly in the viewport, cutting off at the edges.

Web Implementation

• Rely on vw and vh units for font sizing so the text perfectly fills the screen.
• CSS Example:

body {
  background-color: #0A0A0A;
  color: #F5F5F0;
  overflow-x: hidden;
  margin: 0;
}

.hero-type {
  font-family: 'Anton', sans-serif;
  font-size: 25vw; /* Fills the width of the screen */
  text-transform: uppercase;
  line-height: 0.8;
  white-space: nowrap;
  
  /* Outline effect */
  color: transparent;
  -webkit-text-stroke: 2px #F5F5F0;
  transition: color 0.3s;