Ragic DESIGN.md

Design System Inspiration of Ragic

Overview

Visual Theme & Atmosphere

Ragic's website is unapologetically utilitarian -- the visual language of a tool built by spreadsheet people, for spreadsheet people. It is a no-code database SaaS out of Taiwan, and the site wears that engineering pragmatism on its sleeve: a clean white canvas (#ffffff), near-black body text (#222222), and a single hot, confident red (#f70e0e / #fa3e3e) that does almost all the emotional work. There is no gradient mesh, no glassmorphism, no ambient hero animation. The atmosphere is "open the file and start working" -- a density and directness that signals the product itself: a grid you can fill with real data, today.

The typographic foundation is Open Sans with a deep CJK fallback chain led by Noto Sans TC (Traditional Chinese, Taiwan), then Simplified Chinese, Japanese, and Korean -- a stack engineered for a pan-Asian B2B audience where a single row of a database might mix English field names with Traditional-Chinese values. Headlines are genuinely bold: the hero h1 runs at 36px weight 700 with a tight -1px letter-spacing, and section h2 titles climb to weight 800 -- the heaviest weight on the page. This is the opposite of the whisper-weight luxury aesthetic; Ragic shouts its value props in plain, heavy sans-serif because its buyers are operations managers, not design directors.

The signature gesture is the red. Ragic's brand red appears in three calibrated shades: a saturated CTA red (#f70e0e) on the primary "Create account" button, a slightly deeper red (#d50e0e) for full-bleed section bands, and a lighter accent red (#fa3e3e) for large numeric stats and decorative emphasis. Against the otherwise grayscale page, this red reads as urgency and confidence -- the "do it now" of a tool that wants you in the product, not reading marketing copy. Links, by contrast, stay a classic utilitarian web-blue (#0066cc), reinforcing the "this is software, not a billboard" register.

Key Characteristics:

