portfolio.ricoui.com — Design System

1. Visual Theme & Atmosphere

Rico’s UI portfolio pairs editorial serif warmth with a structured blue-toned system to create something that feels simultaneously hand-crafted and technically credible. The warm parchment background (#FDFAF5) grounds the design in analog quality, while the primary blue family anchors it in digital professionalism. It’s a portfolio that says “I understand both taste and craft.” The interplay between Instrument Serif for display and Inter for UI creates deliberate tension — one voice for ideas, another for execution.

2. Color Palette & Roles

Backgrounds

• rgb(253, 250, 245) — Parchment white; warm page ground
• rgb(255, 255, 255) — Card surfaces (case study squares); pure white lifts off the parchment

Text

• rgb(63, 74, 90) — Primary body text; desaturated blue-grey, never pure black
• rgb(103, 116, 135) — Secondary / meta text; lighter blue-grey
• rgb(25, 34, 47) — Dark anchor text (active nav, emphasis)

Primary Accent — Blue

• rgb(45, 109, 195) — Primary blue; CTAs, active states, h1 color, button fill
• rgb(44, 106, 190) / rgb(46, 108, 191) — Hover states on links (same family, slight variation)
• rgb(127, 161, 255) — Light blue; decorative divs, illustration elements
• rgba(138, 127, 255, 0.2) — Soft purple-blue border; subtle boundary on interactive elements

Shadow Accent

• rgba(91, 84, 211, 0.3) — Purple-tinted shadow on prominent CTA/button; unusual and distinctive

3. Typography Rules

A conscious dual-voice system: Instrument Serif for expressive display, Inter for all functional UI text. The contrast between them is the design’s defining typographic gesture.

Instrument Serif is always weight 400 — its personality comes from form, not weight. Inter similarly stays at 400 throughout; no bold weights are used. The type scale is contained: 48px display, 28px section, 16px body, 11px caption.

4. Component Styling

Cards (case squares): Pure white (#FFFFFF) surfaces with border-radius: 12px and a standard box-shadow: rgba(0,0,0,0.1) 0px 2px 3px. Clean, card-like, softly elevated.

Primary button: rgb(45, 109, 195) fill, white text, border-radius: 50% on icon variants, 12px on rectangular buttons. Shadow uses the distinctive purple tint: rgba(91,84,211,0.3) 0px 4px 12px.

Nav links: Default rgb(25,34,47) (active) or rgb(63,74,90) (inactive); hover shifts uniformly to rgb(44–46, 106–108, 190–191) blue. Clean directional feedback.

Decorative elements: rgb(127,161,255) light blue divs and rgb(45,109,195) fills appear as illustration/decoration rather than functional UI.

5. Layout Principles

Tailwind CSS drives a standard responsive grid. Breakpoints at 639, 640, 767, 768, 960, 1400 align with Tailwind’s sm/md/lg/xl ladder. The 1400px upper breakpoint suggests a max-width container constraint.

No custom spacing tokens — Tailwind’s default scale applies. Layout is column-based, likely a 12-column grid collapsing to single-column on mobile.

6. Depth & Elevation

Three shadow levels:

1. Micro — rgba(0,0,0,0.1) 0px 2px 3px on cards; barely perceptible lift
2. Standard — rgba(0,0,0,0.1) 0px 10px 15px, 0px 4px 6px Tailwind shadow-lg equivalent
3. Accent — rgba(91,84,211,0.3) 0px 4px 12px on primary CTA; the purple tint makes the shadow feel branded rather than neutral

Border radius vocabulary: 12px for cards and buttons, 50% for circular/icon elements. No sharp corners.

7. Do’s and Don’ts

Do:

• Use Instrument Serif at 48px/400 for any hero or section-lead display text
• Pair with Inter at 16px/400 for all body and UI copy — keep both at weight 400
• Ground every layout on the parchment background #FDFAF5
• Use rgb(45,109,195) as the sole action color; let it appear in CTAs, active states, and H1 labels
• Apply the purple-tinted shadow exclusively on primary buttons — it’s the system’s most distinctive detail

Don’t:

• Don’t use bold (700+) in either typeface — the design avoids visual shouting
• Don’t mix pure white backgrounds with parchment at the same level (they’re for different layers)
• Don’t introduce warm or saturated accent colors — the system is blue-anchored
• Don’t use the 50% border-radius on anything except circular icon elements
• Don’t drop below 11px for any text

8. Responsive Behavior

Tailwind breakpoints: mobile-first, adapting at sm (640px), md (768px), lg (960px), xl (1400px). The 960px breakpoint (rather than the standard 1024px) suggests a customized config to accommodate a specific content width. Case study grids likely go from 1 column (mobile) → 2 columns (sm) → 3 columns (lg+).

9. Agent Prompt Guide

Build a portfolio section in the portfolio.ricoui.com style. Page background is #FDFAF5 (warm parchment). Cards are pure white with border-radius: 12px and box-shadow: rgba(0,0,0,0.1) 0px 2px 3px. Display headings use Instrument Serif at 48px/400; all UI text uses Inter at 16px/400 (captions: 11px). Primary color is rgb(45,109,195) — used for CTAs, active nav, and h1 labels. Body text is rgb(63,74,90). The primary button gets a distinctive purple shadow: rgba(91,84,211,0.3) 0px 4px 12px. Nav links default to near-black and shift to blue on hover. No bold weights anywhere. Breakpoints follow Tailwind sm/md/lg.

Generated by Sparkbites — extracted from live CSS analysis