Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/oracle/llms.txt

Use this file to discover all available pages before exploring further.

Oracle’s visual identity is built on a single premise: a dark, semi-translucent interface that feels like illuminated parchment floating in a void. Every design decision — the near-black backgrounds, the cold turquoise glow, the neon particle trails, the blurred card surfaces — flows from that premise. Rather than relying on a design-system library, Oracle implements this aesthetic directly in Tailwind CSS through five custom color tokens, three curated font stacks, and a small set of utility patterns for glow, blur, and 3D depth.

​
Color Tokens

Five custom tokens are registered in the Tailwind configuration and used throughout the codebase as first-class utility classes (bg-*, text-*, border-*, shadow-*).
TokenHex ValueUsage
turquoise#1de9b6Accent color, borders, glow effects, active states
dark#051618Page background
midnight#0a2a2eCard and panel backgrounds
parchment#fdf6e3Primary text color
gold#e8c468Secondary accent, company names, card labels
The pairing of dark and midnight creates a subtle two-tone depth on the page: the dark base recedes fully, while midnight panels float slightly forward. turquoise and gold act as complementary accent temperatures — the cold neon of turquoise for interactive chrome, the warm amber of gold for content labels.

​
Typography

Oracle uses three distinct font stacks, each assigned a semantic role:
StackClassRole
Seriffont-serifHeadings, sidebar name label, section titles
Monospacefont-monoMetadata, dates, tags, subtitle labels
Sans-seriffont-sansBody copy, descriptions, paragraph text
The combination of font-serif for display text and font-mono for metadata is central to the grimoire aesthetic: serif faces carry the weight and authority of old typesetting, while monospace faces read as arcane notation or cipher text. font-sans is reserved for longer reading passages where legibility takes precedence over character.

​
Glow Effects

Glow effects are produced entirely with box-shadow, using RGBA values of turquoise (29, 233, 182) at very low opacity to create a diffuse neon halo without washing out surrounding content: 
/* Soft ambient glow — used on cards and panels */
box-shadow: 0 0 50px rgba(29, 233, 182, 0.1);

/* Active element glow — used on the nav rail and cursor */
box-shadow: 0 0 12px rgba(29, 233, 182, 0.6);

/* Strong focus glow — used on hovered interactive elements */
box-shadow: 0 0 24px rgba(29, 233, 182, 0.8);
In Tailwind these are expressed with the arbitrary value syntax: 
<div class="shadow-[0_0_50px_rgba(29,233,182,0.1)]">
  <!-- card content -->
</div>
The opacity values are intentionally graduated: ambient elements glow faintly at 0.1, active states step up to 0.6, and focused or hovered states peak at 0.8. This range prevents the entire UI from competing for attention simultaneously — only the element the user is interacting with blazes at full intensity.

​
3D Effects

Several UI elements — most notably the project and work experience cards — implement a physical card-flip interaction using CSS 3D transforms. Three CSS properties work in concert to make this possible: 
/* Applied to the flip container */
transform-style: preserve-3d;

/* Applied to each card face individually */
backface-visibility: hidden;

/* Applied to the back face to pre-rotate it */
transform: rotateY(180deg);
preserve-3d tells the browser to render the element’s children in a shared 3D space rather than flattening them into the 2D plane. backface-hidden ensures each face is invisible when rotated away from the viewer — without it, both faces would be visible simultaneously as semi-transparent overlaps. Framer Motion animates the parent container’s rotateY from 0deg to 180deg on interaction, flipping between the front and back faces. In Tailwind these map to: 
<div class="[transform-style:preserve-3d]">
  <div class="backface-hidden"><!-- front --></div>
  <div class="backface-hidden [transform:rotateY(180deg)]"><!-- back --></div>
</div>

​
Backdrop Blur

Cards and panels use semi-transparent midnight backgrounds paired with backdrop-blur-md or backdrop-blur-sm to create a frosted-glass effect. The background gradients and ambient glow layers beneath the card remain visible but softened, giving panels the illusion of depth without requiring actual compositing: 
<!-- Standard frosted card -->
<div class="bg-midnight/60 backdrop-blur-md border border-turquoise/10 rounded-xl">
  <!-- content -->
</div>

<!-- Lighter overlay panel -->
<div class="bg-midnight/30 backdrop-blur-sm">
  <!-- content -->
</div>
The transparency values (/60, /30) are chosen so that higher-priority panels are more opaque and therefore more visually distinct from the background, while secondary overlays remain translucent enough to preserve the sense of layered depth.
mix-blend-mode: screen is applied to both the CustomCursor outer ring and the smoke overlay that fires between page transitions. In screen blending, the element’s color is added to the colors beneath it rather than painted over them — so the turquoise ring and smoke layer brighten whatever they pass over rather than obscuring it. On the near-black dark background this is nearly invisible, but over lighter content elements the effect produces a subtle luminous wash that reinforces the mystical atmosphere without competing with legible text.

Build docs developers (and LLMs) love

Get started for freeTalk to us