Built for
people.
We're a small team with a large mission — building technology that genuinely improves the lives of the communities that use it.
Work with us→Technology should amplify human potential, not replace it.
Purrquinox Digital was born from a simple frustration — most software is built for scale metrics, not the people using it.
We started in online communities, building moderation and safety tooling because we lived the problems ourselves. That empathy never left. It's the lens through which every product decision is made.
Today, over 3 million users trust our products daily — from real-time safety systems to workflow tools that quietly remove friction from their lives.
We stay small on purpose. Fewer voices means faster iteration, and fewer political layers means the right idea wins regardless of who had it.
A guide to building in our visual language.
Every decision — type, colour, space — is deliberate. This guide documents the system so the whole team can build consistently and with confidence.
Archivo Black · Display — headings, hero text, section titles
Technology meets humanity.
Outfit · Body — paragraphs, labels, navigation
Crafting meaningful solutions that bridge technology and humanity.
Type Scale
Display
Hero & page titles
The quick brown fox
Heading 1
Section headings
The quick brown fox
Heading 2
Sub-section headings
The quick brown fox
Body Large
Lead paragraphs
The quick brown fox
Body
General copy
The quick brown fox
Caption
Labels, metadata, uppercase tags
The quick brown fox
Outfit Weights
Aa
400 Regular
Aa
500 Medium
Aa
600 Semibold
Aa
700 Bold
Aa
800 Extrabold
Colors are defined as CSS custom properties using the OKLCH color space for perceptual uniformity. All tokens respond to the active theme class on <html>.
Background
--background
Foreground
--foreground
Card
--card
Primary
--primary
Secondary
--secondary
Muted
--muted
Accent
--accent
Border
--border
Destructive
--destructive
Available Themes
Max width
max-w-450 (112rem)
Page padding
px-6 sm:px-12
Section vertical
py-32 sm:py-48
Border radius base
--radius: 0.625rem
Column gutter
gap-8 / gap-16 / gap-32
Grid system
12-col via Tailwind grid
Spacing Scale
Primary Link
Ghost Button
Accent Label
Human-centered design
Understanding real needs through research and continuous feedback loops.
Numbered Row
Metric
3M+
Users using our products
Card
Ready to build something?
Accent Border Section
Fade in
opacity-0 → opacity-100 + translateY(20px) → 0
Page-load reveals, hero entrance
Slide up
translateY(4–6px) → 0 on scroll intersection
Section content, numbered lists
Hover translate
translateX(0) → translateX(4px)
Arrow links, interactive rows
Transition duration
200ms for hover · 700ms for scroll reveals
All transitions
Easing
ease-out for entrances, default for micro-interactions
Standard across all motion
Reduced motion
motion-reduce:transition-none / motion-reduce:animate-none
Accessibility — always include
Radius Scale
sm
--radius-sm
md
--radius-md
base
--radius
lg
--radius-lg
xl
--radius-xl
2xl
--radius-2xl
3xl
--radius-3xl
full
—
Border Patterns
Section separator
border-border border-tFull-width horizontal rule between list items or sections
Accent top
border-accent border-t-4Heavy 4px accent-colored top border — used on CTA blocks
Card border
border-border rounded-[--radius-lg] borderSubtle 1px outline for cards and preview blocks
Input / ghost
border-border hover:border-accent borderInteractive border that lifts to accent on hover
Divider line
bg-border h-px flex-1Hairline rule inside flex layouts for section labels
Vertical rule
bg-border h-3 w-pxInline separator between roles or metadata chips
Depth is created through layered background tokens rather than shadows. Sections alternate between surfaces to create visual rhythm without needing drop shadows.
The header uses backdrop-blur-2xl bg-background/90 for a floating glass effect on scroll.
Background
z-index: 0
Page canvas, lowest surface
Secondary
z-index: 1
Subtle panel behind cards
Card
z-index: 2
Primary content surface, alternating sections
Muted
z-index: 3
Subdued inset areas, code snippets
Popover
z-index: 4
Floating menus, dropdowns
Small · 16px
Default · 20px
Large · 24px
Size — small
h-4 w-4 (16px)Inline icons, list bullets, social links
Size — default
h-5 w-5 (20px)Navigation buttons, action icons
Size — large
h-6 w-6 (24px)Feature icons, empty states
Stroke weight
strokeWidth={1.75} or {2}Outline icons; 1.75 for UI, 2 for emphasis
Fill icons
fill="currentColor"Brand logos and social icons only
Color
currentColorAlways inherit — never hardcode icon colors
Aria
aria-hidden="true"All decorative icons; pair with sr-only label if meaningful
Copy is direct, human, and free of jargon. Short sentences. Active voice. We prefer the em dash and the plain arrow over fancier alternatives.
Em dash
Technology — not jargon
Use — (em dash) with spaces for asides. Never - or --.
Arrow CTA
Explore our work →
Arrow (→) suffix on inline links. Always inside the transition span.
Sentence case
Human-centered design
Headlines and labels use sentence case. Never title case.
Uppercase labels
OUR COLLECTION
tracking-[0.2em] uppercase text-xs — section labels and metadata only.
Numbers
3M+ · 99.4% · 7
Stat values in font-archivo, large leading-none. Labels in font-outfit muted.
Contractions
We're · It's · don't
Preferred in body copy. Reads human, not corporate.
Periods in UI
Contact Us (no period)
Omit periods on buttons and link labels. Include in full sentences.
Accessibility is not a checklist — it's a constraint that makes better products. These rules apply to every component, not just the ones that seem relevant.
Reduced motion
motion-reduce:transition-noneApply alongside every animation or transition class.
Focus ring
outline-ring/50Global default via @layer base. Never suppress outline without replacement.
Icon labels
aria-label="Open navigation"Required on every icon-only button. sr-only span also accepted.
Decorative SVG
aria-hidden="true"Grain textures, decorative dividers, and background SVGs.
Color contrast
text-foreground / text-card-foregroundNever use muted-foreground as the sole text color on interactive elements.
Link targets
rel="noopener noreferrer"Required on all target="_blank" external links.
Semantic HTML
<section> / <nav> / <h1–h3>One h1 per page. Section headings follow strict hierarchy.