• A single hot red (#f70e0e CTA / #fa3e3e accent / #d50e0e band) carrying nearly all brand emotion against a grayscale page
• Open Sans + Noto Sans TC CJK-first stack -- built for Traditional-Chinese / Taiwan B2B users
• Genuinely heavy headlines: h1 700, h2 800 -- plain, loud, value-prop-forward
• Classic web-blue (#0066cc) links and #65a4f4 accent-blue tab states -- "this is software"
• Conservative radii (2-6px) -- spreadsheet chrome, nothing pill-shaped on content
• High information density: 15px body at 24px line-height, tight tab/filter rows
• Pure-white canvas with #fafafa / #efefef neutral bands for sectioning -- no color theming
• Large weight-300 numbers (#fa3e3e) styled like cells in a financial sheet

Primary tasks

• Design a database the way you lay out a spreadsheet
• Start from a department template such as Sales or HR
• Set up forms, permissions, and links between datasets
• Add the first record to a new empty sheet
• Filter a sheet and adjust the scope when nothing matches

Brand Narrative

Ragic is a no-code database / spreadsheet-application platform from Taiwan, built for businesses that have outgrown shared spreadsheets but don't want -- or can't afford -- custom software. Its founding premise is a rejection familiar to anyone who has run a small or mid-sized operation on a tangle of Excel files: that turning a spreadsheet into a real, multi-user, relational business application should not require hiring developers. Ragic's answer is a product where you design a database the way you'd lay out a spreadsheet, and it becomes a shareable web application -- forms, links between sheets, permissions, and reports included.

That positioning shapes the entire design language. The site looks like a tool, not a brand campaign, because the buyer is an operations manager, an accountant, or an MIS lead evaluating whether this can replace their spreadsheet sprawl. The heavy bold headlines, the dense template gallery organized by department (Sales, Marketing, HR, Accounting, MIS, Project Management), the transparent self-serve "Create account" funnel -- all of it says "you can try this yourself, today, without a salesperson." The Traditional-Chinese-first font stack and the pan-CJK fallback chain make explicit that this is a product rooted in the Taiwan / Greater-China market that also serves a global English audience.

What Ragic embraces: pragmatism, transparency, immediate self-serve trial, and a single loud red that says go. What it refuses: the visual theatrics of Silicon-Valley SaaS landing pages and the procurement-gated coldness of legacy enterprise software. The aesthetic is honest about what the product is -- a grid you can fill with your real business data.

Principles

1. The tool argues for itself. Show the grid, show the templates, show the self-serve signup. Design should reduce the distance between a curious visitor and a working database, not decorate the journey.
2. One loud color. Red (#f70e0e / #fa3e3e) is the only color allowed to carry urgency. Everything else stays grayscale + utilitarian blue so the "go" signal never gets diluted.
3. Bold says value, light says data. Headlines are heavy (700/800) because value props should be loud; numbers are light (300) because data should feel like cells, not slogans.
4. Density is respect. The buyer works in spreadsheets all day. A dense, scannable template gallery respects their time more than a sparse, scrolling brand experience.
5. Localization is structural. The Noto Sans TC-first fallback chain is a design decision, not a setting. Traditional Chinese is a first-class rendering target, not an afterthought translation.
6. Self-serve, no gatekeeping. The primary CTA is "Create account", not "Request a demo". Trust the user to evaluate the product themselves.
7. Neutral depth, colored intent. Shadows are gray; only red and blue ever signal intent. Elevation organizes layers; color organizes meaning.

Personas

Personas below are fictional archetypes informed by publicly observable Ragic user segments (SMB operations managers, accountants, MIS leads, departmental power-users replacing spreadsheets), not individual people.

Mei-Ling Chen, 38, Taichung. Operations manager at a mid-sized manufacturing company. Has been running production scheduling across a dozen shared Excel files that constantly break when two people edit at once. Found Ragic searching for "Excel 線上資料庫" and built a working multi-user order-tracking app over a weekend without IT. Trusts the product because she could try it herself without talking to a salesperson, and because the Traditional-Chinese interface feels native, not translated.

David Wu, 45, Taipei. MIS lead at a regional distributor. Evaluates tools by how fast a non-technical colleague can become self-sufficient. Likes that Ragic's template gallery is organized by department -- he can hand "Inventory Management" to the warehouse team and "HR" to the people team and step back. Skeptical of any SaaS that hides pricing behind "contact us"; Ragic's transparent self-serve funnel earns his trust.

Priya Nair, 33, Singapore. Founder of a small B2B services firm running on Google Sheets. Needs forms, permissions, and links between datasets that spreadsheets can't cleanly provide, but a custom build is out of budget. Uses Ragic as the database backbone for client intake and project tracking. Reads the how-to docs as her primary onboarding -- screenshot-led, step-by-step, no fluff.

Kenji Sato, 50, Osaka. Accountant at an SME. Cares about data density and accurate Japanese rendering in mixed English/Japanese records. Appreciates that the font stack handles CJK properly in dense tables. Would abandon any tool that turned his finance data into a sparse, padded "dashboard experience" at the cost of how many rows he can scan at once.

Colors

Primary (Ragic Red)

• Ragic Red (#f70e0e): The primary CTA fill -- the live "Create account" button. Saturated, urgent, the single loudest color on the page.
• Red Deep (#d50e0e): Full-bleed section bands and immersive red blocks. A touch darker for large surfaces so white text stays readable.
• Accent Red (#fa3e3e): The most-used brand tint -- large numeric stats, decorative emphasis, hover highlights. The "Ragic feel" color.

Interactive Blue

• Link Blue (#0066cc): Standard text links, "Try it now", "How to get started?". The utilitarian database-link blue, no underline until hover.
• Accent Blue (#65a4f4): Active tab / selected filter-chip border and text (e.g. "Featured templates" selected state).
• Blue Tint (#e8f0fb): Soft blue-wash background for highlighted cards and selected-state surfaces.

Neutral Scale

• Heading (#000000): Pure black for the heaviest headlines (h1, h2). Maximum contrast, maximum directness.
• Body (#222222): Standard reading text -- near-black, slightly softened from pure black.
• Label (#333333): Secondary text, captions, table chrome.
• Muted (#aaaaaa): Inactive tab labels, placeholder-level text, low-priority filter chips.
• Slate (#73859f): Blue-gray UI accents, overlay tints, secondary chrome (used at partial alpha).

Surface & Borders

• Canvas (#ffffff): Page background, card surfaces, button text on red.
• Surface (#fafafa): Off-white alternating section band.
• Surface Gray (#efefef): Light gray panel band for sectioning and code/preview areas.
• Hairline (#dddddd): Standard 1px border for tabs, cards, table cells, inputs.
• Panel Dark (#2b333f): Dark video/preview overlay panels and the play-button chrome.

On-color

• On Primary (#ffffff): White text/icons on all red surfaces and dark panels.

Typography

Font Family

• Primary: Open Sans
• CJK fallback chain: Noto Sans TC -> Noto Sans CJK TC -> Noto Sans SC -> Noto Sans JP -> Noto Sans KR -> Lucida Grande, Tahoma, arial, sans-serif
• Rationale: Traditional-Chinese-first ordering targets the Taiwan / Greater China market; the full CJK chain lets a single database row render mixed-script content cleanly.

Hierarchy

Principles

• Weight as volume: Where premium brands go light, Ragic goes heavy -- h2 at weight 800 is the loudest typographic gesture. The system trusts bold sans-serif to communicate value props directly.
• Tight hero tracking: The h1 carries -1px letter-spacing for a dense, engineered headline block; everything below relaxes to normal tracking.
• Numbers as a display element: Large statistics render at weight 300 / 32px in accent-red (#fa3e3e) -- a deliberate light-weight contrast that makes figures feel like cells in a spreadsheet rather than headline text.
• CJK-first fallback: The Noto Sans TC lead in the fallback chain is a localization decision, not an afterthought -- Traditional Chinese is a first-class rendering target.
• Comfortable body density: 15px body at 24px (1.60) line-height keeps long feature copy legible while staying information-dense.

Layout

Spacing System

• Base unit: ~8px, with a generous CTA step at 14px/30px
• Scale: 4px, 8px, 12px, 16px, 24px, 30px, 48px, 64px
• Body line-height of 24px establishes a strong vertical rhythm for dense feature copy

Grid & Container

• Centered single-column hero with a heavy bold headline and supporting red CTA
• Feature/template sections use multi-column card and filter-chip grids
• Full-bleed red bands (#d50e0e) break the white flow for emphasis moments
• Alternating #fafafa / #efefef neutral bands segment the long marketing page

Whitespace Philosophy

• Functional density: This is a tool's marketing site -- whitespace exists to organize information, not to create luxury breathing room. Template grids and filter rows pack tightly.
• Band rhythm: White → off-white (#fafafa) → light-gray (#efefef) → red band (#d50e0e) creates a section cadence without introducing arbitrary brand colors.
• Red as punctuation: The red appears in measured doses -- one CTA per section, one band per major theme -- so it never loses its urgency.

Border Radius Scale

• Micro (2px): Inputs, tight chrome
• Standard (5px): Tabs, filter chips, cards
• Comfortable (6px): Primary buttons
• Pill (9px): Media/play-button chrome
• Full (9999px): Occasional circular icon buttons

Responsive Behavior

Breakpoints

Touch Targets

• Primary CTA is generously sized (~53px tall, 14px/30px padding)
• Filter chips at 8px/16px padding with adequate row spacing
• Links at 15px with comfortable tap spacing

Collapsing Strategy

• Hero: 36px bold headline compresses on mobile, weight 700 maintained
• Navigation: horizontal links + red CTA → hamburger toggle
• Template grids: multi-column → 2-column → single stacked
• Red bands: maintain full-width treatment, reduce internal padding
• Filter-chip rows: wrap or horizontal-scroll on narrow screens

Image / Media Behavior

• Screenshots and template previews maintain their #dddddd hairline and 5px radius at all sizes
• Dark video panels (#2b333f) scale with the media; play glyph stays centered
• Stat figures stay accent-red and legible down to mobile

Elevation & Depth

Shadow Philosophy: Ragic's elevation is neutral and restrained -- plain black-based shadows at low alpha, no chromatic tinting. This is deliberate: the product is a data tool, and depth is used to separate UI layers (a dropdown over a grid, a card over a band) rather than to create atmosphere. Where Stripe tints shadows blue for brand, Ragic keeps them gray so the red can be the only color that ever draws the eye.

Decorative Depth

• Dark media panels (#2b333f at 0.7 alpha) sit over screenshots/video covers
• Red bands (#d50e0e) create depth through color contrast rather than shadow
• Selected cards lift via the #e8f0fb blue-tint fill plus a soft standard shadow

Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

• shadow.ambient: rgba(0,0,0,0.08) 0px 1px 3px
• shadow.standard: rgba(0,0,0,0.12) 0px 2px 8px
• shadow.elevated: rgba(0,0,0,0.18) 0px 8px 24px

Motion & Easing

Durations:

Easings:

Restraint. Ragic is a data tool; motion is functional, not decorative. No spring, no bounce, no overshoot — a row that expands or a dropdown that opens should feel like a spreadsheet responding, immediate and predictable. The product's job is to keep the user in their data, so transitions stay short and quiet.

Signature motions.

1. Cell / row edit commit. Edits commit instantly (motion-instant) — the grid must feel as responsive as a native spreadsheet. No animated confirmation that delays the next action.
2. Filter-chip select. Selecting a template category transitions the chip border/text to #65a4f4 over motion-fast, and the gallery re-filters with a short motion-standard fade.
3. Dropdown / popover. Field menus and config popovers arrive with ease-enter over motion-standard, dismissing with ease-exit.
4. Reduce motion. Under prefers-reduced-motion: reduce, all transitions collapse to motion-instant. The grid remains fully functional; nothing in the data workflow depends on animation.

Components

Buttons

Primary (Ragic Red)

• Background: #f70e0e
• Text: #ffffff
• Padding: 14px 30px
• Radius: 6px
• Font: 17px Open Sans weight 600
• Height: ~53px
• Use: Top-of-funnel CTA -- "Create account", "Sign up free"

Section-band Red

• Background: #d50e0e (full-bleed band)
• Text: #ffffff
• Use: Immersive red section backgrounds with white headlines and supporting CTA

Tab / Filter Chip (inactive)

• Background: #ffffff
• Text: #aaaaaa
• Padding: 8px 16px
• Radius: 5px
• Border: 1px solid #dddddd
• Font: 14px weight 400
• Use: Template category filters -- "Sales", "Marketing", "HR", "Accounting"

Tab / Filter Chip (active/selected)

• Background: #ffffff
• Text: #65a4f4
• Radius: 5px
• Border: 1px solid #65a4f4
• Use: Currently selected filter -- "Featured templates"

Text Link

• Background: transparent
• Text: #0066cc
• No underline until hover
• Font: 15px weight 400
• Use: Inline links -- "Try it now", "How to get started?"

Cards & Containers

• Background: #ffffff
• Border: 1px solid #dddddd
• Radius: 5px (standard), 6px (comfortable)
• Shadow (standard): rgba(0,0,0,0.12) 0px 2px 8px
• Highlighted card: #e8f0fb blue-tint background for selected/recommended items
• Hover: subtle shadow lift, occasional #fa3e3e accent border

Stat Figures

• Large numbers (e.g. "$200,000") render at 32px Open Sans weight 300 in accent-red #fa3e3e
• Paired with a small #333333 caption label beneath
• Spreadsheet-cell aesthetic: light weight, high color saturation, no decoration

Inputs & Forms

• Border: 1px solid #dddddd
• Radius: 2-5px
• Background: #ffffff
• Text: #222222
• Placeholder: #aaaaaa
• Focus: #65a4f4 border accent

Navigation

• Clean horizontal header on white
• Brand logotype left-aligned
• Links: 15px Open Sans, #0066cc / #333333
• Primary CTA right-aligned: red "Create account" / "Sign up" button (#f70e0e, 6px radius, white text, weight 600)

Media Panels

• Dark overlay: #2b333f at 0.7 alpha for video covers
• Play button: 9px radius, 1px solid #ffffff border, white glyph on the dark panel

---

Verified: 2026-06-08 (omd-add-reference — Tier 1 live inspect) Tier 1 sources: https://www.ragic.com, https://blog.ragic.com (live DOM getComputedStyle — body, h1/h2/h3, "Create account" CTA, template filter tabs, stat figures, anchor colors) Method: playwright getComputedStyle on the live homepage; rgb()→hex conversion; ≥6 concrete samples collected. .verification.md: web/references/ragic/.verification.md

States

Do's and Don'ts

Do

• Use Ragic Red (#f70e0e) for the single primary CTA in each section -- "Create account", "Sign up"
• Reserve accent-red (#fa3e3e) for large numeric stats and emphasis
• Use bold weights for headlines -- h1 700, h2 800 -- value props should be loud
• Keep links the utilitarian web-blue (#0066cc), underline on hover only
• Use #65a4f4 for active/selected tab and filter-chip states
• Keep radii conservative (2-6px) on content; spreadsheet chrome, not consumer pills
• Alternate #ffffff / #fafafa / #efefef bands to segment long pages
• Keep body at 15px / 24px line-height for legible density

Don't

• Don't dilute the red -- one CTA red per section keeps its urgency
• Don't use gradients, glassmorphism, or ambient hero animation -- Ragic is plain on purpose
• Don't go light-weight on headlines -- weight 300 is for numbers only, not titles
• Don't tint shadows -- elevation stays neutral gray so red owns all the color
• Don't drop the Noto Sans TC CJK fallback -- Traditional Chinese is a first-class target
• Don't use red for links or red for body emphasis -- red is CTA + stat only
• Don't add pill-shaped buttons on content -- 6px is the comfortable max for CTAs

Do

• Lead with blunt, benefit-first headlines in bold Open Sans (700/800)
• Use exactly one Ragic Red (#f70e0e) CTA per section, plus #fa3e3e for stats
• Keep links #0066cc and active states #65a4f4 — utilitarian software signals
• Maintain the Open Sans + Noto Sans TC CJK-first stack for all text
• Keep the grid/template gallery dense and scannable
• Use neutral gray shadows and #dddddd hairlines for structure
• Offer a transparent, self-serve "Create account" funnel — no demo gating

Don't

• Don't add gradients, glass, or ambient hero motion — Ragic is plain on purpose
• Don't dilute the red across multiple competing CTAs
• Don't use light weights on headlines (300 is for numbers only)
• Don't tint shadows or theme sections with color other than the red band (#d50e0e)
• Don't use red for links or body emphasis — red is CTA + stat only
• Don't pad away data density to chase a "premium" sparse look
• Don't drop or reorder the CJK fallback chain — Traditional Chinese leads

Voice & Tone

Ragic's voice is the voice of a practical builder talking to another practical builder -- direct, benefit-first, and faintly proud of how much you can do without writing code. The homepage leads with blunt, almost aggressive confidence ("#1 No Code database builder", "No Code AI tool for your business") rather than aspirational storytelling. CTAs are imperative and low-friction ("Create account", "Try it now", "How to get started?"). There is no hype vocabulary and no enterprise-procurement coldness; the register is "here's the tool, here's what it does, go build."

Forbidden register. Vague aspirational marketing ("transform your business", "unleash your potential"), enterprise gatekeeping ("request a demo" before you can see the product), and decorative adjective stacks. Ragic shows the grid and lets the tool argue for itself.

Agent Prompt Guide

Quick Color Reference

• Primary CTA: Ragic Red (#f70e0e)
• Section band: Red Deep (#d50e0e)
• Stat / emphasis: Accent Red (#fa3e3e)
• Link: Web Blue (#0066cc)
• Active tab: Accent Blue (#65a4f4)
• Background: White (#ffffff), bands #fafafa / #efefef
• Heading text: Black (#000000)
• Body text: Near-black (#222222)
• Muted text: Gray (#aaaaaa)
• Border: Hairline (#dddddd)

Example Component Prompts

• "Create a hero on white background. Headline at 36px Open Sans weight 700, line-height 1.20, letter-spacing -1px, color #000000. Body at 15px weight 400, line-height 1.60, color #222222. Primary CTA: red button (#f70e0e fill, white text, 6px radius, 14px 30px padding, 17px weight 600) labeled 'Create account', plus a #0066cc text link 'Try it now'."
• "Design a template-filter chip row: white chips with 1px solid #dddddd border, 5px radius, 8px 16px padding, 14px Open Sans #aaaaaa text. Selected chip uses #65a4f4 text + 1px #65a4f4 border."
• "Build a stat block: large number at 32px Open Sans weight 300 in #fa3e3e, with a #333333 caption label beneath. White card, 1px #dddddd border, 5px radius, shadow rgba(0,0,0,0.12) 0px 2px 8px."
• "Create navigation: white header, brand logo left, #0066cc/#333333 links, red 'Sign up' CTA right-aligned (#f70e0e, white text, 6px radius, weight 600)."
• "Design a full-bleed red section: #d50e0e background, white headline at 32px weight 800, white body, and a white-outlined CTA."

Iteration Guide

1. Red is the only brand color -- use #f70e0e for CTA, #fa3e3e for stats; keep everything else grayscale + blue links.
2. Headlines are bold (700/800); only numbers go light (300).
3. Links are #0066cc, underline on hover only -- the software-not-billboard register.
4. Border-radius stays 2-6px on content; never pill-shaped buttons.
5. Use Open Sans with the Noto Sans TC-led CJK fallback chain for any multilingual text.
6. Shadows are neutral gray at low alpha -- no chromatic tinting.
7. Segment long pages with #ffffff / #fafafa / #efefef bands and occasional #d50e0e red bands.
8. Body is 15px at 24px line-height -- dense but legible.

---

Governance

Known Gaps

• Contrast, button-primary. Text #ffffff on #f70e0e measures 4.18:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.
• Contrast, tab. Text #aaaaaa on #ffffff measures 2.32:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.