Create a design for SIP Abacus Kasavanahalli (SIPKVH).
This prompt includes the complete brand rules, public asset URLs, font-loading links, colour roles and component recipes. It works in a fresh project without access to a private repository. Use the current brief for facts; use the specifications below for design. Download the original artwork and load the supplied public fonts rather than approximating them.

BRIEF
Deliverable and dimensions: [fill in]
Audience and one main message: [fill in]
Approved copy, facts, images and next action: [fill in]

COMPLETE INLINE BRAND SPECIFICATION
# SIPKVH brand guidelines

**schema Version:** 1.1

**version:** 1.4.0

**updated:** 2026-11-05

**canonical Url:** https://sipabacuskvh.com/brand

**scope:** SIP Abacus Kasavanahalli (SIPKVH), its centre communications and sipkvh.app. This is a local brand guide, not a claim to own SIP India's identity or any event organiser's identity.

**authority:** Use these rules for visual design. Use the current project brief for facts. If a brief explicitly changes a format, flag the departure; never invent logos, missing facts, awards or asset variants.


## identity

**name:** SIP Abacus Kasavanahalli

**short Name:** SIPKVH

**app Name:** sipkvh.app

**character:** Premium yet playful. Warm, confident, professional and approachable.


### story

- SIP Abacus KVH teaches children to do maths in their head, quickly and with confidence, using the abacus as the first step. The bead is where it starts. The mental picture of that bead is where it ends up.
- We are built for kids, but chosen by parents. That tension shapes everything. The work should feel bright and playful enough that a seven year old wants to sit down and try, and considered enough that a parent trusts it with their child's time and their money.
- So the brand carries two things at once. Warmth, so it never feels like a test. And restraint, so it always feels premium. Every colour, every rounded corner, every sentence is there to hold both at the same time.


### pillars

**title:** built for kids

**body:** playful, tactile, never intimidating.

**title:** chosen by parents

**body:** calm, premium, quietly reassuring.

**title:** rooted in the bead

**body:** the abacus is our anchor and our motif.



### mission

**tag:** mission / present tense

**statement:** To give every child a calm, playful path to fast mental maths, and to give every parent good reason to trust it.


#### supports

- make the abacus feel like play, not drill
- build real speed, not shortcuts
- keep parents genuinely in the loop


### vision

**tag:** vision / future tense

**statement:** A generation of children who reach for numbers without fear, because the first time they met maths, it felt like a game they could win.


#### supports

- confidence that outlasts the classroom
- a brand parents recommend by name
- the bead as a lifelong mental tool


## principles

**title:** playful, with purpose.

**body:** Pally, the original bead and a little colour bring the play. A clear message gives it purpose.

**title:** space is part of the design.

**body:** Never sacrifice spacing for content. Cut repetition, move detail to notes, and let the important thing breathe.

**title:** confidence comes quietly.

**body:** White space, strong type and authentic evidence feel premium. Keep decoration secondary to the child and the message.



## component Reuse

**principle:** These specifications work in an empty project. Build reusable local components from the measurements, colours, states and reference CSS below. If an implementation is already available in your project, reuse it. No access to SIPKVH's repository or private component library is required.


### header

**structure:** A white header with the unchanged institution logo on the left and the relevant primary action on the right. Keep the logo at least 120 px wide, its proportions and clear space intact. Use a 1200 px maximum content width with 24 px phone and 48 px desktop gutters. A header rule, if needed, uses --border. Do not frame the navigation logo as though it were a logo specimen.

**behaviour:** Keep controls usable on phones, links keyboard-accessible and content clear of any sticky header. Use the approved destination from the current brief. A standalone demo can link to https://sipabacuskvh.com/contact; a design prototype must not simulate a successful booking.


### raised Button

**geometry:** A two-layer rounded rectangle: 40 px base height, 8 px outer radius, 6 px face radius. The face is 40 px high, sits 6 px above its base at rest and has 16 px horizontal padding. Reserve that 6 px above the base in the parent layout. Use 14 px Pally medium, 20 px line height and an 8 px icon/text gap. Space neighbouring actions through their parent, not by enlarging button padding or label type.

**neutral:** White face, 2 px --border outline, --foreground label and a solid --border base visible below. This is an offset layer, not a black or blurred shadow.

**primary:** Brand-green face and base, ink label for 14 px contrast, no added black outline. A neutral action can accompany it. Do not create extra tints or apply colour filters.

**icon Only:** 40 × 40 px base and face, zero horizontal padding, centred 16 × 16 px icon, and an accessible name.

**states:** Hover lifts the whole control by 4 px. Press moves its face from -6 px to -2 px. Keyboard focus is a 2 px green outline offset by 4 px. Disabled/loading keeps the dimensions, uses the muted surface and muted label, prevents repeat activation, and retains an accessible label. A loading indicator is 16 px. Reduced motion removes the transforms while keeping clear focus, loading and disabled states.

**semantics:** Use a native button for an action and an anchor for navigation. Add a single inner span for the face, with icons and label inside it. Apply .sip-action, .sip-action__face, optional .sip-action--primary or .sip-action--icon from the reference CSS.


### checkbox

**geometry:** A 16 × 16 px square with 2 px corners, a 1 px brand-green outline and a green checked fill. Use a 16 px check glyph. Keep it this size, alongside a clickable associated text label with an 8 px gap. For a single-line label, align the row centrally; for a description block, align the control with its first line. Give the overall label row a comfortable target without enlarging the square.

**behaviour:** Use a native checkbox or accessible public primitive supporting Space, focus, checked and disabled states. Keep labels ink, descriptions muted, and keyboard focus visible.


### photo And Logo Frame

