Sorcerer’s visual identity is built on a tightly controlled design system: six named Tailwind color tokens that span the deep-ocean backgrounds and glowing teal accents, paired with two Google Fonts families that separate decorative display text from readable UI labels. Every color reference throughout the codebase uses these semantic token names —Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/sorcerer/llms.txt
Use this file to discover all available pages before exploring further.
bg-midnight-dark, text-turquoise-glow, border-velvet-purple — so a single change in tailwind.config.js propagates instantly to every component that references it.
Color Palette
The six tokens below cover every surface, text layer, and accent in the portfolio. Each is defined as a named CSS class in the compiled stylesheet and referenced throughout the component tree by its Tailwind utility name.| Token | Hex | Usage |
|---|---|---|
midnight-base | #0a1f2e | Page background (body, full-screen section backgrounds) |
midnight-dark | #0d2a3a | Card and panel backgrounds, scrollbar track |
moonlight-silver | #e2e8f0 | Primary body text, headings on dark surfaces |
turquoise-glow | #2dd4bf | Accent borders, glow effects, links, active states |
turquoise-light | #5eead4 | Hover states, subtitle labels, skill node highlights |
velvet-purple | #1e1b4b | Timeline markers, blog card borders, secondary accents |
Changing Colors
In the source repository, all six tokens are registered undertheme.extend.colors in tailwind.config.js. Updating any hex value here and rebuilding will propagate the change to every Tailwind utility class that references that token name.
'turquoise-glow': '#2dd4bf' with 'turquoise-glow': '#f59e0b' and run a fresh build. Because turquoise-glow is also used as a raw hex literal (#2dd4bf) inside the two custom CSS classes described below, update those values in assets/main.css as well to keep glow effects consistent.
Typography
Sorcerer uses two typefaces loaded from Google Fonts, each assigned a distinct role in the UI. Cormorant Garamond (serif) is applied to all heading elements (h1–h6), the portfolio owner’s name on the home page, section titles, project card titles, work history role names, blog post titles, and any text carrying the .font-serif class. It is loaded in four upright weights (400, 500, 600, 700) plus italic 400, giving headings a range from elegant light displays to bold statements. Its high-contrast letterforms and long ascenders reinforce the mystical, antiquarian tone of the portfolio.
Inter (sans-serif) is applied to body copy, navigation labels, technology tags, date strings, form inputs, and any element with the .font-sans class. It is loaded in weights 300, 400, 500, and 600, providing crisp legibility at small sizes while remaining neutral enough not to compete with the serif display text.
The full Google Fonts import, placed at the top of assets/main.css, is:
font-family declarations — Cormorant Garamond, serif for headings and Inter, sans-serif for body text — in the global base styles.
Custom CSS Effects
Two hand-authored utility classes inassets/main.css extend Tailwind’s utilities with multi-layer visual effects that are not expressible through standard Tailwind alone.
.text-glow applies a two-layer turquoise text shadow to create a soft luminous halo around text. It is used on the tagline (“FULL STACK SORCERER”) on the home page hero.
.box-glow applies an outer box shadow and an inset box shadow using semi-transparent turquoise to give project cards the impression of emitting light from within. It is used on the front and back faces of the project flip cards.
className prop and are available to any element in the component tree.