Ant's Corner
Design System
The Curated Specimen — a high-end editorial language treating every element like a biological specimen in a gallery. Clean, sophisticated, and deeply organic.
Section 01
Colour Palette
A dialogue between the subterranean (rich berries and deep minerals) and the atmospheric (warm creams and soft pinks).
Primary
#962543
CTAs, active states, price points — used sparingly as "life signs".
Primary Container
#B63E5A
Gradient endpoint. Pairs with Primary at 135° for CTA gradients.
Secondary
#665F3D
The Earth Tone. Eyebrows, secondary text, and natural accents.
On Surface
#141B2B
Replaces pure black for body text. Softened contrast, never harsh.
Surface
#FFFAF7
Base canvas. The page background.
Surface Container Low
#F6EFE7
Cards, specimen boxes, large sweeping sections.
Surface Container Highest
#FFF4EE
Focused interactive elements. Cart drawers, hover states.
CTA Gradient
135° Primary
All primary buttons. Adds soul, prevents flatness.
Section 02
Typography
High-contrast pairing — Plus Jakarta Sans commands authority, Inter provides clarity.
Display — Plus Jakarta Sans
Display LG
3.5rem · weight 800 · tracking −0.04em · Hero titles, collection names
Heading XL
2.5rem · weight 800 · tracking −0.03em · Section headers
Title MD
1.5rem · weight 700 · tracking −0.02em · Card headings, product names
Label LG
1.125rem · weight 600 · tracking −0.01em · Prices, captions
Body — Inter
Body Large — 1.125rem
Body Base — 1rem · Standard paragraphs and descriptions. Inter provides a clinical clarity that grounds the more expressive display typeface.
Body Small — 0.875rem · Supporting copy, metadata, chip labels.
Label SM — 0.6875rem
Metadata labels, always uppercase, tracking +0.12em. Used for categories, tags, section markers.
The No-Black Rule
Never use pure #000000. Headlines use text-slate-950. Body uses on-surface (#141b2b).
Section 03
Buttons
Three levels of emphasis. Primary is reserved for the single most important action per view.
Primary
Gradient: #962543 → #B63E5A at 135°
White text · rounded-[0.75rem] · no shadow
Hover: translateY(−2px) + saturate(1.05)
Secondary
Background: surface-container-highest
On-surface text · same radius as primary
Hover: background shifts to #fff8f3
Disabled state
opacity: 0.45 · cursor: not-allowed · no transform
Section 04
Cards — The Specimen Box
No borders. No dividers. Boundaries defined solely through tonal surface shifts — a surface-container-low card sitting on a surface background.
Specimen Card
Packaging Supplies
background: surface-container-low · border-radius: 1.25rem · hover lifts 2px and shifts to surface-container-highest
Brand Card
Field Note
Same background as specimen-card. Used for editorial prose blocks, hero inner panels, and the field note section. No hover effect.
Glass Surface
Floating Element
rgba warm cream + backdrop-blur(20px). Used for navigation, modal backdrops, and floating overlays. Keeps the user visually grounded.
Section 05
Anatomy List — Chips
The signature component for product specs, service details, and feature tags. Horizontal scrolling row of tonal chips mimicking museum archive tags.
Usage example — service detail chips
background: surface-container-low · padding: 0.625rem 1rem · border-radius: 9999px · font-weight: 600 · font-size: 0.875rem
Section 06
Elevation & Depth
Depth is biological, not mechanical. Layers of fine paper stacked on a desk — tonal shifts replace shadows.
The Layering Principle
surface-container-low
surface-container-highest
Focused element — cart item, interactive field. The soft lift mimics layers of fine paper.
Shadows — Floating Elements Only
Ambient Float
0 20px 40px · on-surface at 5% opacity. Reserved for modals and FABs only.
Glass Float
Same shadow + backdrop-blur(20px). Used for nav, toasts, overlays.
Section 07
Input Fields
Minimalist. No visible outer frame. The active state speaks through a 2px bottom bar in Primary and a background shift — not a thick border.
Default
background: surface-container-low · inset shadow 2px bottom at 8% opacity
Active / Focus
background shifts · 2px bottom bar in primary · no outer ring
Ghost Border — Accessibility Only
If a visible boundary is needed for accessibility: outline-variant at 15% opacity. Never 100% opaque.
Section 08
Do's & Don'ts
The editorial rules that keep Ant's Corner looking intentional, not accidental.
✓ Do
Use intentional asymmetry
If an image is on the left, let the text on the right have a larger top margin—staggered editorial flow.
Lean into white space
If you think there is enough space, add 20% more. Breathing room is never wasted.
Use glassmorphism for navigation
rgba surface + backdrop-blur(20px). Keeps the user grounded in the nature of the site.
Use the 8px baseline grid
Section gaps: 5rem or 6rem. Content grouping: 1rem. Label-value pairs: 0.5rem.
✕ Don't
Use dividers or borders
Forbid <hr> and border-bottom. Use spacing (spacing-8 or spacing-12) and tonal backgrounds to create separation.
Use pure black
Use on-surface (#141b2b) for body text. Pure black is too harsh for the warm cream palette.
Use sharp corners
Everything follows the 0.5rem–1rem roundedness scale. Sharp corners break the organic, naturalist feel.
Use external shadows on cards
Shadows are only for floating elements (modals, FABs, toasts). Cards communicate depth through tonal surface shifts.
Section 09
Spacing & Rhythm
Strict 4px/8px baseline with "Breathing Room" logic. When in doubt, go wider.
0.5rem · 8px
label-value pair spacing
1rem · 16px
related text grouping
5rem · 80px
major section gap
6rem · 96px
generous section gap