**geometry:** For photographs and white logo showcases: 3 px dashed var(--border), 4 px white padding and 24 px outer corners. Photographs have 20 px inner corners and natural proportions. Keep logo artwork intact, centred with the specified clear space; do not round or crop the logo image itself. Coloured logo fields can stay borderless.

**scope:** This frame is for displayed photography and identity specimens, not every card or the navigation logo. The QR frame has its separate solid-ink recipe.


### scroll Region

**behaviour:** The document scrolls normally. For a genuinely nested horizontal or vertical region, use a keyboard-accessible viewport and an accessible region name. If custom scrollbars are used, provide a 10 px track with 1 px padding and a rounded --border thumb; support wheel, touch, keyboard and visible focus. Reuse an accessible public scrollbar primitive when available. Do not hide overflow or replace document scrolling.


## colours


### core

**name:** brand green

**hex:** #16A34A

**sub:** hsl(142 76% 36%) · --primary

**name:** ink

**hex:** #0A0A0B

**sub:** hsl(240 10% 4%) · --foreground

**dark:** true

**name:** muted ink

**hex:** #71717A

**sub:** hsl(240 4% 46%) · --muted-foreground

**name:** surface

**hex:** #FFFFFF

**sub:** hsl(0 0% 100%) · --background

**name:** hairline

**hex:** #E4E4E8

**sub:** hsl(240 6% 90%) · --border



### families

**name:** emerald

**note:** our green cousin, for growth and success


#### shades

**shade:** 300

**hex:** #6EE7B7

**key:** true

**shade:** 400

**hex:** #34D399

**key:** true

**shade:** 900

**hex:** #064E3B

**key:** true

**shade:** 950

**hex:** #022C22

**key:** true


**name:** orange

**note:** energy and play, our warmest accent


#### shades

**shade:** 300

**hex:** #FDBA74

**key:** true

**shade:** 400

**hex:** #FB923C

**key:** true

**shade:** 900

**hex:** #7C2D12

**key:** true

**shade:** 950

**hex:** #431407

**key:** true


**name:** blue

**note:** calm and focus, the trust colour


#### shades

**shade:** 300

**hex:** #93C5FD

**key:** true

**shade:** 400

**hex:** #60A5FA

**key:** true

**shade:** 900

**hex:** #1E3A8A

**key:** true

**shade:** 950

**hex:** #172554

**key:** true


**name:** yellow

**note:** the reward, small doses only


#### shades

**shade:** 300

**hex:** #FDE047

**key:** true

**shade:** 400

**hex:** #FACC15

**key:** true

**shade:** 900

**hex:** #713F12

**key:** true

**shade:** 950

**hex:** #422006

**key:** true


**name:** rose

**note:** warmth and gentle alerts


#### shades

**shade:** 300

**hex:** #FDA4AF

**key:** true

**shade:** 400

**hex:** #FB7185

**key:** true

**shade:** 900

**hex:** #881337

**key:** true

**shade:** 950

**hex:** #4C0519

**key:** true



**rule:** White and ink dominate. Brand green #16A34A is the primary accent. Supporting emerald must not dominate or replace it. Supporting families use only 300 backgrounds, 400 accents, 900 muted text and 950 primary text. Coloured cards usually have no border. Do not create lighter backgrounds, opacity washes, gradients or blended tints. Use yellow sparingly. Colours embedded in original logos stay unchanged. QR codes retain the generator's black #000000 on white; this is a functional exception, not another decorative colour.


### text Roles


#### heading

**token:** --foreground

**value:** #0A0A0B

**use:** Headings, key numbers, essential instructions and high-priority information on white.


#### supporting

**token:** --muted-foreground

**value:** #71717A

**use:** Supporting paragraphs, descriptions, captions, metadata and helper text on white. Keep ordinary text at least 4.5:1. Do not make every word ink or fade text with opacity.


#### accent

**token:** --primary

**value:** #16A34A

**use:** Selective large editorial emphasis, not every heading or small paragraph. On white use at least 24 px regular or 18.67 px bold. Keep small links ink and underline them.


#### coloured Surface

**heading:** Use the chosen supporting family's 950 shade.

**supporting:** Use that same family's 900 shade for paragraphs and captions.

**use:** On a 300 background, change both roles deliberately; do not carry white-surface muted grey onto the coloured field.


#### control

**use:** Control labels remain clearly readable. The portable green-button recipe uses ink for its 14 px label; white on brand green is only suitable for large text, not small controls.


### borders

**token:** --border

**value:** #E4E4E8

**default:** Use var(--border), the light neutral #E4E4E8, for ordinary solid or dashed outlines: outlined button faces and their offset bases, selected white cards, image frames and separators when needed. A thick border is still this neutral colour. Never infer border colour from the text colour or use ink/black for every outline.

**coloured Surfaces:** Coloured cards usually have no border. Separate sections with whitespace, not repeated rules.


#### exceptions

- The QR frame alone uses ink #0A0A0B: 2 px around a 60 px code, scaled with the 4 px white padding and 8 px radius.
- Keyboard focus uses a distinct 2 px brand-green ring with a 4 px offset; focus is separate from the normal border.
- The 16 px checkbox has a 1 px brand-green outline and green checked fill. Preserve its explicit control treatment.
- QR modules stay pure black #000000 on white. Original logo colours stay unchanged. These do not approve black UI frames.


### contrast

**name:** muted supporting text on white

**foreground:** #71717A

**background:** #FFFFFF

**use:** supporting paragraphs, captions and helper text

**ratio:** 4.83

**name:** ink on brand green

**foreground:** #0A0A0B

**background:** #16A34A

**use:** small control labels in the portable green-button recipe

**ratio:** 6

**name:** ink on white

**foreground:** #0A0A0B

**background:** #FFFFFF

**use:** all text

**ratio:** 19.79

