Style Guide
Urbanite Style Guide
A comprehensive guide to the typography and design system used in the Urbanite Ghost theme.
Typography System
Font Families
Urbanite uses a carefully curated font pairing optimized for readability and modern aesthetics:
Primary Font: Satoshi
- Weights: 300 (Light), 400 (Regular), 500 (Medium), 600 (Semibold), 700 (Bold)
- Source: FontShare
- Fallback: Inter, -apple-system, BlinkMacSystemFont, sans-serif
Code Font: JetBrains Mono
- Fallbacks: Fira Code, Menlo, Courier, monospace
- Optimized for code readability
/* Font Stack */
--font-display: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
--font-body: 'Satoshi', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-code: 'JetBrains Mono', 'Fira Code', Menlo, Courier, monospace;
Font Sizes
Display Typography
| Element | Size | Mobile | Line Height | Usage |
|---|---|---|---|---|
| H1 Hero | clamp(2.5rem, 6vw, 4rem) | 40px → 64px | 1.15 | Hero titles, featured posts |
| H1 Post | clamp(1.75rem, 4vw, 2.5rem) | 28px → 40px | 1.2 | Article titles |
| H2 | clamp(1.5rem, 3vw, 2rem) | 24px → 32px | 1.25 | Section headings |
| H3 | clamp(1.25rem, 2.5vw, 1.5rem) | 20px → 24px | 1.3 | Subsection headings |
| H4 | 1.125rem | 18px | 1.35 | Card titles |
| H5 | 1rem | 16px | 1.4 | Small headings |
| H6 | 0.875rem | 14px | 1.45 | Minor headings |
Body Typography
| Element | Size | Mobile | Line Height | Usage |
|---|---|---|---|---|
| Body Large | 1.25rem | 20px | 1.6 | Article content (desktop) |
| Body Base | 1.125rem | 18px | 1.6 | Article content (mobile) |
| Body Small | 1rem | 16px | 1.6 | Excerpts, descriptions |
| Caption | 0.875rem | 14px | 1.5 | Image captions, metadata |
UI Typography
| Element | Size | Weight | Usage |
|---|---|---|---|
| Logo | 1.5rem (24px) | 700 | Site branding |
| Navigation | 0.875rem (14px) | 500 | Menu items |
| Tags | 0.75rem (12px) | 600 | Category labels |
| Buttons | 0.875rem (14px) | 500 | CTAs |
| Author Name | 0.875rem (14px) | 500 | Bylines |
Font Weights
| Name | Value | Usage |
|---|---|---|
| Light | 300 | Subtle text, decorative elements |
| Normal | 400 | Body text, descriptions |
| Medium | 500 | Navigation, buttons, emphasis |
| Semibold | 600 | Subheadings, links |
| Bold | 700 | Headings, titles, strong emphasis |
/* CSS Variables */
--font-light: 300;
--font-normal: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
Letter Spacing
| Context | Value | Usage |
|---|---|---|
| Tight headings | -0.02em | H1-H3 for visual impact |
| Medium headings | -0.01em | H4-H6 |
| Normal | 0 | Body text, paragraphs |
| Wide uppercase | 0.05em | Tags, labels, buttons |
Typography Examples
Headings
Heading 1
The largest heading for hero sections and main page titles.
Heading 2
Section headings that divide content into major parts.
Heading 3
Subsection headings for organizing content within sections.
Heading 4
Used for card titles and smaller content divisions.
Heading 5
Minor headings for detailed content organization.
Heading 6
The smallest heading, rarely used but available for deep hierarchy.
Body Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
This is a bold text example for strong emphasis.
This is an italic text example for subtle emphasis.
This is strikethrough text for deleted content.
Inline Elements
This is an inline code example within a sentence.
This is a hyperlink example.
This is highlighted text for special attention.
Blockquotes
"A well-designed typography system is invisible. Readers shouldn't notice the fonts—they should simply enjoy reading."
— Design Principles
★★★★★
"Typography is the craft of endowing human language with a durable visual form."
— Robert Bringhurst, The Elements of Typographic Style
Lists
Unordered List
- First item
- Second item
- Nested item
- Another nested item
- Third item
Ordered List
- Step one
- Step two
- Nested step
- Another nested step
- Step three
Code Block
/* Typography Scale Example */
:root {
--font-s-xs: 0.75rem; /* 12px */
--font-s-sm: 0.875rem; /* 14px */
--font-s-md: 1rem; /* 16px */
--font-s-lg: 1.125rem; /* 18px */
--font-s-xl: 1.25rem; /* 20px */
--font-s-2xl: 1.5rem; /* 24px */
--font-s-3xl: 1.875rem; /* 30px */
--font-s-4xl: 2.25rem; /* 36px */
}
Tables
| # | Name | Role | Status | Date |
|---|---|---|---|---|
| 1 | Alice Johnson | Designer | Active | Jan 15 |
| 2 | Bob Smith | Developer | Active | Jan 18 |
| 3 | Carol White | Manager | Away | Feb 02 |
Colors
Text Colors (Light Mode)
| Variable | Value | Usage |
|---|---|---|
--color-primary |
#000000 | Primary text, headings |
--color-base |
#0a0a0a | Base text, near black |
--color-text |
#1a1a1a | Body text |
--color-text-secondary |
#6b6b6b | Secondary text, metadata |
--color-text-muted |
#9a9a9a | Muted text, placeholders |
--color-border |
#e5e7eb | Borders, dividers |
--color-border-subtle |
#f0f0f0 | Subtle borders |
Text Colors (Dark Mode)
| Variable | Value | Usage |
|---|---|---|
--color-text |
#e8e8e8 | Body text |
--color-text-secondary |
#a0a0a0 | Secondary text |
--color-border |
#374151 | Borders, dividers |
Accent Colors
| Name | Value | Usage |
|---|---|---|
| Success | #2d9c3c | Success messages |
| Error | #dc2626 | Error messages |
Spacing Scale
| Token | Value | Usage |
|---|---|---|
--space-xs |
0.25rem (4px) | Tight spacing |
--space-sm |
0.5rem (8px) | Small gaps |
--space-md |
1rem (16px) | Base spacing |
--space-lg |
1.5rem (24px) | Medium spacing |
--space-xl |
2rem (32px) | Large spacing |
--space-2xl |
3rem (48px) | XL spacing |
--space-3xl |
4rem (64px) | XXL spacing |
--space-4xl |
6rem (96px) | Section spacing |
Layout Dimensions
| Element | Value | Description |
|---|---|---|
| Max Container | 1320px | Maximum content width |
| Content Width | 720px | Optimal reading width |
| Breakpoint XL | 1680px | Extra large screens |
| Breakpoint LG | 1280px | Large screens |
| Breakpoint MD | 980px | Medium screens |
| Breakpoint SM | 740px | Small screens |
| Breakpoint XS | 480px | Extra small screens |
Typography Best Practices
1. Hierarchy
- Use H1 for page titles (one per page)
- Use H2 for major sections
- Use H3-H6 for nested content organization
- Maintain clear visual distinction between heading levels
2. Readability
- Keep body text between 1.125rem - 1.25rem for optimal reading
- Use line-height of 1.5-1.6 for paragraphs
- Limit line length to 60-75 characters for best readability
- Use medium (500) weight for navigation, not bold
3. Contrast
- Ensure text has sufficient contrast against backgrounds
- Use secondary text color for metadata, timestamps
- Reserve bold weight (700) for true emphasis only
4. Consistency
- Use predefined sizes from the scale, don't arbitrary values
- Maintain consistent spacing between related elements
- Use letter spacing sparingly—mostly for headings and tags
5. Responsive Typography
- Use clamp() for fluid scaling between breakpoints
- Test text at actual device sizes
- Adjust line-height for smaller screens
Tailwind Typography Classes
This theme uses Tailwind CSS with these common typography classes:
Font Sizes
<!-- Responsive text -->
<h1 class="text-4xl md:text-5xl lg:text-6xl">Hero Title</h1>
<!-- Custom responsive sizing with CSS -->
<h2 style="font-size: clamp(1.5rem, 3vw, 2rem);">Section Title</h2>
Font Weights
<p class="font-light">Light text</p>
<p class="font-normal">Normal text</p>
<p class="font-medium">Medium text</p>
<p class="font-semibold">Semibold text</p>
<p class="font-bold">Bold text</p>
Letter Spacing
<h3 class="tracking-tight">Tight heading</h3>
<p class="tracking-normal">Normal body</p>
<span class="tracking-wide uppercase">Wide tag text</span>
Line Heights
<p class="leading-tight">Tight leading (1.25)</p>
<p class="leading-normal">Normal leading (1.5)</p>
<p class="leading-relaxed">Relaxed leading (1.625)</p>
Custom Elements
Drop Cap
First paragraphs in articles can feature a drop cap for editorial style:
.gh-content > p:first-of-type::first-letter {
font-size: 4.5em;
line-height: 0.9;
float: left;
margin-right: 0.15em;
}
Selection Style
Text selection uses inverted colors for emphasis:
::selection {
background-color: #000000;
color: #ffffff;
}
Dark Mode Typography
All typography automatically adapts to dark mode with these adjustments:
- Increased contrast for body text (#e8e8e8)
- Softened secondary text (#a0a0a0)
- Adjusted borders for dark backgrounds (#374151)
- Maintained font weights and sizes for consistency
Resources
- Satoshi Font: FontShare
- JetBrains Mono: JetBrains
- Tailwind Typography: Documentation
- Ghost CMS: Documentation
This style guide is automatically generated from the Urbanite theme's design tokens. For the most up-to-date values, refer to the theme's CSS files.