The shared visual and behavioral choices that components can build on. Everything here is a draft proposal.
Use these as a review baseline
Each guidance item is provisional. The CSS custom properties in src/styles/tokens.css are the implementation source for this prototype.
Visual direction
Bright Playful Minimalism
Flat design and minimalism keep the interface clear. Restrained color, simple geometry, and purposeful illustration add personality.
Keep layouts content-led, with clear hierarchy, measured typography, and useful spacing.
Use light neutral surfaces by default and reserve saturated identity colors for a few deliberate accents.
Use pixel-inspired or rounded-square details sparingly. Add illustrations only when they explain content or support a user need.
Avoid decorative gradients, oversized headings, repeated cards without distinct content, pill shapes, and badges. Use cards when they clarify a real content group.
Use Apple, GitHub, or Duolingo only as a reference for one named quality. Do not imitate or combine their full visual systems.
This is a draft proposal. Follow more specific task requirements and approved product decisions.
Color system
Identity colors with clear roles
Use semantic tokens for interface states and pair status color with text or an icon.
Scout Blue
--color-scout-blue#21497B
Primary actions and links
Thinker Orange
--color-thinker-orange#EB7114
Attention and secondary emphasis
Builder Green
--color-builder-green#47A036
Success and confirmation
Auditor Red
--color-auditor-red#971607
Errors and destructive actions
Core Graphite
--color-core-graphite#443A3B
Primary text and dark surfaces
Quiet Surface
--color-surface-muted#F1EFED
Grouped content and subtle examples
Color roles
Useful shades from the identity
The identity colors remain the anchors. Use softer shades for surfaces, base colors for accents, and stronger shades when text needs more contrast.
Scout Blue
Information, primary actions, and links.
Soft#EAF0F6
Base#21497B
Border#BDCDDD
Strong#17375F
Thinker Orange
Warnings and secondary emphasis.
Soft#FFF1DF
Base#EB7114
Border#F2D3AD
Strong#70420F
Builder Green
Success and confirmation.
Soft#EDF5EA
Base#47A036
Border#BFD9B8
Strong#287523
Auditor Red
Errors and destructive actions.
Soft#F8EAE8
Base#971607
Border#DFBCB6
Strong#7B1105
Use each shade intentionally
Use soft shades for subtle message backgrounds and selected surfaces.
Use base shades for brand accents, links, and indicators.
Use strong shades for colored text, icons, and interaction states that need contrast.
Map semantic states
Information uses Scout Blue through --color-info.
Success uses Builder Green through --color-success.
Warnings use Thinker Orange through --color-warning.
Errors use Auditor Red through --color-error.
Pair each semantic color with its matching background and border tokens.
Optional palette
Extended colors for specific cases
Use these supporting colors only when content needs more category choices. They do not replace VINASIG identity colors.
Palette inspired by Minecraft.
Keep brand and semantic roles clear
Warm Graphite, Carmine, Leaf, Deep Blue, and Tangerine reuse existing identity colors.
Use the existing identity and semantic tokens for navigation, actions, and status messages. Choose extra colors only when their meaning helps people distinguish content.
Check contrast before use
The darker swatches are palette references, not general interface shadows or guaranteed text colors. Check contrast for each actual use.
Extended palette
Citron
Extended accent
Base #DDD605Deep #373501
--color-palette-citron
Porcelain
Extended neutral
Base #E3D4D1Deep #383534
--color-palette-porcelain
Fog
Extended neutral
Base #CECACADeep #333232
--color-palette-fog
Warm Graphite
Core Graphite alias
Base #443A3BDeep #110E0E
--color-palette-warm-graphite
Carmine
Auditor Red alias
Base #971607Deep #250501
--color-palette-carmine
Clay
Extended accent
Base #B4684DDeep #2D1A13
--color-palette-clay
Saffron
Extended accent
Base #DEB12DDeep #372C0B
--color-palette-saffron
Leaf
Builder Green alias
Base #47A036Deep #04280D
--color-palette-leaf
Lagoon
Extended accent
Base #2CBAA8Deep #0B2E2A
--color-palette-lagoon
Deep Blue
Scout Blue alias
Base #21497BDeep #08121E
--color-palette-deep-blue
Violet
Extended accent
Base #9A5CC6Deep #261731
--color-palette-violet
Tangerine
Thinker Orange alias
Base #EB7114Deep #3B1D05
--color-palette-tangerine
Sky
Extended accent
Base #8BB3FFDeep #232D40
--color-palette-sky
Amber
Extended accent
Base #FFAA00Olive deep #2A2A00Brown deep #402A00
--color-palette-amber
Typography
One family, a flexible range
Space Grotesk is self-hosted from the approved asset folder. Pages do not request fonts from external services.
DisplayClear by design.
HeadingA consistent interface language
BodyReadable guidance helps people and agents make the same interface decisions.
SupportingThe variable font supports weights from 300 to 700.
Type and copy
Keep reading clear and steady
Use a measured type scale
Keep body text near 1rem and supporting text readable.
Keep page titles at or below 2.75rem.
Build hierarchy with weight and spacing instead of oversized type.
Write concise interface copy
Use clear sentences, straight quotes, and restrained capitalization.
Avoid em dashes, en dashes, semicolons, slash separators, and unexplained abbreviations.
Use hyphens or custom layouts for lists, never round, square, arrow, or chevron glyphs.
Rephrase copy when only one or two short words sit on the final line.
Spacing scale
A small, repeatable rhythm
The prototype uses a 4 px base. Prefer the shared steps before reaching for one-off spacing values.
--space-1
4 px
--space-2
8 px
--space-4
16 px
--space-8
32 px
--space-16
64 px
Responsive behavior
Let content choose the breakpoint
Small screens below 761 px
Stack content, keep actions easy to reach, and avoid horizontal page scrolling.
Medium screens from 761-959 px
Reflow multi-column layouts when the content starts to feel constrained.
Large screens from 960 px
Use available space for navigation and comparison without stretching text lines.
Accessibility
Make the interface usable in more ways
RequiredUse semantic landmarks, a logical heading order, and visible labels for form controls.
RequiredKeep keyboard focus visible and avoid using color as the only way to convey meaning.
PreferredCheck text and control contrast on every chosen surface before release.