**name:** green on white

**foreground:** #16A34A

**background:** #FFFFFF

**use:** large text only: at least 24 px regular or 18.67 px bold

**ratio:** 3.3

**name:** white on green

**foreground:** #FFFFFF

**background:** #16A34A

**use:** large text only; use ink on pale fields for small controls

**ratio:** 3.3

**name:** emerald 950 on 300

**foreground:** #022C22

**background:** #6EE7B7

**use:** all text

**ratio:** 9.94

**name:** orange 950 on 300

**foreground:** #431407

**background:** #FDBA74

**use:** all text

**ratio:** 9.28

**name:** blue 950 on 300

**foreground:** #172554

**background:** #93C5FD

**use:** all text

**ratio:** 8.15

**name:** yellow 950 on 300

**foreground:** #422006

**background:** #FDE047

**use:** all text

**ratio:** 11.06

**name:** rose 950 on 300

**foreground:** #4C0519

**background:** #FDA4AF

**use:** all text

**ratio:** 8.27



### semantic Status

**success:** Correct examples use --success (#16A34A) with --success-foreground (ink #0A0A0B in the portable recipe). Success is the primary brand colour, not a new decorative family.

**destructive:** Incorrect examples use --destructive (#EF4444) with --destructive-foreground (ink #0A0A0B in the portable recipe). Pair colour with an explicit label and icon. Check contrast at the actual text size.

**scope:** Status feedback only. Do not use status colours as a new decorative palette. Examples marked incorrect intentionally break a rule; never copy those treatments into a deliverable.

**accessibility:** At least 4.5:1 for ordinary text and 3:1 for large text (24 px regular or 18.67 px bold). Use text, symbols or patterns as well as colour.


## typography


### primary

**name:** Pally

**source:** https://www.fontshare.com/fonts/pally


#### weights

- 400
- 500
- 700

**role:** Bold 700 for primary headings; regular or medium for body and controls. Used across graphics and presentations, including print graphics.


### companion

**name:** Sentient

**source:** https://www.fontshare.com/fonts/sentient


#### weights

- 400
- 500
- 700

**role:** Selective editorial emphasis and formal reports, letters and certificates. Choose upright or italic emphasis consistently.


### heading Style

**rule:** Use lowercase titles and end with a punctuation mark. Preserve proper names and acronyms.

**correct:** make room for wonder.

**incorrect:** Make Room For Wonder

**proper Name Example:** meet SIPKVH.


### text Colours


#### heading

**token:** --foreground

**value:** #0A0A0B

**use:** Headings, key numbers, essential instructions and high-priority information on white.


#### supporting

**token:** --muted-foreground

**value:** #71717A

**use:** Supporting paragraphs, descriptions, captions, metadata and helper text on white. Keep ordinary text at least 4.5:1. Do not make every word ink or fade text with opacity.


#### accent

**token:** --primary

**value:** #16A34A

**use:** Selective large editorial emphasis, not every heading or small paragraph. On white use at least 24 px regular or 18.67 px bold. Keep small links ink and underline them.


#### coloured Surface

**heading:** Use the chosen supporting family's 950 shade.

**supporting:** Use that same family's 900 shade for paragraphs and captions.

**use:** On a 300 background, change both roles deliberately; do not carry white-surface muted grey onto the coloured field.


#### control

**use:** Control labels remain clearly readable. The portable green-button recipe uses ink for its 14 px label; white on brand green is only suitable for large text, not small controls.


### font Loading

**pally:** https://api.fontshare.com/v2/css?f[]=pally@400,500,700&display=swap

**sentient:** https://api.fontshare.com/v2/css?f[]=sentient@400,500,700&display=swap

**instructions:** Load both official stylesheets with separate stylesheet links, or install the original fonts from their Fontshare pages. Apply Pally at 700 to headings and 400/500 to body and controls; use Sentient selectively. Check the fonts actually load instead of silently accepting a fallback. The artwork archive contains no font binaries.


### website Hierarchy

**name:** h1

**spec:** 36–48 / 1.05 · bold 700

**sample:** fast mental maths.

**name:** h2

**spec:** 30–36 / 1.1 · bold 700

**sample:** how it works.

**name:** h3

**spec:** 24–30 / 1.2 · bold 700

**sample:** meet the beads.

**name:** h4

**spec:** 20–24 / 1.3 · bold 700

**sample:** a quick note for parents.

**name:** h5

**spec:** 18–20 / 1.4 · bold 700

**sample:** what your child learns.

**name:** h6

**spec:** 16–18 / 1.5 · bold 700

**sample:** a smaller heading.

**name:** subtitle

**spec:** 18 / 1.5 · regular 400

**sample:** A calm, playful path from the first bead to full mental calculation.

**name:** paragraph

**spec:** 16 / 1.6 · regular 400

**sample:** Children learn to picture the abacus in their mind and add, subtract and multiply without reaching for a calculator.

**name:** caption

**spec:** 12 / 1.4 · medium 500

**sample:** supporting caption text

**name:** overline

**spec:** 12 / 1.4 · semibold caps

**sample:** overline / label


**guidance:** The website hierarchy is a starting scale, not the presentation scale. Display headlines can be larger. Do not use a third decorative typeface or silently substitute missing fonts. Preserve font licensing and inspect exports.


## layout


### composition

- Use the complete header, raised-action, checkbox and padded-photo-frame recipes in this guide. Reuse a matching implementation when it is available; otherwise build a reusable local equivalent from the supplied measurements and CSS.
- Build around one message, one focal point and one primary action per composition. A long page may contain several such sections.
- Keep most of the canvas white with near-black ink. Brand green is the primary accent. Supporting emerald and other families stay secondary; usually choose just one supporting family per composition.
- Use bold Pally (700) for primary headings and selective Sentient emphasis. Left-align headings and body copy. Use lowercase sentence headings with natural punctuation; preserve proper names and acronyms.
- Coloured cards usually need no border: the colour defines their edge. Use thick rounded rectangular frames selectively on white surfaces, retaining visible straight edges and corners. Avoid capsule buttons and circular frames.
- Use only approved colours in their assigned roles. Do not invent lighter backgrounds, opacity washes, gradients or blended tints. Supporting families use 300 backgrounds, 400 accents, 900 muted text and 950 primary text.
- Use eyebrow labels with restraint when they add useful context. Do not put a generic label above every heading.
- Show visual rules with examples and short, self-contained captions. Keep implementation instructions and the complete specification in the separate machine-readable resources. Clearly mark incorrect examples so they cannot be mistaken for approved designs.
- Use the supplied success and destructive status tokens, accompanied by explicit words and icons, to distinguish correct and incorrect examples. These are status signals, not additional decorative colour families.
- Photographs usually live inside a white padded frame with a 3 px dashed --border outline, 4 px padding and rounded corners. Preserve the original photograph's proportions and a little white space around it.
- Reuse existing button states and component details. A small solid offset shadow may support a selected white frame; never add it by default to coloured cards or to logo artwork.


### web

**content Max Width Px:** 1200

**mobile Gutter Px:** 24

**desktop Gutter Px:** 48

**spacing Unit Px:** 8

**section Gap Px:** 80–112

**content Gap Px:** 24–48

**border Px:** 2–3

**featured Border Px:** 3–6

**border Use:** Selected white surfaces only; use var(--border), not ink, for ordinary outlines regardless of thickness. Coloured cards usually have no border. Photographs and white logo specimens use the documented padded dashed frame. QR frames use their explicit ink-border exception. Separate sections with consistent white space rather than a horizontal rule.

**frame Radius Px:** 20–32

**control Radius Px:** 10–16

**minimum Target Px:** 40

**controls:** Raised actions use a 40 px base and face, 14 px labels, 16 px horizontal face padding and an 8 px icon/text gap; the face rests 6 px above its base. Icon-only actions are 40 × 40 px with a 16 px glyph. Checkboxes are 16 × 16 px with an associated label 8 px away and a comfortable overall target. The complete component recipes and reference CSS define colours, radii and interaction states.

**responsive Spacing:** Use a single horizontal content gutter on phones. Remove redundant padding from nested containers; preserve purposeful component padding, including the photo frame. Keep generous vertical space rather than shrinking type.

**scrolling:** Use an accessible nested scroll viewport with keyboard, touch and wheel access for horizontal navigation or wide tables. The component recipe defines its scrollbar. The document itself scrolls normally. Keep browser-default text selection colours.


### presentation

**aspect Ratio:** 16:9

**maximum Slides:** 10

**maximum Spoken Minutes:** 20

**minimum Audience Text Pt:** 30

**horizontal Margin Percent:** 6–8

**vertical Margin Percent:** 7–9

**body At1280x720Px:** 40

**body At1600x900Px:** 50

**heading At1280x720Px:** 64–88

**notes:** These dimensions map to a 13⅓ × 7½ inch slide. Every audience-facing label, caveat and source that must be read follows the 30 pt floor. Interface controls and intrinsic logo lettering are separate. Do not shrink content or rasterise text to evade the rule.


### print

**starting Safe Margin Mm:** 12

**starting Bleed Mm:** 3

**continuous Tone Image Dpi:** 300

**note:** Starting points for A4/A3, not a universal print specification. Confirm trim, bleed, colour profile and PDF standard with the printer; inspect a proof. Do not enlarge a raster logo beyond its native resolution at the chosen print size.


## logos


### families

**key:** sip

**title:** SIP Abacus Kasavanahalli

**description:** The institution identity. Use the complete supplied colour lockup on white for centre communications, posters and presentations. Colours inside this artwork are fixed and do not extend the design palette.


#### variants

**id:** sip-kasavanahalli

**name:** SIP Abacus PLUS Kasavanahalli

**url:** https://cdn.sipkvh.app/assets/brand/v1/sip-kasavanahalli.png

**bg:** light

**note:** primary institution identity


**key:** kvh-long

**title:** sipkvh.app

**description:** The digital learning platform identity. Use it for the app, product tutorials and platform communications. It can accompany the institution logo when both are relevant, with separate clear space.


#### variants

**id:** sipkvh-green

**name:** sipkvh.app · green

**url:** https://cdn.sipkvh.app/assets/brand/v1/sipkvh-green.png

**bg:** light

**id:** sipkvh-black

**name:** sipkvh.app · black

**url:** https://cdn.sipkvh.app/assets/brand/v1/sipkvh-black.png

**bg:** light

**id:** sipkvh-white

**name:** sipkvh.app · white

**url:** https://cdn.sipkvh.app/assets/brand/v1/sipkvh-white.png

**bg:** dark


**key:** kvh-icon

**title:** sipkvh.app icon

**description:** For a recognised app context, avatars, favicons and tight spaces. The icon alone does not replace the institution identity on first contact.


#### variants

**id:** sipkvh-icon-black

**name:** sipkvh.app · black icon

**url:** https://cdn.sipkvh.app/assets/brand/v1/sipkvh-icon-black.png

**bg:** light

**id:** sipkvh-icon-green

**name:** sipkvh.app · green icon

**url:** https://cdn.sipkvh.app/assets/brand/v1/sipkvh-icon-green.svg

**bg:** light




### rules


#### do

- keep at least one mark-height of clear space on all four sides; for the SIP lockup use the SIP capital-letter height
- use the supplied white sipkvh.app export on a dark, quiet field, or place the colour logo on a white panel
- preserve original proportions and all lettering, including Kasavanahalli and the plus symbol


#### dont

- recolour, redraw, retype, filter, crop or AI-generate a logo
- stretch, squash or rotate the logo
- add shadows, outlines or other effects to the logo itself
- use event, partner or organiser logos as SIPKVH identity

**clear Space:** At least one mark-height on all sides; for the institution logo use the SIP capital-letter height. Treat logos as separate units when paired.

**minimums:** Institution: 120 px wide; app long lockup: 100 px; icon: 24 px. These are website floors, not print or projected-size targets. The 96 px black icon is for small screen use, not large-format printing.

**unavailable:** No institution monochrome/reversed export is supplied. Put the original institution logo on a white panel instead. Do not fabricate variants.


## assets

**id:** sip-kasavanahalli

**filename:** sip-kasavanahalli.png

**name:** SIP Abacus PLUS Kasavanahalli

**kind:** institution

**surface:** light

**format:** PNG

**width:** 1512

**height:** 722

**minimum Width:** 120

**url:** https://cdn.sipkvh.app/assets/brand/v1/sip-kasavanahalli.png

**sha256:** a4a895c34c105108faab5c886e0e3525263fd260c40b852ec8a7601e6b8070ff

**id:** sipkvh-green

**filename:** sipkvh-green.png

**name:** sipkvh.app · green

**kind:** app

**surface:** light

**format:** PNG

**width:** 6150

**height:** 1050

**minimum Width:** 100

**url:** https://cdn.sipkvh.app/assets/brand/v1/sipkvh-green.png

**sha256:** 89352ff753f843bd8e9210a43edf192b52532956c77b111eacd3b71168834b68

**id:** sipkvh-black

**filename:** sipkvh-black.png

**name:** sipkvh.app · black

**kind:** app

**surface:** light

**format:** PNG

**width:** 1539

**height:** 263

**minimum Width:** 100

**url:** https://cdn.sipkvh.app/assets/brand/v1/sipkvh-black.png

**sha256:** 0815cd55ca38919c7e219dd0799796e60c686eedee94ad1bb986963729161b6e

**id:** sipkvh-white

**filename:** sipkvh-white.png

**name:** sipkvh.app · white

**kind:** app

**surface:** dark

**format:** PNG

**width:** 6150

**height:** 1050

**minimum Width:** 100

**url:** https://cdn.sipkvh.app/assets/brand/v1/sipkvh-white.png

**sha256:** 4d3279c9df2030fc94f463d0a705274b050c4320377e5ff5492567435efb7d41

**id:** sipkvh-icon-black

**filename:** sipkvh-icon-black.png

**name:** sipkvh.app · black icon

**kind:** icon

**surface:** light

**format:** PNG

**width:** 96

**height:** 96

**minimum Width:** 24

**url:** https://cdn.sipkvh.app/assets/brand/v1/sipkvh-icon-black.png

**sha256:** 1348f1a0179131ab4143adfcafbc1195bbed024372dc125ede3f3429ef0c690e

**id:** bead

**filename:** bead.svg

**name:** The original SIPKVH bead

**kind:** motif

**surface:** light

**format:** SVG

**width:** 24

**height:** 11

**minimum Width:** 24

**url:** https://cdn.sipkvh.app/assets/brand/v1/bead.svg

**sha256:** f04be5e170f972e134957ad1a2029d442c7fd70cddc502c39e27cac81646a118

**id:** sipkvh-icon-green

**filename:** sipkvh-icon-green.svg

**name:** sipkvh.app · green icon

**kind:** icon

**surface:** light

**format:** SVG

**width:** 24

**height:** 24

**minimum Width:** 24

**url:** https://cdn.sipkvh.app/assets/brand/v1/sipkvh-icon-green.svg

**sha256:** 91016b4215c17668b87ecbd33a4d643af8ce762d4fba768e44bd49b9ccbfd1b3



## public Resources

**visual Guide:** https://sipabacuskvh.com/brand

**design Prompt:** https://sipabacuskvh.com/brand/brief.txt

**structured Rules:** https://sipabacuskvh.com/brand/brand.json

**colour Tokens:** https://sipabacuskvh.com/brand/tokens.css

**download Artwork:** Every asset below has a public HTTPS url. Download and use those exact bytes. Any provenance paths in a downloaded manifest describe history, not dependencies or available imports.

**brand Kit:** https://cdn.sipkvh.app/assets/brand/v1.4.0/sipkvh-brand-kit.zip


## motif

**asset:** https://cdn.sipkvh.app/assets/brand/v1/bead.svg

**geometry:** viewBox 0 0 24 11; preserve 24:11 proportions


### allowed

- Uniform scaling
- Rotation
- Positioning and stacking on simple rods
- Palette colours
- Sparse edge-cropped decoration


### forbidden

- Redrawing or approximating the path
- Stretching
- Substituting circles, diamonds, pills or emoji
- Putting a busy motif behind text or logo clear space


## decorative Shapes


### approved

- circle
- squircle
- rounded square
- capsule

**purpose:** Sparse decoration only, using approved palette colours. They never substitute for the original bead, form an abacus or replace any part of a logo. Keep them away from text and logo clear space. Controls and photo frames remain rounded rectangles with visible straight edges.


## qr Codes

**generator Url:** https://sipkvh.app/qrcode

**output Format:** PNG


### parameters

**margin:** Optional outer white margin in pixels, up to one quarter of the output size; defaults to zero

**data:** The exact destination URL, URL-encoded

**w:** Square output size in pixels, 1–1000; defaults to 300

**public Example:** https://sipkvh.app/qrcode?w=1000&margin=59&data=https%3A%2F%2Fsipabacuskvh.com%2Fbrand

**usage:** Send an HTTP GET to generatorUrl with URL-encoded data, w=1000 and margin=59, then save the PNG response. Directly downloading the public URL works without repository access. Use your own server-side proxy if a browser fetch is blocked by cross-origin rules; never replace the matrix with an AI approximation.

**example Destination:** https://sipabacuskvh.com/brand

**logo:** https://cdn.sipkvh.app/assets/brand/v1/sipkvh-icon-black.png


### settings

**shape:** square


#### qr Options

**type Number:** 0

**mode:** Byte

**error Correction Level:** Q


#### image Options

**save As Blob:** true

**hide Background Dots:** true

**image Size:** 0.4

**margin:** 0


#### dots Options

**type:** rounded

**color:** #000000

**round Size:** true


#### background Options

**round:** 0

**color:** #ffffff


#### corners Square Options

**type:** extra-rounded

**color:** #000000


#### corners Dot Options

**type:** dot

**color:** #000000


### frame

**reference Code Px:** 60

**border Px:** 2

**padding Px:** 4

**radius Px:** 8

**rule:** Use a square frame in ink on white. Scale the code, border, padding and corners together. The guide displays this recipe up to four times the PDF reference size, scaling down on narrow screens.


### rules

- Use the existing SIPKVH QR generator, not a hand-drawn or AI-generated matrix. Generate new artwork whenever the destination changes.
- Preserve the generated rounded black modules, finder geometry, original black app mark and white background. Do not add a second logo, recolour, stretch, rotate or animate the code.
- Keep the white surround supplied by the export. The brand-page tool requests a 59 px margin on a 1000 px image, matching the PDF frame proportions when displayed. Do not crop that white surround or put labels inside it. The logo margin setting is separate from this outer space.
- Place a readable destination or short URL next to the QR. Keep decoration, labels and borders outside the quiet zone.
- Scan and independently decode the final exported code to the exact intended URL. Test with a real phone at the actual printed or projected size and viewing distance; there is no universal minimum physical size.
- Use an appropriate output resolution; the existing public endpoint accepts up to 1000 px. For larger exports, use the same generator settings at the required resolution rather than enlarging a small raster image.


## photography

**lead:** real children, real focus, natural light.


### principles

- natural light, warm and soft
- candid moments over posed smiles
- the child and the abacus together in frame
- clean, uncluttered backgrounds


### shots

**ratio:** 4:5

**brief:** A child mid-calculation, eyes on the abacus, soft window light from the left. Shallow depth of field.

**ratio:** 1:1

**brief:** Close crop of small hands moving the beads, warm tones, background blurred out.

**ratio:** 4:5

**brief:** A parent and child reading a report together at the kitchen table, candid, unposed.

**ratio:** 16:9

**brief:** A bright classroom wide shot, children working, plenty of headroom and clean walls.



### dont

- stiff, posed studio portraits
- cold or blue-tinted lighting
- busy or cluttered backgrounds
- generic stock imagery


### additional

- Usually present photographs inside a white wrapper with 4 px padding, a 3 px dashed --border outline and 24 px outer corners; give the image 20 px corners. The complete frame recipe is included above.
- Use authorised real centre or supplied photographs. The shot briefs describe direction, not proof that those images exist.
- Do not fabricate student photos, testimonials or competition evidence. Get the required consent for the intended use.
- Preserve natural skin tones, crop without cutting faces or hands, and keep text off busy detail.


## icons

**family:** Lucide

**stroke Width:** 2


### sizes Px

- 16
- 20
- 24
- 32

**rules:** Use consistent outlined system icons with rounded caps, paired with text where needed. Brand logos and the bead use their original artwork, not generic icons. Use each social platform's supplied mark.


## motion

**principle:** Motion should help someone feel ready, understand a change or enjoy an interaction. Choose the job first, then the movement.

**rules:** Use motion to build anticipation, explain relationships, acknowledge an action or bring playful character to the experience. Fun and delight are valid purposes. A small shake while an exam starts, beads moving through a sequence, a paced score reveal and tactile button feedback can each serve a different moment. Choose amplitude, rhythm and duration for that moment instead of applying one subtle reveal everywhere. Tie motion to a real action, state or story beat. Pending-state loops may continue while work is happening and must stop when it resolves. A brief, relevant reveal can give a result time to land; keep essential controls available and skip repeated celebrations on return visits. Keep reading and actions comfortable, and let playful moments settle. Avoid unrelated perpetual movement, competing effects, flashing or waiting added solely for decoration. Honour prefers-reduced-motion: replace shaking, travel and bouncing with an immediate state change, preserving every status, action, explanation and keyboard focus. Incorrect demonstrations are opt-in and time-limited.


### purposes

**id:** anticipation

**tab:** Get ready

**title:** Build anticipation.

**caption:** A small shake says the exam is getting ready. It settles as soon as the next step is available.

**reference:** Exam-start feedback in the learning app.

**id:** understanding

**tab:** Make sense

**title:** Make the idea click.

**caption:** Beads arrive in order, leading the eye from individual parts to the total. The sequence helps explain the idea.

**reference:** Staged maths and bead interactions on the home page.

**id:** delight

**tab:** Feel good

**title:** Make progress feel rewarding.

**caption:** A little celebration gives completed practice a satisfying finish. The result stays clear after the movement settles.

**reference:** Prodigy+ score reveals and celebrations of progress.


**reduced Motion:** Keep the meaning. Change the movement. Show the ready state, complete explanation or confirmation immediately, without shaking, travelling or bouncing. Every word, action and focus state remains available.


## voice

**lead:** premium yet playful, and always on the child's side.


### principles

**title:** warm, never babyish

**body:** We talk to kids like capable people, and to parents like trusted equals.

**title:** clear over clever

**body:** If a sentence needs a second read, cut it. Plain words win.

**title:** confident, not loud

**body:** We state what we do and let the results speak. No hype.

**title:** principled

**body:** We say no to shortcuts that do not help the child, even when they would sell.



### do

- write short, plain sentences
- use a comma, a full stop or brackets instead of a dash
- speak to one parent, or one child, not a crowd
- lead with the benefit to the child


### dont

- use em dashes anywhere in brand copy
- pile on exclamation marks or emoji
- make claims we cannot back up
- talk down to children


### language Rules

**title:** British/Indian English.

**body:** Write “colour”, “centre” and “maths”. For example: “Enrol at our centre”, rather than “Enroll at our center”. Keep official names unchanged.

**title:** Short sentences.

**body:** Give each sentence one job. “Practise for ten minutes. Bring your abacus.” Use full stops or commas instead of em dashes.

**title:** No unsupported promises.

**body:** Describe the real benefit: “Build confidence through steady practice.” Never promise “Guaranteed top marks” or invent achievements, results or testimonials.



### examples

**off:** Unlock your child's limitless potential with our revolutionary program!!!

**on:** Give your child a calm, playful way to get fast at mental maths.

**off:** Our best-in-class curriculum is truly second to none.

**on:** A clear path from the very first bead to full mental calculation.


**language:** British/Indian English: colour, centre, maths. Use we/our for centre communications. Keep official product names and acronyms intact. No em dashes in brand copy.


## applications

**id:** presentations

**title:** presentations.

**format:** 16:9 · 10–20–30


### rules

- One idea per slide; no more than 10 slides and 20 spoken minutes. All audience-facing text at least 30 pt.
- Always use a white presentation canvas, an oversized bold Pally heading and one green Sentient phrase. Add one image, diagram or original bead arrangement.
- Use 6–8% horizontal and 7–9% vertical margins. Move supporting detail to speaker notes without losing essential instructions.
- For web decks, use the full viewport, keyboard navigation, floating controls that fade when idle, and reduced-motion support.

**deliverables:** Editable deck or source, PDF, actual fonts or installation links, and speaker notes. Inspect all slides and meaningful reveal states.

**id:** posters

**title:** posters & print.

**format:** A4 / A3 · portrait first


### rules

- Read in this order: institution identity, one headline, essential details, one action. Keep date, time and venue together when relevant.
- Use Pally for the headline; reserve Sentient for one editorial phrase or formal document content. Use a calm white base and one framed accent field.
- Keep the supplied institution logo complete. Keep text and QR codes inside safe margins, with a quiet white QR zone.
- Size text for the intended viewing distance. Supply vector or high-resolution artwork, then confirm bleed, colour conversion and the final print proof.

**deliverables:** Editable source plus a print PDF with embedded fonts. Supply a separate screen export. Event facts must come from the current brief.

**id:** graphics

**title:** social & WhatsApp.

**format:** 1080 × 1350 / 1080 × 1080 / 1080 × 1920


### rules

- Choose 4:5 for feed graphics, 1:1 for square cards and 9:16 for stories. Check the destination's current crop and interface overlays.
- Use one short headline and one focal image or bead composition. Keep the primary message legible in a phone preview.
- Use white or a 300 family background with matching 950 ink. Keep identity and essential text comfortably away from the edges.
- Avoid long paragraphs, tiny footnotes, emoji decoration and a different colour for every sentence. Include a readable URL alongside an actionable QR.

**deliverables:** Editable source and sRGB PNG/JPEG exports at the requested dimensions, with final copy and image credits.

**id:** websites

**title:** websites & interfaces.

**format:** mobile first · accessible by default


### rules

- Design the phone layout first, then expand. Start at 24 px mobile gutters, a 1200 px content width and a consistent 8 px spacing rhythm.
- Use Pally for headings, body and controls, with optional Sentient editorial emphasis. Body starts at 16–18 px with 1.5–1.6 line height.
- Use real semantic headings, associated labels, visible keyboard focus and comfortable separation between controls. Follow the complete raised-button and checkbox recipes below, reusing a matching local implementation when available. Do not hide essential information behind hover.
- Body text needs at least 4.5:1 contrast. Brand green on white is for large text; use ink, emerald 900 or 950 for smaller green copy.

**deliverables:** Responsive layouts or code, named design tokens, original assets, keyboard states, and phone/desktop verification.

**id:** documents

**title:** reports & certificates.

**format:** calm, clear, credible


### rules

- Use the institution logo and a clean white page. Sentient can lead formal documents; Pally supports labels and explanatory copy.
- Make the student's name, achievement or report outcome the focal point. Keep data structured, units explicit and chart labels legible.
- Use green and one supporting family sparingly. Do not imitate seals, award badges or official credentials that have not been supplied.
- Keep every name, level, score and date tied to the current approved source. Never copy real student details from a design reference.

**deliverables:** Editable template and a proofed PDF with embedded fonts. Check variable-length names and real content before reuse.


**reference Use:** Past event designs inform colour fields, thick rounded frames and restrained solid offset shadows. Event and organiser logos are not SIPKVH assets. Do not reuse their identities, dates or claims.


## quality Checks

- The message and intended next action are clear at a glance.
- The correct institution or app identity is supplied unchanged, with clear space.
- Fonts are Pally and/or Sentient, with no unnoticed substitution in the export.
- White space survives the final copy. No essential text, logo or QR is clipped.
- Colours use the named tokens and accessible text pairings; colour is never the only signal.
- The documented component recipes are followed, brand green leads, ordinary borders use --border, coloured cards have no added outline, and no unapproved tints or repeated eyebrows have crept in.
- Headings, supporting copy, captions and actions have deliberate text-colour roles; muted text remains readable on its actual surface.
- Real claims, dates, names, contact details and permissions come from the current brief.
- Every QR is decoded and its destination verified; include a readable alternative URL.
- The work has been checked at its actual phone, presentation or printed viewing size.
- The editable source, exports, assets and font instructions are included in the handoff.

**handoff:** Include editable source, required exports, linked original assets, font installation links, sources/credits and verified links. Report deliberate departures from these rules.


## implementation

**scope:** The following CSS is a portable reference, not a required framework. It defines all colour aliases and the local action/frame classes used in the component recipes. Use the same values in your stack. Load the two public font stylesheets listed above. No private repository is needed.


```css
/* SIPKVH public design tokens. Values are complete CSS colours, not bare HSL channels. */
:root {
    --sipkvh-brand-green: #16A34A;
    --sipkvh-ink: #0A0A0B;
    --sipkvh-muted-ink: #71717A;
    --sipkvh-surface: #FFFFFF;
    --sipkvh-hairline: #E4E4E8;
    --sipkvh-emerald-300: #6EE7B7;
    --sipkvh-emerald-400: #34D399;
    --sipkvh-emerald-900: #064E3B;
    --sipkvh-emerald-950: #022C22;
    --sipkvh-orange-300: #FDBA74;
    --sipkvh-orange-400: #FB923C;
    --sipkvh-orange-900: #7C2D12;
    --sipkvh-orange-950: #431407;
    --sipkvh-blue-300: #93C5FD;
    --sipkvh-blue-400: #60A5FA;
    --sipkvh-blue-900: #1E3A8A;
    --sipkvh-blue-950: #172554;
    --sipkvh-yellow-300: #FDE047;
    --sipkvh-yellow-400: #FACC15;
    --sipkvh-yellow-900: #713F12;
    --sipkvh-yellow-950: #422006;
    --sipkvh-rose-300: #FDA4AF;
    --sipkvh-rose-400: #FB7185;
    --sipkvh-rose-900: #881337;
    --sipkvh-rose-950: #4C0519;
    --sipkvh-font-primary: "Pally-Variable", "Pally", sans-serif;
    --sipkvh-font-editorial: "Sentient-Variable", "Sentient", Georgia, serif;
    --background: var(--sipkvh-surface);
    --foreground: var(--sipkvh-ink);
    --muted-foreground: var(--sipkvh-muted-ink);
    --border: var(--sipkvh-hairline);
    --primary: var(--sipkvh-brand-green);
    --primary-foreground: var(--foreground);
    --muted: #F4F4F5; /* Existing disabled-control surface only, not a new decorative background. */
    --ring: var(--primary);
    --success: var(--primary);
    --success-foreground: var(--foreground);
    --destructive: #EF4444; /* Incorrect/error status only. */
    --destructive-foreground: var(--foreground);
    --sipkvh-space-unit: 8px;
    --sipkvh-mobile-gutter: 24px;
    --sipkvh-content-width: 1200px;
    --sipkvh-target-min: 40px;
}
/* Load the two font stylesheets listed in this guide, then the tokens above. */
body { margin: 0; background: var(--background); color: var(--muted-foreground); font: 400 16px/1.6 var(--sipkvh-font-primary); }
h1, h2, h3, h4, h5, h6 { color: var(--foreground); font-family: var(--sipkvh-font-primary); font-weight: 700; }
.sip-essential { color: var(--foreground); }
.sip-caption, .sip-helper { color: var(--muted-foreground); }
.sip-editorial { font-family: var(--sipkvh-font-editorial); }
/* Assign 950 headings and 900 supporting text explicitly on each approved 300 colour field. */
.sip-action { display: inline-flex; align-items: center; justify-content: center; height: 40px; margin-top: 6px; padding: 0; border: 0; border-radius: 8px; background: var(--border); color: var(--foreground); font: 500 14px/20px var(--sipkvh-font-primary); text-decoration: none; cursor: pointer; transition: transform 150ms; }
.sip-action__face { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; padding: 0 16px; border: 2px solid var(--border); border-radius: 6px; background: var(--background); transform: translateY(-6px); transition: transform 150ms; }
.sip-action--primary, .sip-action--primary > .sip-action__face { background: var(--primary); color: var(--primary-foreground); }
.sip-action--primary > .sip-action__face { border-color: transparent; }
.sip-action--icon { width: 40px; }
.sip-action--icon > .sip-action__face { padding: 0; }
.sip-action svg { width: 16px; height: 16px; flex: none; }
.sip-action:focus-visible { outline: 2px solid var(--ring); outline-offset: 4px; }
.sip-action:not(:disabled):not([aria-disabled="true"]):hover { transform: translateY(-4px); }
.sip-action:not(:disabled):not([aria-disabled="true"]):active > .sip-action__face { transform: translateY(-2px); }
.sip-action:disabled, .sip-action[aria-disabled="true"], .sip-action:disabled > .sip-action__face, .sip-action[aria-disabled="true"] > .sip-action__face { background: var(--muted); color: var(--muted-foreground); transform: none; cursor: not-allowed; }
.sip-photo-frame, .sip-logo-specimen { box-sizing: border-box; padding: 4px; border: 3px dashed var(--border); border-radius: 24px; background: var(--background); }
.sip-photo-frame img { display: block; width: 100%; height: auto; border-radius: 20px; }
.sip-logo-specimen img { display: block; max-width: 100%; height: auto; object-fit: contain; }
@media (prefers-reduced-motion: reduce) {
    .sip-action, .sip-action__face { transition: none; transform: none !important; }
}
```


**action Markup:** <button class="sip-action" type="button"><span class="sip-action__face">Action label</span></button> For navigation use an anchor with the same classes and a real href. Add sip-action--primary or sip-action--icon to the outer element for those variants.
