Two complementary typefaces — a geometric sans-serif for clarity, and a refined serif for editorial moments.
Lorem ipsum dolor sit amet consectetur adipiscing
Lorem ipsum dolor sit amet consectetur
adipiscing elit sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae. font-sans
Sed ut perspiciatis unde omnis iste natus error
Nemo enim ipsam voluptatem quia voluptas
sit aspernatur aut odit aut fugit sed quia
consequuntur magni dolores eos qui ratione
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore. style={{ fontFamily: 'var(--font-accent)' }}
The complete heading and body text scale from text-4xl down to text-xs, with corresponding pixel sizes.
Lorem ipsum dolor sit amet
text-4xl2.25rem / 36pxLorem ipsum dolor sit amet
text-3xl1.875rem / 30pxLorem ipsum dolor sit amet
text-2xl1.5rem / 24pxLorem ipsum dolor sit amet
text-xl1.25rem / 20pxLorem ipsum dolor sit amet
text-lg1.125rem / 18pxLorem ipsum dolor sit amet
text-base1rem / 16pxLorem ipsum dolor sit amet
text-sm0.875rem / 14pxLorem ipsum dolor sit amet
text-xs0.75rem / 12pxleading-noneline-height: 1Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sodales ligula in libero sed dignissim lacinia nunc curabitur tortor pellentesque nibh aenean.
leading-tightline-height: 1.25Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sodales ligula in libero sed dignissim lacinia nunc curabitur tortor pellentesque nibh aenean.
leading-normalline-height: 1.5Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sodales ligula in libero sed dignissim lacinia nunc curabitur tortor pellentesque nibh aenean.
leading-relaxedline-height: 1.625Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur sodales ligula in libero sed dignissim lacinia nunc curabitur tortor pellentesque nibh aenean.
Semantic color tokens for text and opacity modifiers for layered emphasis.
Aa
foreground
text-foregroundAa
muted-foreground
text-muted-foregroundAa
primary
text-primaryAa
destructive
text-destructiveAa
success
text-successAa
warning
text-warningAa
100%Aa
80%Aa
60%Aa
40%Aa
20%Curabitur pretium tincidunt lacus nulla gravida orci at tempor dictum. Vivamus fermentum semper porta nunc diam velit.
Curabitur pretium tincidunt lacus nulla gravida orci at tempor dictum. Vivamus fermentum semper porta nunc diam velit.
Curabitur pretium tincidunt lacus nulla gravida orci at tempor dictum. Vivamus fermentum semper porta nunc diam velit.
Curabitur pretium tincidunt lacus nulla gravida orci at tempor dictum. Vivamus fermentum semper porta nunc diam velit.
Curabitur pretium tincidunt lacus nulla gravida orci at tempor dictum. Vivamus fermentum semper porta nunc diam velit.
Common text treatments used throughout the template — from page titles to truncation.
text-xl font-semiboldLorem Ipsum Dolor Sit
text-base font-semiboldConsectetur Adipiscing
text-sm text-muted-foregroundFusce dapibus tellus ac cursus commodo tortor mauris condimentum nibh ut fermentum massa justo sit amet.
text-xs font-medium uppercase tracking-wider text-muted-foreground/70Last updated
rounded bg-muted px-1.5 py-0.5 font-mono text-xsMaecenas faucibus mollis interdum. Etiam porta sem malesuada magna npm run build donec ullamcorper nulla non metus auctor fringilla npm run start.
Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui cras justo odio dapibus ut facilisis. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor, nulla vitae elit libero a pharetra augue sed mollis interdum in commodo luctus.
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus porta ac consectetur vestibulum at eros. Aenean eu leo quam pellentesque ornare sem lacinia quam text-xl venenatis vestibulum. Cras mattis consectetur purus sit amet text-base fermentum. Donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero pharetra augue maecenas text-sm, sed posuere consectetur est at lobortis.
“Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna vel scelerisque nisl.”
Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus mus (tracking-wider), donec ullamcorper nulla non metus auctor fringilla (tabular-nums), etiam porta sem malesuada magna mollis euismod. Cras justo odio dapibus ut facilisis in, egestas eget quam nullam quis risus eget urna mollis ornare vel eu leo.
truncateDonec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Sed posuere consectetur est at lobortis.
line-clamp-1Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit. Cras mattis consectetur purus sit amet fermentum nulla vitae elit libero pharetra augue.
line-clamp-2Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et magnis dis parturient montes nascetur ridiculus mus. Morbi leo risus porta ac consectetur ac vestibulum at eros. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Duis mollis est non commodo luctus nisi erat porttitor ligula eget lacinia odio sem nec elit.
line-clamp-3Fusce dapibus tellus ac cursus commodo tortor mauris condimentum nibh ut fermentum massa justo sit amet risus. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui cras justo odio dapibus ut facilisis in egestas eget quam. Vestibulum id ligula porta felis euismod semper.
Potential accent typefaces to pair with Outfit. Each rendered at heading weight for page titles and display text.
Dashboard Overview
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Versatile UI font with optical sizing for any scale
Dashboard Overview
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Proportional sans with monospace DNA and character
Dashboard Overview
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Japanese-inspired, clean and perfectly balanced
Dashboard Overview
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Semi-rounded geometric with modern warmth
Dashboard Overview
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Modern geometric with slightly rounded terminals
Dashboard Overview
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Low-contrast geometric designed for UI clarity
Dashboard Overview
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Low-contrast geometric with a modern, minimal feel
Dashboard Overview
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Balanced rounded sans-serif with friendly warmth
Dashboard Overview
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Slightly rounded corners with a sturdy presence
Dashboard Overview
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Elegant geometric with a distinctive thin weight
Dashboard Overview
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Inspired by urban signage, bold and confident
Dashboard Overview
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Circular geometric with international personality
Dashboard Overview
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Clean and friendly humanist for approachable UI
Dashboard Overview
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Wide apertures with a distinctive brand presence
Dashboard Overview
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Vintage-inspired, elegant with high x-height
Dashboard Overview
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Rounded geometric with a soft, friendly feel
Dashboard Overview
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
High-performance grotesque for dense interfaces
Dashboard Overview
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
Optimized for screen use at medium sizes