📦 deps(thirdparty): update snapshots
This commit is contained in:
ci[bot]
@@ -0,0 +1,247 @@
|
||||
---
|
||||
name: typography-first
|
||||
description: Web and App implementation guide for Typography First Design. Trigger when user wants text as the absolute main visual element, with minimal UI chroming.
|
||||
date_added: "2026-06-17"
|
||||
risk: safe
|
||||
source: self
|
||||
source_type: self
|
||||
---
|
||||
|
||||
# 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**:
|
||||
```css
|
||||
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;
|
||||
}
|
||||
|
||||
.hero-type:hover {
|
||||
color: var(--cta-highlight);
|
||||
-webkit-text-stroke: 0;
|
||||
}
|
||||
|
||||
.nav-text-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #F5F5F0;
|
||||
font-size: 2rem;
|
||||
font-family: 'Helvetica Neue', sans-serif;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
```
|
||||
|
||||
## App Implementation
|
||||
|
||||
### SwiftUI
|
||||
```swift
|
||||
struct TypographyFirstView: View {
|
||||
var body: some View {
|
||||
ZStack {
|
||||
Color(hex: "0A0A0A").ignoresSafeArea()
|
||||
|
||||
VStack {
|
||||
// Massive Typography Bleeding Off Edge
|
||||
Text("THE WORDS ARE THE INTERFACE")
|
||||
.font(.custom("Anton", size: 200)) // Absurdly large
|
||||
.foregroundColor(Color(hex: "F5F5F0"))
|
||||
.lineLimit(1)
|
||||
.fixedSize(horizontal: true, vertical: false) // Force no wrapping
|
||||
.minimumScaleFactor(1.0) // Prevent auto-shrinking
|
||||
|
||||
// Outlined variant
|
||||
Text("NO CHROMING")
|
||||
.font(.custom("Anton", size: 150))
|
||||
.foregroundColor(.clear)
|
||||
.overlay(
|
||||
Text("NO CHROMING")
|
||||
.font(.custom("Anton", size: 150))
|
||||
.foregroundColor(Color(hex: "0A0A0A"))
|
||||
// Hack for text stroke in SwiftUI
|
||||
.shadow(color: Color(hex: "F5F5F0"), radius: 1)
|
||||
)
|
||||
.lineLimit(1)
|
||||
.fixedSize()
|
||||
}
|
||||
.frame(maxWidth: .infinity, alignment: .leading)
|
||||
.padding(.leading, -20) // Intentionally cut off
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
- Use `.fixedSize(horizontal: true, vertical: false)` and `.lineLimit(1)` to force massive fonts to bleed off the edge of the screen rather than wrapping into a paragraph.
|
||||
- Native text-stroke is difficult in SwiftUI; overlapping a masked text or using thin shadows is the common workaround.
|
||||
|
||||
### Flutter
|
||||
```dart
|
||||
class TypographyFirstScreen extends StatelessWidget {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: const Color(0xFF0A0A0A),
|
||||
body: Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
// Auto-scaling hero text
|
||||
FittedBox(
|
||||
fit: BoxFit.cover,
|
||||
child: Text(
|
||||
'THE WORDS ARE',
|
||||
style: TextStyle(fontFamily: 'Anton', color: const Color(0xFFF5F5F0), height: 0.8),
|
||||
),
|
||||
),
|
||||
|
||||
// Outlined text
|
||||
FittedBox(
|
||||
fit: BoxFit.cover,
|
||||
child: Stack(
|
||||
children: [
|
||||
// Outline
|
||||
Text(
|
||||
'THE INTERFACE',
|
||||
style: TextStyle(
|
||||
fontFamily: 'Anton', height: 0.8,
|
||||
foreground: Paint()..style = PaintingStyle.stroke..strokeWidth = 2..color = const Color(0xFFF5F5F0),
|
||||
),
|
||||
),
|
||||
// Solid fill (transparent)
|
||||
const Text('THE INTERFACE', style: TextStyle(fontFamily: 'Anton', height: 0.8, color: Colors.transparent)),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
```
|
||||
- `FittedBox` with `BoxFit.cover` is your best friend here. It ensures the text takes up the maximum possible width/height regardless of the device screen size.
|
||||
- Flutter makes text outlines easy by using `foreground: Paint()..style = PaintingStyle.stroke` in the `TextStyle`.
|
||||
|
||||
### React Native
|
||||
```jsx
|
||||
const { width } = Dimensions.get('window');
|
||||
|
||||
const TypographyFirstScreen = () => {
|
||||
return (
|
||||
<View style={{ flex: 1, backgroundColor: '#0A0A0A', justifyContent: 'center' }}>
|
||||
|
||||
{/* Massive Text */}
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={{ fontFamily: 'Anton-Regular', fontSize: width * 0.4, color: '#F5F5F0', lineHeight: width * 0.35, marginLeft: -20 }}
|
||||
>
|
||||
WORDS ARE
|
||||
</Text>
|
||||
|
||||
{/* Outlined Text (Not supported natively in standard React Native Text, requires SVG or shadows) */}
|
||||
<Text
|
||||
numberOfLines={1}
|
||||
style={{
|
||||
fontFamily: 'Anton-Regular', fontSize: width * 0.35, color: '#0A0A0A', lineHeight: width * 0.3,
|
||||
textShadowColor: '#F5F5F0', textShadowOffset: {width: -1, height: 1}, textShadowRadius: 1
|
||||
}}
|
||||
>
|
||||
INTERFACE
|
||||
</Text>
|
||||
|
||||
{/* Typography Button */}
|
||||
<TouchableOpacity style={{ marginTop: 40, alignSelf: 'center' }}>
|
||||
<Text style={{ color: '#F5F5F0', fontSize: 24, textDecorationLine: 'underline' }}>
|
||||
Explore Now
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
|
||||
</View>
|
||||
);
|
||||
};
|
||||
```
|
||||
- Rely on `Dimensions.get('window').width` to calculate extreme font sizes dynamically (e.g., `fontSize: width * 0.4`).
|
||||
- Use `numberOfLines={1}` and negative margins to allow the text to act as a graphic element bleeding off the screen.
|
||||
|
||||
### Jetpack Compose
|
||||
```kotlin
|
||||
@Composable
|
||||
fun TypographyFirstScreen() {
|
||||
Column(
|
||||
modifier = Modifier.fillMaxSize().background(Color(0xFF0A0A0A)),
|
||||
verticalArrangement = Arrangement.Center
|
||||
) {
|
||||
// Massive Text
|
||||
Text(
|
||||
text = "THE WORDS ARE",
|
||||
color = Color(0xFFF5F5F0),
|
||||
fontSize = 120.sp, // Absurd size
|
||||
fontFamily = FontFamily.SansSerif, // Replace with Anton
|
||||
lineHeight = 100.sp,
|
||||
softWrap = false, // Force bleed off edge
|
||||
modifier = Modifier.offset(x = (-20).dp)
|
||||
)
|
||||
|
||||
// Outlined Text
|
||||
Text(
|
||||
text = "THE INTERFACE",
|
||||
fontSize = 100.sp,
|
||||
fontFamily = FontFamily.SansSerif,
|
||||
lineHeight = 90.sp,
|
||||
softWrap = false,
|
||||
style = TextStyle(
|
||||
drawStyle = Stroke(
|
||||
miter = 10f,
|
||||
width = 2f,
|
||||
join = StrokeJoin.Round
|
||||
)
|
||||
),
|
||||
color = Color(0xFFF5F5F0) // The stroke color
|
||||
)
|
||||
}
|
||||
}
|
||||
```
|
||||
- Set `softWrap = false` on `Text` to prevent it from wrapping and ruining the massive headline aesthetic.
|
||||
- Compose fully supports text outlines natively using `style = TextStyle(drawStyle = Stroke(...))`.
|
||||
|
||||
## Do's and Don'ts
|
||||
- **DO**: Mix filled text and outlined text (using `-webkit-text-stroke`) for visual interest.
|
||||
- **DON'T**: Wrap the text in cards or containers. Let it bleed into the background.
|
||||
|
||||
## Limitations
|
||||
- This is a styling reference and does not replace environment-specific validation, accessibility testing, or expert review.
|
||||
- Ensure appropriate contrast ratios and responsive behaviors are verified separately.
|
||||
Reference in New Issue
Block a user