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
  1. Step one — begin here
  2. Step two — continue forward
  3. 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

white
50
100
200
300
400
500
700
900
950

Border Radius

sm
md
lg
xl
2xl
3xl
full

All values scale from the --radius token in globals.css. Change one value to restyle every corner site-wide.

Shadows / Elevation

smshadow-sm
mdshadow-md
lgshadow-lg
xlshadow-xl
2xlshadow-2xl

Buttons

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

DefaultSecondaryOutlineDestructive

Tags / chips (dismissible)

Brand StrategyWeb DesignDevelopmentCampaignsContent

Cards

Custom card

Card heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Minimal, flexible container.

shadcn Card
Card description text goes here

Body content using the shadcn primitive.

Dark variant

Dark card

Same card-base class on a dark background.

Tables

NameRoleStatusJoined
Alex RiveraCreative DirectorActiveJan 2022
Maya PatelStrategy LeadActiveMar 2022
Jordan LeeDesign DirectorOn leaveAug 2021
Sam TorresTech LeadActiveNov 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.

Tooltip on top
Tooltip on bottom
Tooltip on left
Tooltip on right

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

1
4px
2
8px
3
12px
4
16px
5
20px
6
24px
8
32px
10
40px
12
48px
16
64px
20
80px
24
96px
32
128px
40
160px
48
192px
64
256px

Icons

info

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

homehomehomehome
<span className="icon icon-sm|md|lg|xl">icon_name</span>

Navigation

homehome
menumenu
closeclose
searchsearch
arrow_backarrow_back
arrow_forwardarrow_forward
chevron_rightchevron_right
expand_moreexpand_more
open_in_newopen_in_new
more_horizmore_horiz

Actions

addadd
editedit
deletedelete
savesave
shareshare
downloaddownload
uploadupload
settingssettings
filter_listfilter_list
refreshrefresh

Content

imageimage
articlearticle
linklink
attach_fileattach_file
codecode
format_quoteformat_quote
folderfolder
descriptiondescription
calendar_todaycalendar_today
scheduleschedule

Communication

mailmail
phonephone
chatchat
notificationsnotifications
personperson
groupgroup
languagelanguage
sendsend
alternate_emailalternate_email
forumforum

Status & feedback

check_circlecheck_circle
errorerror
warningwarning
infoinfo
starstar
favoritefavorite
bookmarkbookmark
visibilityvisibility
thumb_upthumb_up
verifiedverified