Valencia
Style Guide
A living reference for typography, color, spacing, and UI components. Update globals.css to propagate changes across the entire system.
Typography
Display
The quick brown fox.
H1
The quick brown fox.
H2
The quick brown fox.
H3
The quick brown fox.
H4
The quick brown fox jumps over the lazy dog.
H5
The quick brown fox jumps over the lazy dog.
H6
The quick brown fox jumps over the lazy dog.
Body Large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Body Medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Body Small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Eyebrow
Section label · Category tag · Metadata
Rich Text
Apply rich-text to any wrapper around CMS-rendered HTML. All native elements are styled — no extra classes needed inside.
Section heading (h2)
Regular paragraph with bold text, italic text, and an inline link with underline. Content flows naturally from a CMS like Sanity without editors needing to manage classes.
This is a blockquote. Use it for pull quotes, testimonials, or highlighted callouts within long-form content.
Sub-heading (h3)
More body copy. Reference technical terms with inline code for API names, file paths, or keyboard shortcuts.
- Unordered list item one — supporting detail
- Unordered list item two — more context
- Unordered list item three — final point
- Step one — begin here
- Step two — continue forward
- Step three — finish strong
// Code block — for technical documentation
const greet = (name: string) => `Hello, ${name}`
console.log(greet('Valencia'))Content continues after a horizontal rule, used to separate distinct sections within long-form articles.
Color Palette
Border Radius
All values scale from the --radius token in globals.css. Change one value to restyle every corner site-wide.
Shadows / Elevation
Buttons
Destructive
With icon
Icon only
States
Form Elements
Text inputs
Please enter a valid email address.
Username is available.
Select / Dropdown
Checkboxes
Radio buttons
Badges & Tags
shadcn badges
Tags / chips (dismissible)
Cards
Custom card
Card heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Minimal, flexible container.
Dark variant
Dark card
Same card-base class on a dark background.
Tables
| Name | Role | Status | Joined | |
|---|---|---|---|---|
| Alex Rivera | Creative Director | Active | Jan 2022 | |
| Maya Patel | Strategy Lead | Active | Mar 2022 | |
| Jordan Lee | Design Director | On leave | Aug 2021 | |
| Sam Torres | Tech Lead | Active | Nov 2023 |
Breadcrumbs
Pagination
Tabs
Content for the Overview tab would appear here, driven by CMS or static content.
Tooltips
Hover each button to see the tooltip.
Skeleton / Loading States
Text content
Card
List rows
Empty States
No results found
Try adjusting your search or filters to find what you're looking for.
Nothing here yet
Get started by creating your first item. It only takes a minute.
Spacing Scale
Icons
Material Symbols Outlined — default icon library
The icon library is a per-project decision set when forking. Swap the <link> in app/layout.tsx and update the font-family in the .icon utility in globals.css.
Usage
<span className="icon icon-sm|md|lg|xl">icon_name</span>Navigation
Actions
Content
Communication
Status & feedback