Crency

Overview

Crency is a design and development agency that builds high-conviction digital products through a distinctive aesthetic rooted in **Expressive Maximalism with Technical Precision**. The brand personality merges playful irreverence with strategic rigor: bold, oversized typography (Nauryzredkeds at 160px), electric lime accents (#c2ec40) cutting through a deep purple canvas (#150734), and hand-drawn vector flourishes (animated SVG line illustrations) create an environment that feels both energetic and trustworthy. The UI evokes a sense of creative confidence—not sterile, not corporate, but unmistakably intentional. Every interaction feels like a conversation with a designer who knows exactly what they're doing.

The brand voice is direct, conversational, and slightly irreverent. Crency speaks in short, punchy sentences: "Websites people trust. Designed to sell." "We craft brands and digital products that scale." The vocabulary avoids jargon; instead, it uses concrete, human language. Tone is assured without arrogance, playful without being flippant. Example sentence in Crency's voice: "Three weeks from strategy to launch—because waiting six months for a website is absurd."

Colors

Crency's color system is built on a **high-contrast, accent-driven hierarchy** that prioritizes visual impact and brand recognition. The foundational surface is a deep, near-black purple (#150734, RGB 21, 7, 52), which serves as the canvas for all interactive elements. This dark base is not neutral—it's intentionally saturated, creating a sense of depth and sophistication that prevents the interface from feeling flat or cold.

**Primary accent (Lime Green, #c2ec40)** is the signature call-to-action color, used exclusively on primary buttons ("get my free audit"), interactive highlights, and animated SVG strokes. It commands attention without aggression; the high luminance contrast against the purple surface (WCAG AAA compliant) ensures accessibility while maintaining visual drama. Apply pr

Typography

Crency employs a **two-typeface system** that balances expressive display with functional clarity. **Nauryzredkeds** (custom, loaded via @font-face from /fonts/NauryzRedKeds-s1.woff2) is the hero typeface—used exclusively for headlines and display text at sizes 40px and above. It is a geometric, slightly condensed sans-serif with a distinctive personality; its proportions feel modern and playful, never corporate. At 160px (h1), it commands the entire viewport; at 56px (headline-lg), it still dominates. **IBMPlexSans** (loaded from /fonts/IBMPlexSans-VF-s1.woff2) handles all body copy, labels, and UI text. It is a neutral, highly legible workhorse that doesn't compete with Nauryzredkeds but supports it.

The type hierarchy is deliberately compressed: display (160px, 400 weight) drops direct

Layout

Crency uses a **fluid, centered layout** with a max-width of 1280px (container-max-width: 1280px) and a 12-column grid. The page rhythm is generous: sections are separated by lg spacing (40px) vertically, creating breathing room that prevents visual fatigue. The hero section uses full-width background imagery with a centered container inside, allowing decorative elements (animated SVG lines, badges) to break the grid and create visual interest.

Whitespace is treated as a design element, not an afterthought. The gutter between columns is 24px (spacing.md), and card padding is consistently 24px, creating a modular, predictable rhythm. On mobile, the layout compresses to a single column with sm spacing (12px) between sections, maintaining the visual hierarchy without sacrificing readability.

Elevation & Depth

Depth in Crency is achieved through **layered transparency and subtle shadows**, not through dramatic drop shadows. The design uses a three-level elevation system:

**Level 1 (Base)**: The background surface (#150734) with no shadow or border. This is the canvas.

**Level 2 (Standard Cards & Inputs)**: backdrop-filter: blur(8px), background: rgba(211, 197, 246, 0.06), border: 1px solid rgba(211, 197, 246, 0.12). This creates a frosted-glass effect that feels modern and cohesive. On hover, increase the background opacity to rgba(211, 197, 246, 0.12) and the border to rgba(211, 197, 246, 0.2), w

Shapes

Crency's shape language is **Playful Precision**—a blend of soft, approachable curves and sharp, technical edges that reflects the brand's dual nature (creative + strategic). The rounded scale is deliberately varied:

**Buttons use full (border-radius: 9999px)** for primary CTAs, creating a pill shape that feels friendly and clickable. Secondary buttons use lg (1rem / 16px) for a slightly more structured appearance. This distinction helps users quickly identify action hierarchy.

**Cards and containers use xl (1.5rem / 24px)** for a modern, spacious feel that prevents the interface from feelin

Components

Action Elements

**button-primary** is the hero CTA, used for "get my free audit" and other high-priority actions. It uses background: {colors.primary} (#c2ec40), text-color: {colors.on-primary} (#150734), border-radius: 9999px (full pill shape), padding: 12px 28px, height: 44px, font-weight: 700, font-size: 12px. On hover, transition the background to {colors.primary-fixed-dim} (#a8d620) over 200ms with cubic-bezier(0.2, 0, 0, 1) easing. The button should have no border and a subtle box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) to lift it off the surface.

**button-secondary** uses background: {colors.secondary} (#f04c8a), text-color: {colors.on-secondary} (#ffffff), border-radius: 1rem (lg), padding: 12px 24px, height: 44px. On hover, transition to background: {colors.secondary-containe

Do's and Don'ts

**Do**

• Do use {colors.primary} (#c2ec40) exclusively for primary CTAs and focus states—it is the brand's signature accent and should never be diluted or used casually.
• Do apply backdrop-filter: blur(8px) and subtle borders (rgba(211, 197, 246, 0.12)) to all card surfaces to maintain the frosted-glass aesthetic and visual cohesion.
• Do use Nauryzredkeds for all headlines 40px and above; it is the expressive voice of the brand and should dominate the visual hierarchy.
• Do apply letter-spacing: -0.02em on display text (160px) and -0.015em on headline-lg (56px) to tighten letterforms and increase impact.
• Do use full (9999px) border-radius on primary buttons and badges to create a playful, approachable feel that aligns with the brand personality.

**Don't**

• Don't use drop shadows (box-shadow with large blur values) on cards or containers; rely instead on backdrop-filter, border opacity, and background color shifts to create depth.
• Don't apply {colors.primary} (#c2ec40) to body text or secondary UI elements—it should be reserved for high-priority interactive elements only.
• Don't mix Nauryzredkeds and IBMPlexSans at the same size or weight; maintain clear visual separation by using Nauryzredkeds for headlines (40px+) and IBMPlexSans for body/UI (18px and below).
• Don't use pure white (#ffffff) or pure black (#000000) in the interface; stick to the defined color tokens (on-surface: #d3c5f6, surface: #150734) to maintain brand consistency and reduce eye strain.
• Don't apply border-radius smaller than 0.5rem (8px) on interactive elements; the brand uses generous rounding to feel modern and approachable, not technical or austere.