REF Digital

Overview

REF Digital is a digital agency engineering e-commerce platforms, apps, websites, and experiences for businesses thriving in a digital-first economy. The brand embodies Architectural Minimalism—a design philosophy that strips away ornament to reveal essential structure, combining geometric precision with warm, tactile materiality. The aesthetic evokes clarity, intentionality, and craftsmanship: every pixel serves a purpose, every color choice is deliberate. Users encounter a serene, no-nonsense interface that prioritizes substance and respects their time.

The brand voice is direct, confident, and grounded. REF speaks in declarative statements without breathlessness or hype: 'Move fast, build to last' is the north star. The vocabulary is concrete and action-oriented—'engineer,' 'build,' 'thrive'—never vague or aspirational. Tone is warm but professional, with dry wit and intellectual rigor. Example sentence in brand voice: 'We've broken enough things already; let's build something that lasts.'

Colors

The color system centers on a sophisticated greige palette—warm, desaturated earth tones that evoke natural materials and timeless craft. Primary (#000000) is pure black, used exclusively for text, CTAs, and structural elements; it commands attention without aggression. Secondary (#eeffa8) is a luminous, slightly acidic lime-green that appears as an accent highlight, drawing focus to key interactions and status indicators. Tertiary (#8a7f62) is a muted kaki—a warm, sophisticated brown that grounds the palette and appears in secondary UI elements, borders, and supporting text.

The surface stack progresses from bright (#f3f1ef, near-white) through mid-tone containers (#c4bab0, the primary greige) to deep backgrounds (#625d58, warm charcoal). This progression creates visual hierarchy without

Typography

The type system is built on Habitus, a geometric sans-serif with a distinctive, architectural character that reinforces the brand's minimalist ethos. All weights default to 300 (book) or 400 (regular), never heavier, creating an airy, refined appearance. Display (56px, 300 weight, -0.02em tracking) is reserved for hero statements and page titles; headline-lg (40px, 300 weight) anchors major sections; headline-md (28px, 300 weight) breaks up content hierarchically. Body text (14–18px, 300 weight, 0.28–0.32 line-height ratio) maintains readability while preserving the brand's light, sophisticated aesthetic. Labels (10–12px, 400 weight, 0.05–0.08em tracking) are used for buttons, badges, and UI chrome, with increased letter-spacing to enhance legibility at small sizes. Apply text-shadow: 0 1p

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining a fluid, responsive rhythm across breakpoints (375px, 568px, 768px, 1024px, 1280px, 1440px). The gutter is consistently 24px, creating breathing room between columns and sections. White-space is treated as a first-class design element: sections are separated by lg spacing (40px) vertically, and internal padding within cards uses md spacing (24px). Container margins follow the grid-margin variable, which scales with viewport size, ensuring the layout never feels cramped on mobile or wastefully sparse on desktop. The spacing scale (xs: 4px, sm: 12px, md: 24px, lg: 40px, xl: 64px) is semantic and hierarchical—use md for card padding, lg for section breaks, and xl for major layout divisions. Avoid arbitrary spacing

Elevation & Depth

Depth in this system is achieved through subtle layering and material contrast, not dramatic shadows. The elevation scale uses soft, spread shadows that suggest light diffusion rather than hard drop-shadows. Level 1 (base surfaces) has no shadow; Level 2 (cards, inputs) uses elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)), a gentle shadow that lifts elements 4–8px; Level 3 (modals, popovers) uses elevation.lg (0 8px 24px rgba(0, 0, 0, 0.12)), a broader, softer shadow suggesting greater distance. Hover states on interactive elements trigger a transition to elevation.md over 150ms (cubic-bezier(0.4

Shapes

The shape philosophy is Soft-Technical: rounded corners are used sparingly and consistently to soften geometric precision without introducing organic curves. Buttons and inputs use rounded.DEFAULT (0.5rem / 8px), a subtle radius that feels intentional and modern without being playful. Cards and larger containers use rounded.md (0.75rem / 12px) or rounded.lg (1rem / 16px), creating a gentle, approachable feel. Badges and pills use rounded.full (9999px) for maximum softness, signaling their secondary, decorative role. Never use rounded.sm (0.25rem / 4px) on primary interactive elements; it reads

Components

Action Elements Buttons are the primary call-to-action mechanism. button-primary uses {colors.primary} (#000000) background with {colors.on-primary} (#ffffff) text, rounded.DEFAULT (8px), and padding of 17.78px vertical × 24px horizontal, resulting in a 48px height. On hover, the background transitions to {colors.primary-container} (#1a1a1a) with a 150ms ease-out timing (cubic-bezier(0.32, 0.94, 0.6, 1)), creating subtle visual feedback. Active state uses {colors.primary-fixed-dim} (#0d0d0d). All buttons have a 1px border matching the background color for visual definition. button-secondary is transparent with a 1px border in {colors.primary}, text in {colors.primary}, and the same padding and height. On hover, the background fills with {colors.surface-container-low} (#e9ecef) while ma

Do's and Don'ts

**Do**

• Do use the greige palette (#c4bab0, #9d958d, #625d58) as the dominant background and surface colors; it creates warmth and material authenticity.
• Do apply lg spacing (40px) between major sections and md spacing (24px) within cards to create breathing room and visual hierarchy.
• Do use Habitus at 300 weight for headlines and body text; the light weight reinforces the brand's refined, minimalist aesthetic.
• Do reserve the secondary accent (#eeffa8) for status indicators, badges, and hover states; overuse dilutes its impact.
• Do transition interactive elements over 150ms with cubic-bezier(0.4, 0, 0.2, 1) timing to create smooth, intentional feedback.
• Do use 1px borders in {colors.outline-variant} to define surfaces instead of relying on shadows; it aligns with the architectural aesthetic.

**Don't**

• Don't use pure white (#ffffff) or pure black (#000000) as surface backgrounds; use {colors.surface-bright} (#f3f1ef) and {colors.surface-container} (#c4bab0) instead to maintain warmth.
• Don't apply font-weight above 400 except in rare emphasis cases; the brand's hierarchy comes from scale and spacing, not weight.
• Don't use rounded corners larger than rounded.lg (16px) on primary interactive elements; it reads as playful and undermines the architectural precision.
• Don't apply drop-shadows larger than elevation.lg (0 8px 24px rgba(0, 0, 0, 0.12)); the brand favors subtle, diffuse shadows that suggest material depth, not dramatic separation.
• Don't use the secondary accent (#eeffa8) on large surfaces or backgrounds; it's a highlight color, not a canvas. Reserve it for small, focused UI elements.
• Don't mix typefaces; Habitus is the only font family used for all text. Aeonik (serif) is reserved for display contexts only if explicitly required by design direction.